PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

INTERNET AND WEB DESIGNING

Unit-I
Introduction to Internet -Internet Access / Dial-Up Connection-Internet Service features-TCP/IP Vs
Shell Accounts-Configuring the machine for TCP/IP Account-Configuring the Shell Account-Telnet-
Changing the Password-World Wide Web(WWW)-Web Page-Hyper Text-HTML Tags-Net Surfing-
Internet/Web Browsing-Browsing-Internet Addressing-IP Address-Domain Names-Electronic Mail-Uniform
Resource Locator(URL)-Internet Protocols-TCP/IP-FTP-HTTP-Telnet-gopher-WAIS.

Introduction to Internet
Internet is the world’s largest computer network, the network of networks, scattered all over the world.
The vast worldwide system consisting of information, people and computers is named as internet. The Internet
is a global network of networks. People and organizations connect into the Internet so they can access its
massive store of shared information. The Internet is an inherently participative medium. Anybody can publish
information or create new services. The Internet is a cooperative endeavor no organization is in charge of the
net.

History & Development of the Internet:

In its infancy, the Internet was originally conceived by the Department of Defense as a way to protect
government communications systems in the event of a military strike. The original network, dubbed ARPANet
(for the Advanced Research Projects Agency that developed it) evolved into a communications channel among
contractors, military personnel, and university researchers who were contributing to ARPA projects. The
network employed a set of standard protocols to create an effective way for these people to communicate and
share data with each other. ARPAnet's popularity continued to spread among researchers and in the 1980 the
National Science Foundation, whose NSFNet, linked several high speed computers, took charge of what had
come to be known as the Internet. By the late 1980's, thousands of cooperating networks were participating in
the Internet. In 1991, the U.S. High Performance Computing Act established the NREN (National Research &
Education Network). NREN's goal was to develop and maintain high-speed networks for research and
education, and to investigate commercial uses for the Internet. The rest, as they say, is history in the making.
The Internet has been improved through the developments of such services as Gopher and the World Wide
Web. Even though the Internet is predominantly thought of as a research oriented network, it continues to
grow as an informational, creative, and commercial resource every day and all over the world.

Meaning of Internet

A network of computers and several networks consisting of computers, people and information. The
internet helps in three obvious ways

1. To get information

We can get information about people, products, organizations,research data, electronic versions of the
printed media, movies, etc from the internet. The most recent and very successful attempt at presenting
information over the internet is World Wide Web (WWW).

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 2
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
2. To provide information
The best and most inexpensive way to let people know about you or about your institution is setting up
a home page about you and your products and services.

i) Publishing, including full text articles, reports, illustrated articles, abstracts, computer programs
and demonstrations.
ii) Extension, some of the delays associated with the printed media may be reduced.
iii) Teaching includes both learning and assistance for students.

3. To compile information
The special case of “getting information”. For eg. You wanted to poll the readership of magazine or
conduct survey to detect the pulse of a selected community, web provider an opportunity. Using forms, e-mail
etc you can conduct surveys and get opinion of peoples across the world

Requirements to connect the Internet:

 To access the internet over phone lines the user needs 

 A Computer 
 A Modem 
 An available telephone line 
 The appropriate software 
 A telephone number to use to connect to a remote internet computer. 

Internet access/ Dial-Up Connection

History and types of connections

Common methods of Internet access include dial-up, landline (over Cable Internet access, Optical fiber
or Twisted pairs), T- lines, Wi-Fi, satellite and cell phones.

Dial-up connections are the most common type of Internet connection available from ISPs and the slowest and
(usually) the least expensive. A dial-up connection allows users to connect to the Internet via a local server
using a standard 56k modem, the PC literally dials (hence the name) a telephone number (provided by the
Internet Service Provider) and connects to the server's modem and therefore the Internet. Once connected
users are free to search the web as they please, however, compared to modern speeds of broadband Internet,
dial-up is very slow and can only nominally transfer at 56 Kilobits per second.

Asymmetric digital subscriber lines (ADSL) have become a widely available Broadband Internet access
connection, providing a variety of data rates. The connections work by splitting the function of a phone line
into separate channels for voice telephone calls and for data (Internet). Thus, a user can talk on the phone and
be connected to the Internet at the same time. ADSL connection services are sold with different speed
specifications, below are some common configurations for download/upload speed:

512kbit/s/128kbit/s
1 Mbit/s/256kbit/s
3 Mbit/s/768kbit/s

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 3
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Cable Internet access, the principal competitor to DSL, is offered at a range of prices and speeds overlapping
that of DSL, but tends to concentrate more on the high end of the market.

Wireless connections

Wi-Fi provides wireless access to computer networks, and therefore can do so to the Internet itself.
Hotspots providing such access include Wi-Fi-cafes, where a would-be user needs to bring their own wireless-
enabled devices such as a laptop or PDA. These services may be free to all, free to customers only, or fee-
based. A hotspot need not be limited to a confined location. The whole campus or park, or even the entire city
can be enabled. Grassroots efforts have led to wireless community networks.

Apart from Wi-Fi, there have been experiments with proprietary mobile wireless networks like Ricochet,
various high-speed data services over cellular or mobile phone networks, and fixed wireless services. These
services have not enjoyed widespread success due to their high cost of deployment, which is passed on to
users in high usage fees. New wireless technologies such as WiMAX have the potential to alleviate these
concerns and enable simple and cost effective deployment of metropolitan area networks covering large, urban
areas. There is a growing trend towards wireless mesh networks, which offer a decentralized and redundant
infrastructure and are often considered the future of the Internet.

Methods and venues of connection

Besides accessing from residences, there are public places to use the Internet which would include
libraries and Internet cafes, where computers with Internet connections are available. Some libraries provide
stations that provide facilities for hooking up public-owned laptops to local area networks (LANs). There are
also wireless Internet access points in many public places like airport halls, in some cases just for brief use
while standing. These Access points may provide coin operated computers or Wi-Fi hot spots that enable
specially equipped laptops to pick up Internet service signals. Various terms are used, such as "public Internet
kiosk", "public access terminal", and "Web payphone". Many hotels now also have public terminals, though
these are usually fee based.

Internet Services Features

Information

Many people use the terms Internet and World Wide Web, or just the Web, interchangeably, but the two
terms are not synonymous. The World Wide Web is a global set of documents, images and other resources,
logically interrelated by hyperlinks and referenced with Uniform Resource Identifiers (URIs). URIs allow
providers to symbolically identify services and clients to locate and address web servers, file servers, and other
databases that store documents and provide resources and access them using the Hypertext Transfer Protocol
(HTTP), the primary carrier protocol of the Web. HTTP is only one of the hundreds of communication
protocols used on the Internet. Web services may also use HTTP to allow software systems to communicate in
order to share and exchange business logic and data.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 4
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
World Wide Web browser software, such as Internet Explorer, Firefox, Opera, Apple Safari, and Google
Chrome, let users navigate from one web page to another via hyperlinks embedded in the documents. These
documents may also contain any combination of computer data, including graphics, sounds, text, video,
multimedia and interactive content including games, office applications and scientific demonstrations.
Through keyword-driven Internet research using search engines like Yahoo! and Google, users worldwide
have easy, instant access to a vast and diverse amount of online information. Compared to printed
encyclopedias and traditional libraries, the World Wide Web has enabled the decentralization of information.

The Web has also enabled individuals and organizations to publish ideas and information to a potentially large
audience online at greatly reduced expense and time delay. Publishing a web page, a blog, or building a
website involves little initial cost and many cost-free services are available. Publishing and maintaining large,
professional web sites with attractive, diverse and up-to-date information is still a difficult and expensive
proposition, however. Many individuals and some companies and groups use web logs or blogs, which are
largely used as easily updatable online diaries. Some commercial organizations encourage staff to
communicate advice in their areas of specialization in the hope that visitors will be impressed by the expert
knowledge and free information, and be attracted to the corporation as a result. One example of this practice is
Microsoft, whose product developers publish their personal blogs in order to pique the public's interest in their
work. Collections of personal web pages published by large service providers remain popular, and have
become increasingly sophisticated. Whereas operations such as Angel fire and Geo Cities have existed since
the early days of the Web, newer offerings from, for example, Face book and My Space currently have large
followings. These operations often brand themselves as social network services rather than simply as web
page hosts.

Communication

E-mail is an important communications service available on the Internet. The concept of sending
electronic text messages between parties in a way analogous to mailing letters or memos predates the creation
of the Internet. Today it can be important to distinguish between internet and internal e-mail systems. Internet
e-mail may travel and be stored unencrypted on many other networks and machines out of both the sender's
and the recipient's control. During this time it is quite possible for the content to be read and even tampered
with by third parties, if anyone considers it important enough. Purely internal or intranet mail systems, where
the information never leaves the corporate or organization's network, are much more secure, although in any
organization there will be IT and other personnel whose job may involve monitoring, and occasionally
accessing, the e-mail of other employees not addressed to them. Pictures, documents and other files can be
sent as e-mail attachments. E-mails can be cc-ed to multiple e-mail addresses.

Internet telephony is another common communications service made possible by the creation of the Internet.
VoIP stands for Voice-over-Internet Protocol, referring to the protocol that underlies all Internet
communication. The idea began in the early 1990s with walkie-talkie-like voice applications for personal
computers. In recent years many VoIP systems have become as easy to use and as convenient as a normal
telephone. The benefit is that, as the Internet carries the voice traffic, VoIP can be free or cost much less than a
traditional telephone call, especially over long distances and especially for those with always-on Internet
connections such as cable or ADSL. VoIP is maturing into a competitive alternative to traditional telephone
service. Interoperability between different providers has improved and the ability to call or receive a call from
a traditional telephone is available. Simple, inexpensive VoIP network adapters are available that eliminate the
need for a personal computer.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 5
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Data transfer

File sharing is an example of transferring large amounts of data across the Internet. A computer file
can be e-mailed to customers, colleagues and friends as an attachment. It can be uploaded to a website or FTP
server for easy download by others. It can be put into a "shared location" or onto a file server for instant use by
colleagues. The load of bulk downloads too many users can be eased by the use of "mirror" servers or peer-to-
peer networks. In any of these cases, access to the file may be controlled by user authentication, the transit of
the file over the Internet may be obscured by encryption, and money may change hands for access to the file.
The price can be paid by the remote charging of funds from, for example, a credit card whose details are also
passed usually fully encrypted across the Internet. The origin and authenticity of the file received may be
checked by digital signatures or by MD5 or other message digests. These simple features of the Internet, over
a worldwide basis, are changing the production, sale, and distribution of anything that can be reduced to a
computer file for transmission. This includes all manner of print publications, software products, news, music,
film, video, photography, graphics and the other arts. This in turn has caused seismic shifts in each of the
existing industries that previously controlled the production and distribution of these products.

Streaming media refers to the act that many existing radio and television broadcasters promote Internet "feeds"
of their live audio and video streams (for example, the BBC). They may also allow time-shift viewing or
listening such as Preview, Classic Clips and Listen Again features. These providers have been joined by a
range of pure Internet "broadcasters" who never had on-air licenses. This means that an Internet-connected
device, such as a computer or something more specific, can be used to access on-line media in much the same
way as was previously possible only with a television or radio receiver. The range of available types of content
is much wider, from specialized technical web casts to on-demand popular multimedia services. Pod casting is
a variation on this theme, where usually audio material is downloaded and played back on a computer or
shifted to a portable media player to be listened to on the move. These techniques using simple equipment
allow anybody, with little censorship or licensing control, to broadcast audio-visual material worldwide.

Webcams can be seen as an even lower-budget extension of this phenomenon. While some webcams can give
full-frame-rate video, the picture is usually either small or updates slowly. Internet users can watch animals
around an African waterhole, ships in the Panama Canal, traffic at a local roundabout or monitor their own
premises, live and in real time. Video chat rooms and video conferencing are also popular with many uses
being found for personal webcams, with and without two-way sound. YouTube was founded on 15 February
2005 and is now the leading website for free streaming video with a vast number of users. It uses a flash-based
web player to stream and show video files. Registered users may upload an unlimited amount of video and
build their own personal profile. YouTube claims that its users watch hundreds of millions, and upload
hundreds of thousands of videos daily.

Accessibility

Common methods of Internet access in homes include dial-up, landline broadband (over coaxial cable,
fiber optic or copper wires), Wi-Fi, satellite and 3G technology cell phones. Public places to use the Internet
include libraries and Internet cafes, where computers with Internet connections are available. There are also
Internet access points in many public places such as airport halls and coffee shops, in some cases just for brief
use while standing. Various terms are used, such as "public Internet kiosk", "public access terminal", and
"Web payphone". Many hotels now also have public terminals, though these are usually fee-based. These
terminals are widely accessed for various usage like ticket booking, bank deposit, online payment etc. Wi-Fi
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 6
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
provides wireless access to computer networks, and therefore can do so to the Internet itself. Hotspots
providing such access include Wi-Fi cafes, where would-be users need to bring their own wireless-enabled
devices such as a laptop or PDA. These services may be free to all, free to customers only, or fee-based. A
hotspot need not be limited to a confined location. A whole campus or park, or even an entire city can be
enabled. Grassroots efforts have led to wireless community networks. The Internet can then be accessed from
such places as a park bench. Apart from Wi-Fi, there have been experiments with proprietary mobile wireless
networks like Ricochet, various high-speed data services over cellular phone networks, and fixed wireless
services. High-end mobile phones such as smart phones generally come with Internet access through the
phone network. Web browsers such as Opera are available on these advanced handsets, which can also run a
wide variety of other Internet software. More mobile phones have Internet access than PCs, though this is not
as widely used. An Internet access provider and protocol matrix differentiates the methods used to get online.

Social impact

The Internet has enabled entirely new forms of social interaction, activities, and organizing, thanks to
its basic features such as widespread usability and access. Social networking websites such as Face book and
My Space have created a new form of socialization and interaction. Users of these sites are able to add a wide
variety of information to their personal pages, to persue common interests, and to connect with others. It is
also possible to find a large circle of existing acquaintances, especially if a site allows users to represent
themselves by their given names, and to allow communication among existing groups of people. Sites like
meetup.com exist to allow wider announcement of groups which may exist mainly for face-to-face meetings,
but which may have a variety of minor interactions over their group's site.

In the first decade of the 21st century the first generation is raised with widespread availability of Internet
connectivity, bringing consequences and concerns in areas such as personal privacy and identity, and
distribution of copyrighted materials. These "digital natives" face a variety of challenges that were not present
for prior generations.

The Internet has achieved new relevance as a political tool, leading to Internet censorship by some states. The
presidential campaign of Howard Dean in 2004 in the United States was notable for its success in soliciting
donation via the Internet. Many political groups use the Internet to achieve a new method of organizing in
order to carry out their mission, having given rise to Internet activism. Some governments, such as those of
Iran, North Korea, Myanmar, the People's Republic of China, and Saudi Arabia, restrict what people in their
countries can access on the Internet, especially political and religious content. This is accomplished through
software that filters domains and content so that they may not be easily accessed or obtained without elaborate
circumvention.

The Internet has been a major outlet for leisure activity since its inception, with entertaining social
experiments such as MUDs and MOOs being conducted on university servers, and humor-related Usenet
groups receiving much traffic. Today, many Internet forums have sections devoted to games and funny videos;
short cartoons in the form of Flash movies are also popular. Over 6 million people use blogs or message
boards as a means of communication and for the sharing of ideas. The pornography and gambling industries
have taken advantage of the World Wide Web, and often provide a significant source of advertising revenue
for other websites. Although many governments have attempted to restrict both industries' use of the Internet,
this has generally failed to stop their widespread popularity. One main area of leisure activity on the Internet is
multiplayer gaming. This form of recreation creates communities, where people of all ages and origins enjoy
the fast-paced world of multiplayer games. These range from MMORPG to first-person shooters, from role-
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 7
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
playing games to online gambling. This has revolutionized the way many people interact while spending their
free time on the Internet. While online gaming has been around since the 1970s, modern modes of online
gaming began with subscription services such as GameSpy and MPlayer. Non-subscribers were limited to
certain types of game play or certain games. Many people use the Internet to access and download music,
movies and other works for their enjoyment and relaxation. Free and fee-based services exist for all of these
activities, using centralized servers and distributed peer-to-peer technologies. Some of these sources exercise
more care with respect to the original artists' copyrights than others.

Many people use the World Wide Web to access news, weather and sports reports, to plan and book vacations
and to find out more about their interests. People use chat, messaging and e-mail to make and stay in touch
with friends worldwide, sometimes in the same way as some previously had pen pals. Social networking
websites like MySpace, Face book and many others like them also put and keep people in contact for their
enjoyment. The Internet has seen a growing number of Web desktops, where users can access their files and
settings via the Internet. Cybers lacking can become a serious drain on corporate resources; the average UK
employee spent 57 minutes a day surfing the Web while at work, according to a 2003 study by Peninsula
Business Services.

TCP/IP (Transmission Control Protocol/Internet Protocol)

The Transmission Control Protocol (TCP) is one of the core protocols of the Internet Protocol Suite.
TCP is one of the two original components of the suite (the other being Internet Protocol, or IP), so the entire
suite is commonly referred to as TCP/IP. Whereas IP handles lower-level transmissions from computer to
computer as a message makes its way across the Internet, TCP operates at a higher level, concerned only with
the two end systems, for example a Web browser and a Web server. In particular, TCP provides reliable,
ordered delivery of a stream of bytes from a program on one computer to another program on another
computer. Besides the Web, other common applications of TCP include e-mail and file transfer. Among its
other management tasks, TCP controls segment size, flow control, the rate at which data is exchanged, and
network traffic congestion.

TCP provides a communication service at an intermediate level between an application program and the
Internet Protocol (IP). That is, when an application program desires to send a large chunk of data across the
Internet using IP, instead of breaking the data into IP-sized pieces and issuing a series of IP requests, the
software can issue a single request to TCP and let TCP handle the IP details.

IP works by exchanging pieces of information called packets. A packet is a sequence of bytes and consists of a
header followed by a body. The header describes the packet's destination and, optionally, the routers to use for
forwarding until it arrives at its final destination. The body contains the data which IP is transmitting.

Due to network congestion, traffic load balancing, or other unpredictable network behavior, IP packets can be
lost or delivered out of order. TCP detects these problems, requests retransmission of lost packets, rearranges
out-of-order packets, and even helps minimize network congestion to reduce the occurrence of the other
problems. Once the TCP receiver has finally reassembled a perfect copy of the data originally transmitted, it
passes that datagram to the application program. Thus, TCP abstracts the application's communication from
the underlying networking details.

TCP is used extensively by many of the Internet's most popular applications, including the World Wide Web,
E-mail, File Transfer Protocol, Secure Shell, and some streaming media applications.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 8
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
TCP is optimized for accurate delivery rather than timely delivery, and therefore, TCP sometimes incurs
relatively long delays (in the order of seconds) while waiting for out-of-order messages or retransmissions of
lost messages. It is not particularly suitable for real-time applications such as Voice over IP. For such
applications, protocols like the Real-time Transport Protocol (RTP) running over the User Datagram Protocol
(UDP) are usually recommended instead.

TCP is a reliable stream delivery service that guarantees delivery of a data stream sent from one host to
another without duplication or losing data. Since packet transfer is not reliable, a technique known as positive
acknowledgment with retransmission is used to guarantee reliability of packet transfers. This fundamental
technique requires the receiver to respond with an acknowledgment message as it receives the data. The sender
keeps a record of each packet it sends, and waits for acknowledgment before sending the next packet. The
sender also keeps a timer from when the packet was sent, and retransmits a packet if the timer expires. The
timer is needed in case a packet gets lost or corrupted.

TCP consists of a set of rules: for the protocol, that are used with the Internet Protocol, and for the IP, to send
data "in a form of message units" between computers over the Internet. At the same time that IP takes care of
handling the actual delivery of the data, TCP takes care of keeping track of the individual units of data
transmission, called segments that a message is divided into for efficient routing through the network. For
example, when an HTML file is sent from a Web server, the TCP software layer of that server divides the
sequence of bytes of the file into segments and forwards them individually to the IP software layer (Internet
Layer). The Internet Layer encapsulates each TCP segment into an IP packet by adding a header which
includes (among other data) the destination IP address. Even though every packet has the same destination
address, they can be routed on different paths through the network. When the client program on the destination
computer receives them, the TCP layer (Transport Layer) reassembles the individual segments and ensures
they are correctly ordered and error free as it streams them to an application.

Shell Account

Traditionally a shell account was a user account on a remote server which gave you access to a unix
shell via a command-line interface protocol such as telnet. They were originally provided by ISPs (such as
Netcom (USA) and Digex) and were used for file storage, web space, email accounts, newsgroup access and
software development. In more recent times, shell providers are often found to offer shell accounts at low-
cost or for free. These shell accounts generally provide users with access to various software and services
including compilers, IRC clients, background processes, FTP, text editor (such as nano) and email client (such
as pine).

Configuring the TCP/IP

A kernel mode TCP/IP stack typically has access to networking hardware for sending and receiving
packets, so first we must make sure the rump TCP/IP server has the same capability. The canonical way is to
use bridging and we will present that here. An alternative is to use the host kernel to route the packets, but that
is left as an exercise to the reader. In both cases, the rump kernel sends and receives external packets via
a /dev/tap<n> device node. The rump kernel must have read-write access to this device node. The details are
up to you, but the recommended way is to use appropriate group privileges.
To create a tap interface and attach it via bridge to a host Ethernet interface we execute the following
commands. You can attach as many tap interfaces to a single bridge as you like. For example, if you run

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 9
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
multiple rump kernels on the same machine, adding all the respective tap interfaces on the same bridge will
allow the different kernels to see each others' Ethernet traffic.

Introduction to Telnet:
Telnet (teletype network) is a network protocol used on the Internet or local area networks to provide a
bidirectional interactive communications facility. Typically, telnet provides access to a command-line
interface on a remote host via a virtual terminal connection which consists of an 8-bit byte oriented data
connection over the Transmission Control Protocol (TCP). User data is interspersed in-band with TELNET
control information.

Telnet was developed in 1969 beginning with RFC 15, extended in RFC 854, and standardized as Internet
Engineering Task Force (IETF) Internet Standard STD 8, one of the first Internet standards.

The term telnet may also refer to the software that implements the client part of the protocol. Telnet client
applications are available for virtually all computer platforms. Most network equipment and operating systems
with a TCP/IP stack support a Telnet service for remote configuration (including systems based on Windows
NT). Because of security issues with Telnet, its use has waned in favor of SSH for remote access.

Telnet is also used as a verb. To telnet means to establish a connection with the Telnet protocol, either with
command line client or with a programmatic interface. For example, a common directive might be: "To
change your password, telnet to the server, login and run the passwd command." Most often, a user will be
telnetting to a Unix-like server system or a network device such as a router and obtain a login prompt to a
command line text interface or a character-based full-screen manager.

Telnet is the protocol used to establish a login session on a remote computer on the network. While many
computers on the Internet require users to have authorization, others are open to the public and can be logged
onto with telnet. Telnet is not a method to transfer files from one machine to another, but rather is a way to
remotely connect to another system with priveleges to run specific programs on that system. Some uses of the
Telnet protocol include: connecting to a library catalog to search that library's collection connecting to a
location that allows public priveleges to search its campus information system connecting to a location that
gives you an up-to-the minute weather report

Basic Telnet Commands

Open - establishes a connection to the specified host. Close - closes an open connection and leaves you
in the telnet software quit - closes any open telnet sessions and exits the telnet software. When using a telnet
program like NCSA Telnet, you invoke these commands by way of pull-down menus or command keys.

Changing the Password

A password is a secret word or string of characters that is used for authentication, to prove identity or
gain access to a resource (example: an access code is a type of password). The password must be kept secret
from those not allowed access.

The use of passwords is known to be ancient. Sentries would challenge those wishing to enter an area or
approaching it to supply a password or watchword. Sentries would only allow a person or group to pass if they

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 10
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
knew the password. In modern times, user names and passwords are commonly used by people during a log in
process that controls access to protected computer operating systems, mobile phones, cable TV decoders,
automated teller machines (ATMs), etc. A typical computer user may require passwords for many purposes:
logging in to computer accounts, retrieving e-mail from servers, accessing programs, databases, networks, web
sites, and even reading the morning newspaper online.

For the purposes of more compellingly authenticating the identity of one computing device to another,
passwords have significant disadvantages (they may be stolen, spoofed, forgotten, etc.) over authentications
systems relying on cryptographic protocols which are more difficult to circumvent.

Procedures for changing passwords

Usually, a system must provide a way to change a password, either because a user believes the current
password has been (or might have been) compromised, or as a precautionary measure. If a new password is
passed to the system in unencrypted form, security can be lost (e.g., via wiretapping) even before the new
password can even be installed in the password database. And, of course, if the new password is given to a
compromised employee, little is gained. Some web sites include the user-selected password in an unencrypted
confirmation e-mail message, with the obvious increased vulnerability.

Identity management systems are increasingly used to automate issuance of replacements for lost passwords, a
feature called self service password reset. The user's identity is verified by asking questions and comparing the
answers to ones previously stored (ie, when the account was opened). Typical questions include: "Where were
you born?," "What is your favorite movie?" or "What is the name of your pet?" In many cases the answers to
these questions can be relatively easily guessed by an attacker, determined by low effort research, or obtained
through social engineering, and so this is less than fully satisfactory as a verification technique. While many
users have been trained never to reveal a password, few consider the name of their pet or favorite movie to
require similar care.

Website password systems

Passwords are used on websites to authenticate users and are usually maintained on the Web server,
meaning the browser on a remote system sends a password to the server (by HTTP POST), the server checks
the password and sends back the relevant content (or an access denied message). This process eliminates the
possibility of local reverse engineering as the code used to authenticate the password does not reside on the
local machine.

Transmission of the password, via the browser, in plaintext means it can be intercepted along its journey to the
server. Many web authentication systems use SSL to establish an encrypted session between the browser and
the server, and is usually the underlying meaning of claims to have a "secure Web site". This is done
automatically by the browser and increases integrity of the session, assuming neither end has been
compromised and that the SSL/TLS implementations used are high quality ones.

So-called website password and membership management systems often involve the use of Java or JavaScript
code existing on the client side (meaning the visitor's web browser) HTML source code (for example,
AuthPro). Drawbacks to such systems are the relative ease in bypassing or circumventing the protection by
switching off JavaScript and Meta redirects in the browser, thereby gaining access to the protected web page.
Others take advantage of server-side scripting languages such as ASP or PHP to authenticate users on the
server before delivering the source code to the browser. Popular systems such as Sentry Login and Password
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 11
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Sentry take advantage of technology in which web pages are protected using such scripting language code
snippets placed in front of the HTML code in the web page source saved in the appropriate extension on the
server, such as .asp or .php.

Introduction to the World Wide Web

The World Wide Web (also referred to as WWW or W3) is the fastest growing area of the Internet.
While gopher was an important step in allowing users to "browse" through the Internet's vast resources, the
World Wide Web has raised excitement about the Internet to new heights. What makes the World Wide Web
appealing and innovative is its use of hypertext as a way of linking documents to each other. A highlighted
word or phrase in one document acts as a pointer to another document that amplifies or relates to the first
document. When looking at a WWW document, the reader doesn't have to follow every pointer, or link (also
called a hypertext link), only those that look interesting or useful. In this way, the user tailors the experience to
suit his or her needs or interests. The other very appealing aspect of the World Wide Web is the use of
graphics and sound capabilities. Documents on the WWW include text, but they may also include still images,
video, and audio for a very exciting presentation. People who create WWW documents often include a
photograph of themselves along with detailed professional information and personal interests. (This is often
called a person's home page.)

What makes the WWW work?

WWW is another example of client/server computing. Each time a link is followed, the client is
requesting a document (or graphic or sound file) from a server (also called a Web server) that's part of the
World Wide Web that "serves" up the document. The server uses a protocol called HTTP or HyperText
Transport Protocol. The standard for creating hypertext documents for the WWW is HyperText Markup
Language or HTML. HTML essentially codes plain text documents so they can be viewed on the Web.

Web page

Web is a collection of files known as WebPages. These WebPages can contain hyperlinks to link other
WebPages. A hyperlink can be any text or image which when clicked would display another webpage .There
may be one or more pages in the home page, which is the initial webpage present in a website. A webpage or
web page is a document or resource of information that is suitable for the World Wide Web and can be
accessed through a web browser and displayed on a computer screen. This information is usually in HTML or
XHTML format, and may provide navigation to other web pages via hypertext links. Web pages may be
retrieved from a local computer or from a remote web server. The web server may restrict access only to a
private network, e.g. a corporate intranet, or it may publish pages on the World Wide Web. Web pages are
requested and served from web servers using Hypertext Transfer Protocol (HTTP). Web pages may consist of
files of static text stored within the web server's file system (static web pages), or the web server may
construct the (X) HTML for each webpage when it is requested by a browser (dynamic web pages). Client-
side scripting can make web pages more responsive to user input once in the client browser.

Hyper Text

Hypertext is text displayed on a computer with references (hyperlinks) to other text that the reader can
immediately access, usually by a mouse click or key press sequence. Apart from running text, hypertext may
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 12
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
contain tables, images and other presentational devices. Other means of interaction may also be present, such
as a bubble with text appearing when the mouse hovers over a particular area, a video clip starting, or a form
to complete and submit. The most extensive example of hypertext today is the World Wide Web.

HTML (Hypertext Markup Languages)

HTML stands for Hypertext Markup Languages ,which is an application of standard generalized Markup
Language(SGML).It is a simple language used to define and describe the layout of a Web page.HTML also
supports Multimedia and documents links.HTML consist of special codes which when embedded in text, adds
formatting. The special characters, which separate HTML from ordinary text, are the left and right brackets.
(<>).These brackets contain instructions known as TAGS that are not case sensitive. The Case study
substantially helps in understanding the need for learning HTML and the usage of HTML and the usage of
HTML in designing the web pages.

HTML Tags
• HTML tags are used to mark-up HTML elements .

• HTML tags are surrounded by the two characters < and > .

• The surrounding characters are called angle brackets .

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

• The first tag in a pair is the start tag, the second tag is the end tag.

• The text between the start and end tags is the element content.

• HTML tags are not case sensitive, <b> means the same as <B>.

Web browsers

A Web browser is a software application for retrieving, presenting, and traversing information
resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier
(URI) and may be a web page, image, video, or other piece of content. Hyperlinks present in resources enable
users to easily navigate their browsers to related resources. Although browsers are primarily intended to access
the World Wide Web, they can also be used to access information provided by Web servers in private
networks or files in file systems. Some browsers can be also used to save information resources to file
systems.

Generally, a browser is referred to as an application that provides access to a Web server. Depending
on the implementation, browser capabilities and thus structures vary. A Web browser, at a minimum, consists
of an Hypertext Markup Language (HTML) interpreter and HTTP client that is used to retrieve HTML Web
pages. Besides this basic requirement, many browsers also support FTP, NNTP, e-mail (POP and SMTP
clients), among other features, with an easy-to-manage graphical interface.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 13
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Browser

A browser is basically a client program that uses HTTP and is used to view Web pages on the World
Wide Web. Its function is to retrieve documents from the Web and format them in such a way that they can be
viewed in our systems. Netscape Navigator and Internet Explorer are two popular browsers for Windows and
Macintosh platforms while Lynx which can handle only text is designed for UNIX shell users. The browser
actually acts as an intermediary between our system and any other system on the Web. The program you use
to access the WWW is known as a browser because it "browses" the WWW and requests these hypertext
documents. Browsers can be graphical, like Netscape and Mosaic, allowing you to see and hear the graphics
and audio; text-only browsers (i.e., those with no sound or graphics capability) are also available. All of these
programs understand http and other Internet protocols such as FTP, gopher, mail, and news, making the
WWW a kind of "one stop shopping" for Internet users.

Internet Addressing:

To use Internet e-mail successfully, you must understand how the names and addresses for computers
and people on the Internet are formatted. Mastering this technique is just as important as knowing how to use
telephone numbers or postal addresses correctly. Fortunately, after you get the hang of them, Internet
addresses are usually no more complex than phone numbers and postal addresses. And, like those methods of
identifying a person, an organization, or a geographic location--usually by a telephone number or a street
address--Internet addresses have rules and conventions for use.

Sample Internet Address: custcare@aucegypt.edu

The Internet address has three parts:

1. A user name [custcare in the example above]

2. An "at" sign (@)

3. The address of the user's mail server [aucegypt.edu in the example above]

Sometimes it's useful to read an Internet address (like custcare@aucegypt.edu) or a domain name from right to
left because it helps you determine information about the source of the address. An address like
201B6DQF@asu.edu doesn't tell me much about the person who's sending me a message, but I can deduce
that the sender is affiliated with an educational institution because of the suffix edu.

The right-most segment of domain names usually adhere to the naming conventions listed below:

EDU Educational sites in the United States

COM Commercial sites in the United States

GOV Government sites in the United States

NET Network administrative organizations

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 14
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

MIL Military sites in the United States

ORG Organizations in the U.S. not covered by the categories above (e.g., non-profit orginaizations).

IP address
An Internet Protocol (IP) address is a numerical label that is assigned to devices participating in a
computer network utilizing the Internet Protocol for communication between its nodes. An IP address serves
two principal functions in networking: host or network interface identification and location addressing. The
role of the IP address has also been characterized as follows: "A name indicates what we seek. An address
indicates where it is. A route indicates how to get there." The original designers of TCP/IP defined an IP
address as a 32-bit number and this system, known as Internet Protocol Version 4 or IPv4, is still in use today.
However, due to the enormous growth of the Internet and the resulting depletion of available addresses, a new
[3]
addressing system (IPv6), using 128 bits for the address, was developed in 1995 and last standardized by
RFC 2460 in 1998. Although IP addresses are stored as binary numbers, they are usually displayed in human-
readable notations

The Internet Protocol also has the task of routing data packets between networks, and IP addresses specify the
locations of the source and destination nodes in the topology of the routing system. For this purpose, some of
the bits in an IP address are used to designate a sub network. The number of these bits is indicated in CIDR
notation, appended to the IP address, e.g., 208.77.188.166/24.

With the development of private networks and the threat of IPv4 address exhaustion, a group of private
address spaces was set aside by RFC 1918. These private addresses may be used by anyone on private
networks. They are often used with network address translators to connect to the global public Internet.

The Internet Assigned Numbers Authority (IANA) manages the IP address space allocations globally. IANA
works in cooperation with five Regional Internet Registries (RIRs) to allocate IP address blocks to Local
Internet Registries (Internet service providers) and other entities.

Domain name

A domain name is an identification label that defines a realm of administrative autonomy, authority,
or control in the Internet, based on the Domain Name System (DNS). Domain names are used in various
networking contexts and application-specific naming and addressing purposes. They are organized in
subordinate levels (subdomains) of the DNS root domain, which is nameless. The first-level set of domain
names are the top-level domains (TLDs), including the generic top-level domains (gTLDs), such as the
prominent domains com, net and org, and the country code top-level domains (ccTLDs). Below these top-level
domains in the DNS hierarchy are the second-level and third-level domain names that are typically open for
reservation by end-users that wish to connect local area networks to the Internet, run web sites, or create other
publicly accessible Internet resources. The registration of these domain names is usually administered by
domain name registrars who sell their services to the public.

Individual Internet host computers use domain names as host identifiers, or hostnames. Hostnames are
the leaf labels in the domain name system usually without further subordinate domain name space. Hostnames

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 15
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
appear as a component in Uniform Resource Locators (URLs) for Internet resources such as web sites (e.g.,
en.wikipedia.org).

Domain names are also used as simple identification labels to indicate ownership or control of a
resource. Such examples are the realm identifiers used in the Session Initiation Protocol (SIP), the Domain
Keys used to verify DNS domains in e-mail systems, and in many other Uniform Resource Identifiers (URIs).

An important purpose of domain names is to provide easily recognizable and memorizable names to
numerically addressed Internet resources. This abstraction allows any resource (e.g., website) to be moved to a
different physical location in the address topology of the network, globally or locally in an intranet. Such a
move usually requires changing the IP address of a resource and the corresponding translation of this IP
address to and from its domain name.

Domain names are often referred to simply as domains and domain name registrants are frequently
referred to as domain owners, although domain name registration with a registrar does not confer any legal
ownership of the domain name, only an exclusive right of use.

Electronic Mail

Electronic mail, often abbreviated as email, e.mail or e-mail, is a method of exchanging digital
messages. E-mail systems are based on a store-and-forward model in which e-mail computer server systems
accept, forward, deliver and store messages on behalf of users, who only need to connect to the e-mail
infrastructure, typically an e-mail server, with a network-enabled device (e.g., a personal computer) for the
duration of message submission or retrieval. Originally, e-mail was always transmitted directly from one user's
device to another's; nowadays this is rarely the case.

An electronic mail message consists of two components, the message header, and the message body,
which is the email's content. The message header contains control information, including, minimally, an
originator's email address and one or more recipient addresses. Usually additional information is added, such
as a subject header field.

The foundation for today's global Internet e-mail service was created in the early ARPANET and
standards for encoding of messages were proposed as early as 1973 (RFC 561). An e-mail sent in the early
1970s looked very similar to one sent on the Internet today. Conversion from the ARPANET to the Internet in
the early 1980s produced the core of the current service.

Network-based email was initially exchanged on the ARPANET in extensions to the File Transfer
Protocol (FTP), but is today carried by the Simple Mail Transfer Protocol (SMTP), first published as Internet
standard 10 (RFC 821) in 1982. In the process of transporting email messages between systems, SMTP
communicates delivery parameters using a message envelope separately from the message (headers and body)
itself.

Uniform Resource Locators or URLs:

A Uniform Resource Locator or URL is the address of a document you'll find on the WWW. Your
WWW browser interprets the information in the URL in order to connect to the proper Internet server and to

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 16
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
retrieve your desired document. Each time you click on a hyperlink in a WWW document, you're actually
instructing your browser to find the URL that's embedded within the hyperlink. The elements in a URL:
Protocol://server's address/filename

Hypertext protocol: http://www.aucegypt.edu

Gopher protocol: gopher://gopher.umm.tc.edu

File Transfer Protocol: ftp://ftp.dartmouth.edu

Telnet Protocol: telnet://pac.carl.org

News Protocol: news:alt.rock-n-roll.stones

Internet Protocols

A Protocol is a formal set of rules and conventions that governs hoe computer exchanges information over
a net medium. Other words two computer communicate with each other using some set of rules called
protocols. For instance, for one computer to send a message to another computer, the first computer must
perform the following steps:

 Breaking the data into small pieces called packets 

 Addressing of the destination computer is added to the packet. 
 Data is then delivered to the network card for transmission over the network. 

The receiving computer must perform the same steps, but in reverse order to accept the data:

 Accept the data from the network card. 

 Remove the destination address from the packets. 
 Reassemble the packets of data into the original message. 

The packets have the following components:

 A source address specifying the details of sending computer 
 A destination address 
 Instructions for the computer how to pass or sent the data. 
 If the packet is large, information on how to break the data into pieces. 
  The data to be transmitted to the remote computer. 
 Error checking information to ensure that the data arrives in to it. 

Types of protocol:
 TCP/IP (Transmission Control Protocol/Internet Protocol) 
 FTP (File Transfer Protocol) 
 SMTP (Simple Mail Transfer Protocol) 
 HTTP (Hypertext Transfer Protocol) 

TCP/IT
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 17
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
The Transmission Control Protocol/Internet Protocol (TCP/IP) suite has become the industry-standard
method of interconnecting hosts, networks, and the Internet. As such, it is seen as the engine behind the
Internet and networks worldwide. Although TCP/IP supports a host of applications, both standard and
nonstandard, these applications could not exist without the foundation of a set of core protocols. Additionally,
in order to understand the capability of TCP/IP applications, an understanding of these core protocols must be
realized. With this in mind, Part I begins with providing a background of TCP/IP, the current architecture,
standards, and most recent trends. Next, the section explores the two aspects vital to the IP stack itself. This
portion begins with a discussion of the network interfaces most commonly used to allow the protocol suite to
interface with the physical network media. This is followed by the protocols that must be implemented in any
stack, including protocols belonging to the IP and transport layers.
The main design goal of TCP/IP was to build an interconnection of networks, referred to as an
internetwork, or internet, that provided universal communication services over heterogeneous physical
networks. The clear benefit of such an internetwork is the enabling of communication between hosts on
different networks, erhaps separated by a large geographical area.
The words internetwork and internet are simply a contraction of the phrase interconnected network.
However, when written with a capital “I”, the Internet refers to the worldwide set of interconnected networks.
Therefore, the Internet is an internet, but the reverse does not apply. The Internet is sometimes called the
connected Internet.

TCP/IP applications
The highest-level protocols within the TCP/IP protocol stack are application protocols. They
communicate with applications on other internet hosts and are the user-visible interface to the TCP/IP protocol
suite.
All application protocols have some characteristics in common:
 They can be user-written applications or applications standardized and shipped with the TCP/IP
 product. Indeed, the TCP/IP protocol suite includes application protocols such as: 
– Telnet for interactive terminal access to remote internet hosts 
– File Transfer Protocol (FTP) for high-speed disk-to-disk file transfers 
– Simple Mail Transfer Protocol (SMTP) as an internet mailing system 
These are some of the most widely implemented application protocols, but many others exist. Each particular
TCP/IP implementation will include a lesser or greater set of application protocols.
 They use either UDP or TCP as a transport mechanism. Remember that UDP is unreliable and offers
no flow-control, so in this case, the application has to provide its own error recovery, flow control, and
congestion control functionality. It is often easier to build applications on top of TCP because it is a
reliable stream, connection-oriented, congestion-friendly, flow control-enabled protocol. As a result,
most application protocols will use TCP, but there are applications built on UDP to achieve better
 performance through increased protocol efficiencies. 
 Most applications use the client/server model of interaction. 

File Transfer Protocol (FTP)

File Transfer Protocol (FTP) is a standard network protocol used to exchange and manipulate files over
a TCP/IP based network, such as the Internet. FTP is built on a client-server architecture and utilizes separate
control and data connections between the client and server applications. Applications were originally
interactive command-line tools with standardized command syntax, but graphical user interfaces have been
developed for all desktop operating systems in use today. FTP is also often used as an application component
to automatically transfer files for program internal functions. FTP can be used with user-based password
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 18
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
authentication or with anonymous user access.

Resources available to you via FTP

Freeware
When you download freeware, the author continues to carry the copyright to the software, but permits you
to use the program for free. You can share freeware with others, as long as you don't sell it.

Public Domain
When you download public domain software, you can use it freely. The creator carries no copyright,
and has released it for anyone to use. There are no limits on distribution or sale and anyone can modify the
program.

Shareware
When you download shareware, the author continues to carry the copyright to the software, but you're
permitted short-term use of the program for evaluation purposes. At the end of evaluation period, you must
either pay the copyright holder for the program or destroy all copies you've made of it.

Hypertext Transfer Protocol (HTTP)

The Hypertext Transfer Protocol is a protocol designed to allow the transfer of Hyper text Markup
Language (HTML) documents. HTML is a tag language used to create hypertext documents. Hypertext
documents include links to other documents that contain additional information about the highlighted term or
subject. Such documents can contain other elements apart from text, such as graphic images, audio and video
clips, Java applets, and even virtual reality worlds (which are described in VRML, a scripting language for
that kind of elements).

Overview of HTTP
HTTP is based on request-response activity. A client, running an application called a browser,
establishes a connection with a server and sends a request to the server in the form of a request method. The
server responds with a status line, including the message's protocol version and a success or error code,
followed by a message containing server information, entity information, and possible body content. An HTTP
transaction is divided into four steps:
1. The browser opens a connection.
2. The browser sends a request to the server.
3. The server sends a response to the browser.
4. The connection is closed.
On the Internet, HTTP communication generally takes place over TCP connections. The default port is
TCP 80, but other ports can be used. This does not preclude HTTP from being implemented on top of any
other protocol on the Internet or on other networks. HTTP only presumes a reliable transport; any protocol that
provides such guarantees can be used. Except for experimental applications, current practice requires that the
connection be established by the client prior to each request and closed by the server after sending the
response. Both clients and servers should be aware that either party can close the connection prematurely, due
to user action, automated timeout, or program failure, and should handle such closing in a predictable and
TCP/IP Tutorial and Technical Overview desirable fashion. In any case, the closing of the connection by
either or both parties always terminates the current request, regardless of its status. In simple terms, HTTP is a
stateless protocol because it does not keep track of the connections. To load a page including two graphics, for

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 19
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
example, a graphic-enabled browser will open three TCP connections: one for the page and two for the
graphics. Most browsers, however, are able to handle several of these connections simultaneously.
This behavior can be rather resource-intensive if one page consists of a lot of elements, as quite a
number of Web pages do. HTTP 1.1, as defined in RFC 2616, alleviates this problem to the extent that one
TCP connection will be established per type of element on a page, and all elements of that kind will be
transferred over the same connection respectively. These deviates from HTTP 1.0 by making the connections
persistent. However, if a request depends on the information exchanged during a previous connection, this
information has to be kept outside the protocol. One way of tracking such persistent information is the use of
cookies. A cookie is a set of information that is exchanged between a client Web browser and a Web server
during an HTTP transaction. The maximum size of a cookie is 4 KB. All these pieces of information, or
cookies, are then stored in one single file and placed in the directory of the Web browser. If cookies are
disabled, that file is automatically deleted. A cookie can be retrieved and checked by the server at any
subsequent connection.

HTTP is a request/response standard as is typical in client-server computing. The client is an

application (e.g. web browser, spider etc) on the computer used by an end-user; the server is an application
running on the computer hosting the web site. The client which submits HTTP requests is also referred to as
the user agent. The responding server which stores or creates resources such as HTML files and images may
be called the origin server. In between the user agent and origin server may be several intermediaries, such as
proxies, gateways, and tunnels.

HTTP is not constrained in principle to using TCP/IP, although this is its most popular application via
the Internet. Indeed HTTP can be "implemented on top of any other protocol on the Internet, or on other
networks." HTTP only presumes a reliable transport; any protocol that provides such guarantees can be used."

Gopher

Gopher is a client/server system that allows you to access many Internet resources simply by making
selections from a sequence of menus. Each time you make a selection, Gopher carries out your request to the
computer that contains the information and "serves" it up. For example, if you select a menu item that
represents a text file, Gopher will get that file--wherever it happens to be--and display it for you. As you use
Gopher, some menu items lead to other menus. If you choose one of these, Gopher will retrieve the new menu
and display it for you. Thus you can move from menu to menu, using only a few key strokes or a mouse to
navigate. The power of Gopher is that the resources listed in a menu may be anywhere on the Internet. As
Gopher connects to computers to comply with your menu selection, you don't need to be preoccupied with the
behind-the-scenes work of connecting to and disconnecting from these various computers. Gopher does this
for you without your even needing to be aware of it. This automatic connecting makes Gopher popular and
useful.

WAIS (Wide Area Information Servers)

WAIS (Wide Area Information Servers) is an Internet system in which specialized subject databases
are created at multiple server locations, kept track of by a directory of servers at one location, and made
accessible for searching by users with WAIS client programs. The user of WAIS is provided with or obtains a
list of distributed database s. The user enters a search argument for a selected database and the client then

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 20
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
accesses all the servers on which the database is distributed. The results provide a description of each text that
meets the search requirements. The user can then retrieve the full text.

WAIS (pronounced "ways") uses its own Internet protocol , an extension of the Z39.50 standard (Information
Retrieval Service Definition and Protocol Specification for Library Applications) of the National Information
Standards Organization. Web users can use WAIS by either downloading a WAIS client and a "gateway" to
the Web browser or by using Telnet to connect to a public WAIS client.

Because of the abundance of content and search engines now available on the Web, few if any WAIS servers
remain in operation.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 21
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

UNIT – II
Searching the Web – Web Index – Web Search Engine – Web Meta – Searcher – Search Functions –
Search Engines – Meta Search Sites – Directories and Indexes – Specialized Directories – Electronic Mail (E-
Mail) – E-Mail Message – Customizing E-Mail Programs – Managing Mails – Zen of ‘E-mailing’– Address
Book – Signature Feature – File Attachment Facility – Setting priority – Advantages and Disadvantages of E-
Mail.

SEARCHING THE WEB

With the advent of World Wide Web came the widespread availability of online information. It is no
longer necessary to travel to the library to fine the answer to question or engage a research on a specialized
topic. Much of what you might want to know is available through the web. Since anyone can publish on the
web, the range of topics that can be found is nearly all encompassing. However, while a lot of information is
available online, not all it is accurate.
Today there is quite a collection of search tools available that allow us to find information on the web
quickly and easily. The collection of search tools is constantly evolving, with new ones coming on the screen
and others disappearing. Rather than report on how each of the popular search tool works, we will explain a
few of them and suggested some web presentation that provide review of all of the current search tools
available.

Web Index

Web indexing (or "Internet indexing") includes back-of-book-style indexes to individual websites or
an intranet, and the creation of keyword metadata to provide a more useful vocabulary for Internet or onsite
search engines. With the increase in the number of periodicals that have articles online, web indexing is also
becoming important for periodical websites.

Back-of-the-book-style web indexes may be called "web site A-Z indexes." The implication with "A-Z" is that
there is an alphabetical browse view or interface. This interface differs from that of a browse through layers of
hierarchical categories (also known as a taxonomy) which are not necessarily alphabetical, but are also found
on some web sites.

Web site A-Z indexes have several advantages over Search Engines - Language is full of homographs and
synonyms and not all the references found will be relevant. For example, a computer-produced index of the
9/11 report showed many references for George Bush, but did not distinguish between GB senior and George
W. In an environmental text, the phrase "lead users" will refer, not only to users of the metallic element, but
also to early adopters of technology. Some hits will be time-wasting references, such as looking up “teaching
children” and finding only the statement saying "... the above is not relevant when teaching children". Possibly
more concerning, Search Engines may miss information – looking up the Dardanelles and missing references
to the Hellespont or Çanakkale Boğazı, or seeking information about population and missing
discussions about the number of people living in the area. A human-produced index has someone check each
and every part of the text to find everything relevant to the search term, while a Search Engine leaves the
responsibility for finding the information with the enquirer.

Although an A-Z index could be used to index multiple sites, rather than the multiple pages of a single site,
this is unusual.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 22
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Metadata web indexing involves assigning keywords or phrases to web pages or web sites within a meta-tag
field, so that the web page or web site can be retrieved with a search engine that is customized to search the
keywords field. This may or may not involve using keywords restricted to a controlled vocabulary list.

DIRECTORIES, SEARCH ENGINES AND METASEARCH ENGINES

Two basic approaches have evolved in response to the need to organize and locate information on the
World Wide Web: Directories and search engines. In both approaches, information about web pages is
contained in some database that has already been created, either manually or using special programmes that
search the web for pages. Your request for the information is answered by the search tool retrieving the
information from its already constructed database of indexed web pages.
Various factors will determine how well a search tool will work for you: how large its database of
information is, how up-to-date the database is, web pages with current information, whether the web pages
that are cataloged are quality and non redundant, how well the search tool organizes and catalogs the
information to be accessed in the database, and finally how proficient you are at using the tool.

DIRECTORIES
The first method of finding and organizing web information is the directory approach. A directory
offers a hierarchical representation of hyperlinks to web pages and presentations broken down into topics and
sub topics. The hierarchy can descent many levels. The specific number of level is determined by taxonomy of
topics. Human editors usually review and classify the web pages and presentations that are added to the
directory.
Directories can be classified as either general or specialized. A general directory is also called as web
directory, a subject directory, or sometimes a web guide. At the top level of general directory provides a wide
range of vary broad topics such as arts, automobile, education, news, science, sports and so on. In addition to
be very easy to use, another benefit of a directory structure is that you need not know exactly what you are
looking for in order to fine something worthwhile.

SPECIALIZED DIRECTORIES
A specialized directory is usually organized by an expert in a particular field, end if affors a narrow
selection as topics that have more specialized directories are called gateway rogs. These specialized directories
deal with a variety as topics, including law, medicine, news, shopping, so on. If u decides that a specialized
subject guide is what you want to find a subject guide relating to that topic money directories or subject exist.

These are called clearing gateways. In both general a specialized of directories each topic is a
hyperlink that leads to more specific subtopics they in there have a specific web page or web presentations. If
u has a general question a general web directory with probably supply the answer quickly. However if the
information that u are after is at bit obscure or very specific, a specialized subject guide may be necessary for
10 cate the information efficiently in quickly.

Popular general directories:

Loonsmart - www.loonsmart.com
Lycos - www.lycos.com
Yahoo - www.yahoo.com

SEARCH ENGINES.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 23
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
The second approach to organizing information and locating information on the web is a search
engine, which is a computer programmed that does the following
1. Allows you to submit a form containing query that consists of word, phrase describing the specific
information you are trying to locate on the web
2. Searches its database to try to match your query
3. Collates and returns a list of clickable URLs containing presentations that match your query; the list is
usually ordered, with better matches appearing at the top
4. Permits you to revise and resubmit the query

A number of search engines also provide URLs for related and suggested topics.
Like directories, search engines can be classified as either general of specialty search engines. A general
search engine retrieves information from a database that contains information on wide variety of topics. A
specialty search engine is also called as vertical search engine or a topic search engine, and its database
contains information a specific topic. Because its focus is narrow, a specialty search engine can usually
provide in-depth information on specific topics that may be more valuable for a particular application.

Many people find that search engines are not as easy to use as directories. To use a search engine, you
supply a query by entering information in to a field on the screen. To be effective – that is, to have search
engine return a small list of URLs on your topic of interest- you often need to be very specific. To pose such
queries, you must learn the query syntax of search engines with which you are working. Once you learn to use
a specific search engine's query language effectively, you can quickly zoom in on very narrow topics.

POPULAR SEARCH ENGINES

AltaVista - www.altavista.com
AskJeeves - www.ask.com
Excite - www.excite.com
FAST search - www.alltheweb.com
Google - www.google.com
NorthernLight - www.northernlight.com

SPECIALTY SEARCH ENGINES

It exists for multitude of topics, including MP3s, shopping, news, travel, and medical information.
Many web presentations exist that provide search tool to find specialty search engines. In addition to finding
information on a narrow topic, specialty search engines are another way that we have to tap the invisible web.
Moreover.com is a specialty search engine for news, it searches 1800 online news source for up-to-date news
items and stories. This search engine can categorize and retrieve contents by using XML (Extensible Markup
Language) database technology. Because it is not trying to catalogue the entire web, Moreover.com can visit
its source as often as every 15 Minutes. This allow it to maintain venues, database, that is relevant and current

POPULAR SPECIALTY SEARCH ENGINES

Moreover - www.moreover.com
MP3 search - www.mp3search.nu

Mysimon - www.mysimon.com

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 24
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Travelocity.com- www.travelocity.com

METASEARCH ENGINES
A Meta search engine or all-in-one search engine performs a search by calling on more than one other
search engine to do the actual work. A Meta search engine does not maintain its own database on information;
by submitting searches to other search engines, it queries the data bases of other search engines. The particular
set of search engine that each Meta search engine will send a query varies. For instance as of this writing the
Meta search engine Dogpile submits its search queries to LookSmart, GoTo, FindWhat, Open Dictionary
and Google. As of the writing, metasearch engines MetaCrawler submits its search queries to AltaVista,
DirectHit, Exite, FindWhat and Google.
Many Metasearch engines will collate the search results into one list, remove duplicates and then rank
the pages according to how well they match your query. The advantages of a metasearch engines is that you
can access a number of different search engines with a single query. The disadvantage is that you will often a
high noise to signal ratio; that is, a lot of the "Matches" will not be of interest to you. This means you will
need to spend more time evaluating the results and decide which hyperlinks to follow.

POPULAR METASEARCH ENGINES

DogPile - www.dogpile.com
InFind - www.infind.com
Mamma - www.mamma.com
MetaCrawler - www.metacrawler.com
Metasearch - www.metasearch.com

ELECTRONIC MAIL
Internet, computer-based global information system. The Internet is composed of many interconnected
computer networks. Each network may link tens, hundreds, or even thousands of computers, enabling them to
share information with one another and to share computational resources such as powerful supercomputers
and databases of information. The Internet has made it possible for people all over the world to communicate
with one another effectively and inexpensively. Unlike traditional broadcasting media, such as radio and
television, the Internet does not have a centralized distribution system. Instead, an individual who has Internet
access can communicate directly with anyone else on the Internet, make information available to others, find
information provided by others, or sell products with a minimum overhead cost.

The Internet has brought new opportunities to government, business, and education. Governments use
the Internet for internal communication, distribution of information, and automated tax processing. In addition
to offering goods and services online to customers, businesses use the Internet to interact with other
businesses. Many individuals use the Internet for communicating through electronic mail (e-mail), for news
and research information, shopping, paying bills, and online banking. Educational institutions use the Internet
for research and to deliver courses and course material to students.

Use of the Internet has grown tremendously since its inception. The Internet’s success arises from its
flexibility. Instead of restricting component networks to a particular manufacturer or particular type, Internet
technology allows interconnection of any kind of computer network. No network is too large or too small, too
fast or too slow to be interconnected. Thus, the Internet includes inexpensive networks that can only connect a
few computers within a single room as well as expensive networks that can span a continent and connect
thousands of computers. See Local Area Network.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 25
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

HISTORY
Before the Internet was created, the U.S. military had developed and deployed communications
networks, including a network known as ARPANET. Uses of the networks were restricted to military
personnel and the researchers who developed the technology. Many people regard the ARPANET as the
precursor of the Internet. From the 1970s until the late 1980s the Internet was a U.S. government-funded
communication and research tool restricted almost exclusively to academic and military uses. It was
administered by the National Science Foundation (NSF). At universities, only a handful of researchers
working on Internet research had access. In the 1980s the NSF developed an “acceptable use policy” that
relaxed restrictions and allowed faculty at universities to use the Internet for research and scholarly activities.
However, the NSF policy prohibited all commercial uses of the Internet. Under this policy advertising did not
appear on the Internet, and people could not charge for access to Internet content or sell products or services
on the Internet

Electronic mail, most commonly abbreviated email and e-mail, is a method of exchanging digital
messages. E-mail systems are based on a store-and-forward model in which e-mail computer server
systems accept, forward, deliver and store messages on behalf of users, who only need to connect to the e-mail
infrastructure, typically an e-mail server, with a network-enabled device for the duration of message
submission or retrieval. Originally, e-mail was always transmitted directly from one user's device to another's;
nowadays this is rarely the case.

MANAGING-MAILS
Here we share a few tips that may be helpful to you. Clearly, you will develop your own e-mail style,
but you should not just let it evolve without thought it is worth spending sometime evaluating how you use e-
mail and how effective your responses are.

Action options
At this point, you have a number of options for dealing with the message. A few are listed here.

1. You might decide, based on the subject line and the address or the sender, that you want to delete the
message without reading for this is one way to deal with junk e-mail is one reason to make sure that
your subject line make sense when sending mail.
2. You may decide that you do not have time to read the message right now or that you will get back to it
later, In this case, you could simply skip over it or save it to a file.
3. You may decide to need the current message now. After reading the message, you have the options
such as deleting the message, replying to it, forwarding the message to someone else, saving the
message in a file, or saving the message in the mail box.

In addition to a mail box where just arrived messages appear, you will automatically have an out mail box
which copies your outgoing messages and thus can be saved and usually a deleted message or trash mailbox
where discarded messages are held until they are completed.

SENDING MAIL:
It involves: (I) Filling out the header.
(II) Typing the body of message.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 26
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
To compose an e-mail message, click on “compose new message” button on the toolbox. You will get
an empty mail form which will have the following parts.

TO
CC
SUB
BODY

SENDING COPIES OF MESSAGE:

Some mail programs allows the facility to sent blind copies, if this feature is available the other
recipients of the mail will not know that you have sent a blind copy to another person. Almost all e-mail
programs have the following features, address book, signature features & attachment facilities.
Regular copies: It is the copy that all recipients know to whom the copies are sent.

SMTP (SIMPLE MAIL PROTOCOL):

The delivery of the mail is standardized by a system called SMTP.
Sending and receiving mail is done by a program called “transport agent”. Whenever a message arrives the
transport agent saves it in a file called mailbox. Each person who has an account on the most computers is
given his own mailbox file

-Accessing the mailbox depends on the type of account the users have.

Mail Client Mail Server

Request Data Accepts & Deliver

Sends Data Accepts and sends it

MAIL HEADERS
All messages have two points.
1. Header
2. Body

The header contain the information such as who sent the message, to whom the message sent and the time of
the message...Etc.,

-To- Enter the e-mail address of the person(s) to whom the message is sent.

-Cc- Enter the e-mail address of the person(s) to whom the copy of the message is sent.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 27
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
-Bcc- Blind copy, enter the e-mail address of the persons(s) to whom the copy of the message is sent without
the other recipient knowing that the same copy has been send to them.

-Subject- Enter a brief description as to what the message is about.

-Body- Enter the actual message here.

SIGNATURE:
It is a group of lines that appended at the end of every message sent. You can configure your system in
such a way that all the outgoing message will have your signature at the end of the message.

MAIL ADDRESS:
E-mail allows information to be sent between computer and people in the internet. Just as a written
letter can be sent to multiple recipients, an electronic mail message can be sent to one or more e-mail address
an e-mail address identifies a person and the computer for purpose of exchanging electronic mail message.

username@host.subdomain_second_level_domain.first_level_domain.

An e-mail address is read from left to right.

SENDING MAIL:
It involves (I) Filling out the header.
(II) Typing the body of message.

To compose an e-mail message, click on “compose new message” button on the toolbox. You will get
an empty mail form which will have the following parts.

TO
CC
SUB
BODY

All mail programs have a new message or compose email command, often located on a message menu, and
they usually have a keyboard shortcut for the command as well, such as Ctrl+N for new message. When you
start a new message, your program will open a new window.

SENDING COPIES OF MESSAGE:

Some mail programs allows the facility to sent blind copies, if this feature is available the other
recipients of the mail will not know that you have sent a blind copy to another person. Almost all e-mail
programs have the following features, address book, signature features & attachment facilities.

Regular copies: It is the copy that all recipients know to whom the copies are sent.

ADDRESS BOOK
An address book is a place where you can store information about the people with whom you
correspond. The advantage of having a person’s detail in the address book is that you don’t have to key in
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 28
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
those details each and every time you send a message. You just have to select the person’s name, & the email
ID will automatically get inserted. You can also add a new address and create a group.

READING THE MAIL

1. To read a mail, mail client program is used.
2. This client contacts the mail server on the internet host to check the mailbox for new mail.
3. If there is a new mail, server will send it to the client, which will be stored in the local mailbox of your
computer.
4. If the messages are no more needed, the client asks the server to delete the message.
5. The client will then display the summary of the message in your local mailbox regarding the subject of
the message, the time & date it was sent & the name of the person who sent it.
6. To read a mail, double click on it with the mouse.

REPLYING TO MESSAGE
You can reply to the author by pressing a button. You need not type in the address or subject because
the programs are intelligent enough to automatically put the electronic address of the person whose mail you
are replying to, prefix the subject with ”Re” to indicate that it is a reply. The program will also include the
original mail (if you sent that option) as part of the reply, which is a great help in identifying the mail,
especially when a person receives hundreds of mails a day.

There are two options for replying to a mail:-

“Reply to author” & “Reply to all”. The difference between the two is that, in the first case, the reply
of the mail will be sent only to the person who had sent the mail to you. In the second case, your reply will be
sent to all persons to whom the copy of the original mail was sent.

FORWARDING AND BOUNCING

Forwarding means sending someone a copy along with your own comment. the difference between
replying and forwarding is that you reply to the person who had sent you a mail whereas you can forward a
mail to anybody you like.

The forwarded message will be prefixed with”Fw”.

Bouncing mails means copy without editing it in anyway.

DELETING THE MAIL

If you have read a piece or mail and you are positive that you don’t need to save it, you should delete it.
So it does not waste precious hard disk storage space.

EMAIL ATTACHMENT

An e-mail attachment (or email attachment) is a computer file which is sent along with an e-mail
message. The file is not a separate message, but now it is almost universally sent as part of the message to
which it is attached. Attached messages may be sent in unencoded form, or encoded in a number of ways:
base64, binhex, uuencoding, quoted-printable. In MIME, the standard Internet e-mail format,
messages and their attachments are sent as a single multipart message, usually using base64 encoding for

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 29
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
non-text attachments.

Worms and viruses are often distributed as attachments to e-mail messages. With vulnerable e-mail
programs the virus may be activated by viewing or previewing the message; more robust programs only allow
infection if the user opens the attachment for execution. Unexpected e-mail with attachments should always be
considered suspicious and dangerous, particularly if not known to be sent by a trusted source.

Some mail services and software filter out potentially dangerous attachments such as executables and
scripts, although more expert users may find this limitation a nuisance. Viruses in attachments to or the body
of e-mail may be scanned for and dealt with by anti-virus software running on the host computer, mailclient
software, and mail and Internet service providers, although non-detection of a virus does not guarantee a
message to be safe.

Mail services have a limit on the size of messages which may be sent and received; this limit may
restrict the size of files to be attached. Messages of excessive size will usually be returned to the sender as
undeliverable. This usually happens to attachments with a total size of over 2 MB. With many popular web
based e-mail systems limiting total attachment size to 10 MB

As size of exchanged documents increase, the current limitation on email attachments prompted the
industry to create solutions to deliver large email attachments. A first alternative was to set dedicated ftp
servers so as to overcome this size limitation. The problem was that few corporate firewalls allow the ftp
protocol, thus limiting the impact of such solutions. Hence following solutions relied on the HTTP protocol to
be more firewall friendly and to provide a more accessible interface from the Internet.

E-MAIL: ADVANTAGES AND DISADVANTAGES

Today, many people all over the world have been exposed to email-they have either heard of it ,used it
occasionally, or felt they could not function without it e-mail began as a system in which an individual user
could send a plain-text message via the internet to anther user e-mail has grown in ways that no one predicted.
In contrast to the simplicity of email functions a short while ago, people can now receive and send e-mail to;

 Nearly any country in the world 


 One of millions of computer users 

 many users at once 

 computer programs 

ADVANTAGES:
1. COVEYENCE: There are no trips to the post office and no need to search for stationary and stamps.
Sending a memo or short note is easy. A message can be informal or formal. E-mail makes publishing and
discussing very easy, for example, in the forms of mailing lists and new groups

2. SPEED: E-mail is fast, based on the speed of the underlying communication network

3. INEXPENSIVE: Once you are on line, the cost of sending a message is small.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 30
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
4. PRINTABLE: A hard copy is easy to obtain. However, since a great deal of correspondence does not need
to be printed, using email saves on natural resources. You can keep an electronic copy of the message for your
own record.

5. RELIANCE: Although messages are occasionally lost, this is rare. Many mail systems will notify the
sender if an email message was undeliverable

6. GLOBAL: Increasingly, people and business all over the world are using mail

7. GENERALITY: Email is not limited to text; it allows the transfer of graphics, programes, and even sounds

DISADVANTAGES:
1. MISDIRECTION: With email, you are your own worst enemy. It is far more likely that you will
accidentally send email to an unintended recipient than it is for someone actually to intercept your email

2. INTERCEPTION: It is possible, although unlikely, that eavesdropper is "listening in" on email

correspondence. As a rule of thumb, never send a email message that you would not want the whole world to
see. It is simple for someone to pass on your message, called email forwarding, to another party

3. FORGERY: Email does not preclude forgeries, that is, someone impersonating the sender, since the sender
is usually not authenticated in any way.

4. OVERLOAD: Email can also be too convenient and result in a flood of mail

5. JUNK: Another more recent negative development involves "junk email" or unsolicited commercial email.
This flooding of undesirable or inappropriate email is sometimes referred to as spam2 and is becoming a
serious problem. Some online services provide help in dealing with the unwanted email, and there are websites
that suggest strategies for coping the spam.

6. NO RESPONSE: A mild frustration sometimes associated with using email is dealing with recipients who
do not read and respond to their emails on a regular basis. However, this occurs using regular postal mail as
well. There are programs that can be used on some systems to check when a person last received the email
message.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 31
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
UNIT – III
Introduction to HTML – HTML Code for a Web Page – Web Page Basics – Set up a Web Page –
Display a Web Page in a Web Browser – Start a New Paragraph – Start a New Line – Insert Blank Spaces –
Heading – Pre-format Text – Comment – Special Characters – Format Text – Emphasize – Superscript and
Subscript – Font Style and Size – Color – Margins – Mono Spaced Font – Block Quote – Lists – Ordered List
– Unordered List – Nested List – Definition List – Images – Add an Image – Background Image – Border –
Wrap Text Around an Image – Aligning the Image – Horizontal Rule – Use Images in List – Convert an
Image to GIF or JPEG.

HTML Introduction

What is HTML?

HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

HTML tags are keywords 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
Start and end tags are also called opening tags and closing tags

HTML Documents = Web Pages

HTML documents describe web pages

HTML documents contain HTML tags and plain text
HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) 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>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 32
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Example Explained

The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph

HTML - Getting Started

What You Need

You don't need any tools to learn HTML at W3Schools.

 You don't need any HTML editor 

 You don't need a web server 
 You don't need a web site 

Editing HTML

In this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe this is the best way to learn
HTML. However, professional web developers often prefer HTML editors like FrontPage or Dream weaver,
instead of writing plain text.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We use .htm in our
examples. It is a habit from the past, when the software only allowed three letters in file extensions. With new
software it is perfectly safe to use .html.

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 href="default.htm" > This is a link </a>
<br />

* The start tag is often called the opening tag. The end tag is often called the closing tag.

HTML Element Syntax

An HTML element starts with a start tag / opening
tag An HTML element ends with an end tag / closing
tag
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 33
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
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
HTML elements can have attributes
Attributes provide additional information about the 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 provided as an attribute:
Example
<a href="http://www.w3schools.com">This is a link</a>

HTML Attributes Reference

A full list of legal attributes for each HTML element is listed in our:

Below is a list of some attributes that are standard for most HTML elements:

Attribute Value Description

class class_rule or style_rule The class of the element
id id_name A unique id for the element
style style_definition An inline style definition
title tooltip_text A text to display in a tool tip

For more information about standard attributes:

HTML Codes for web page

When you begin designing your HTML web pages, you may find that many HTML courses fall short
when it comes to providing you with special effect HTML codes and tips. However, there are many special
effect HTML codes that will enable you to enhance your visitors experience tremendously. When trying to
decide what HTML codes to use within your web pages, keep in mind, if it doesn't enhance your web page, it's
probably best to leave it out, as the more special effects you add to your page, the longer your page will take to
load.

In addition, prior to using any of these HTML codes and tips within your web pages, you must ensure
that the effect you're trying to achieve doesn't irritate your visitors.
For example, using HTML codes that load web pages within web pages may crash your visitor’s browser. In
addition, using excessive popup windows, frames and placing scrolling text within the status bar can be very
irritating and cause your visitors to leave your web site and never return.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 34
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Please ensure you select your special HTML codes very carefully and use them to your fullest advantage.
When you begin designing your web site, try to keep your main HTML page as small as possible. For
example, instead of trying to cram all your information into a single web page, consider creating sections for
your content. These sections can contain highlights of your content with a link to further information. You can
set up your content sections in HTML tables with colored heading sections for information, such as articles,
products or whatever you'd like.
To keep your main HTML page smaller, it is much better to keep it down to the most essential
elements. You can then use links to additional pages to provide the detailed information. A good rule of thumb
is Less is More.
To enhance your web page, you can format your text using bold headlines, colored HTML table cells,
and graphic bullets and/or arrows.
If you use the same graphic bullets and arrows throughout your page, you can enhance your page's appearance,
but you won't add any additional time to your web page load time. When you reuse an image, your image only
has to load once. When the image has loaded, it will instantly be displayed in all of the other locations.

If you're looking for some HTML codes and tips to spice up your web site, you've come to the right
place. You will find a variety of HTML codes and tips below. Simply click on the links and copy and paste the
codes into your web page according to the instructions.

Web Page Basics

Note: Since we are not web site developers or experts, we cannot help with the actual creation of your web
pages. However, because so many of our clients ask for advice on this subject, and because it can be so
difficult to find answers to some of these questions, we have put together this section of Website Tips. Please
understand that these are meant as suggestions only, not "rules". It is up to you to decide which, if any, of
them should be applied to your website, and how. We hope that you find some of the suggestions given here
helpful to your online endeavor.

HTML and Your Browser

Do you know why you must use a web "browser" to surf the net? Most people do not. They only know
that in order to go online they must use a browser. For most people that is enough. They don't want, or need to
know more than that. If you are going to have a web site however, you will need to know a little bit more.

A web browser is a program. A program that reads HTML (hyper text markup language). Just like
Notepad is a program that reads text (.txt) files, and Microsoft Paint is a program that reads bitmap(.bmp)
files. The internet is made up of websites which in turn are made up of web pages written in HTML. In order
to view these pages as they are meant to be seen you need a program that can read HTML and translate it
properly. The program you need is a web browser.

Try this: From within your browser while viewing a web page, place your cursor on the page and right
click. You will get a sub-menu of options. The exact wording depends on the browser you are using, but select
an option to "View Source" or something similar. You will get a screen of print that makes very little, if any,
sense if you try to read it. This is HTML. This is what the internet would look like to you if you did not have a
program called a browser to view it with.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 35
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
HTML Web Pages
In very basic, very layman terms, you can think of the HTML code on a web page as little more than a
list of commands surrounding whatever text will be on the web page. It tells your browser program
what goes where, which directories, or folders, to go to get all of the different components needed to
create and display the web page, and in what order, color, size, etc. to display them. Luckily for the
majority of us, there is no longer a need to learn HTML in order to create a web page. You only need
to have a basic understanding of what HTML is, and know that your web pages will be HTML pages.
All of the text, images, or sound files that you want to put on a page will be embedded into an HTML
page.

Homepage

When you type in the URL for a website, you rarely enter a specific page of the site. For example, you
might enter www.turbocheck.com or www.yahoo.com. This is all that is required. Your browser will
automatically locate and load the homepage or first page of the website for you. The question is, how
the heck does your browser know which page is the homepage? Good question!! It is because when a
URL is entered by the domain name only, as the examples above are, without a specific page
designated, a browser will, by default, load any page named index.html (or index.htm) If you do not
have an index.html page, a browser will display a File Not Found error. For this reason, it is important
to remember to name the page you want visitors to see first on your website index.html (or index.htm).

Hyperlinks

A hyperlink is a bit of code that, when activated, (usually by clicking on a line of text or an image) will
take your browser to another URL. The only way your viewer is going to be able to get from one web
page to another is if you provide hyperlinks. If you have only one page, then it won't be a problem. If
you have several pages, you may want to create a Table of Contents page that lists all of your pages
and provides hyperlinks to each one.

Set up a Web page

If you're ready and eager to join the digital era by building your own web site, but feel a little confused
and overwhelmed as to how to go about it, you're not alone. Fortunately, help is on the way. This article
describes the basic steps involved in setting up a simple web site.

The Internet has never been bigger than it is now. The number of websites online is growing every day.
Nowadays, it is becoming more and more common for average people to set up their own website or blog.
Many people are setting up family websites or small informational websites, while others are looking to set up
large e-commerce websites in order to turn a profit. No matter what kind of website you wish to set up, the
basic steps to accomplish that goal are pretty much the same. Yes, it is a lot more difficult to set up a huge site
like Yahoo than it is to set up a one-page family website, but the basic steps are the same.

The basic steps which are essential to getting your site online. For the most part, this tutorial is for
beginners who have never set up a website, but more experienced website developers may also learn a thing or
two by reading this article. Keep in mind that I am writing this article based upon my own experiences with
setting up a website, so there may be other ways to set up a website than the ones I describe here.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 36
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Obviously, the first step to setting up a website is deciding exactly what you want your website to be
about. This may seem like an easy step, but it needs to be given some thought. Do you want to set up a family
website, an e-commerce site, informational site, or some other kind of website? If you wish to set up a website
strictly for ad revenue, choosing a specific niche for your website topic such as fly fishing, a minor league
baseball team, or 80s music; get as specific as possible.

Do not try to make a website like Yahoo or MSN, both of which have a wide range of topics covered
on their sites. It will be almost impossible to get traffic to your site, through the search engines, if you make a
website such as those; that market is already full. It is much easier if you choose a niche, and write as much
content as possible on that niche. If you choose a niche website, you will have a much better chance to get a
lot of free search engine traffic, and in turn, make money with Google AdSense or any other kind of ads or
products you wish to offer on your site.

1. Create/Register a Domain Name

Once you've decided upon a website topic, you need to select a domain name for your website. A
domain name is the .com, .net, .info, etc. name, which is used to identify your website online. It's important to
choose a good domain name for your website, because it can play a part in getting search engine traffic to
your site in the future.

Some experts believe that a relevant domain name can play a bigger part in search position than meta
tags (hidden relevancy tags on a website) do. So try to select a name which describes your website well, and
try to keep it as short as possible so that people can remember it easily. There are entire articles on selecting
domain names on this website, so feel free to explore those articles for more detailed tips on selecting a good
name.

There are a variety of different companies with which you can select and register your domain name.
These companies are known as domain name registrars. Go to a search engine and type in "domain
registration," and see how many results come up. I registered my domain through GoDaddy.com, because they
make it easy and offer some other nice tools for building websites. There are many other companies for which
you can register a domain, so feel free to shop around. In fact, it may be a good idea to shop around, as you'll
probably notice huge variations in price. Registering a domain name should not be tremendously expensive.

One quicker tip on domain names. Try to select a .com name rather than a .net, .info, .org, etc. The
reason for this is that .com is the most popular, and therefore that is what people will probably use when
searching for your site. For instance, if your site name is google.net, and someone heard about your site and
went to visit it, they would probably type in google.com first. They would go to the other website and not
yours. This is not a real example, but hopefully you get the picture. (In one notorious case, someone running
an adult website once registered whitehouse.com, relying on the traffic they would receive from everyone
trying to reach whitehouse.gov but typing in .com out of habit).

2. Design the Website

Once you have the concept for the website and have registered a domain name for it, it is time to
actually design the website itself. This can be accomplished a few different ways, and it will vary with each
person's own web design experience. Experienced web designers would probably use a web design program
such as CoffeeCup or Dreamweaver to design their site. If you have very little, or no web design experience,
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 37
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
you may want to choose an easier route. Because didn't have a lot of experience with web design when first
created a website, chose the easier route.

The easy way to design a website is to use a pre-designed web template. You can find nice website
templates all over the Internet; some are even free to use. In most cases, these website templates allow you to
create a website with little or no HTML knowledge. Did not have a lot of money when was setting up my
website, so chose to use Website Tonight to create my website for free. Website tonight is a website template
site which makes building a website as easy as using Microsoft Word. Received free Website Tonight credits
when registered my domain name with GoDaddy.com. These freebies really come in handy, and they can save
you lot money. When searching for a domain name registering company, keep an eye out for these kinds of
freebies.

So, it took me about a day or two to design my website and fill it with some good content. My website
is designed to sell health books, and it has done a good job at that for about a year now. You can see an
example of my site at www.promotehealth.info. My site is very basic, but it is still effective at its purpose,
which is to inform and to sell e-books. You don't need to spend hundreds of dollars designing a website in
order for it to be effective. My site is a simple 5-page website which works well. The only monetary
investment I've made is the $8 on the domain name registration.

3. Find a Web Host

Once your website is completely designed, you can then search for a web host to actually host your
website on the web. There are a variety of options when choosing a web host. The first thing you need to do is
determine what kind of host is best for your website. There are different hosts for e-commerce websites,
personal pages, or large websites with databases. It is important to choose the right host for your website. You
can read my articles about how to choose the right host for your website, for a detailed look at web hosting.

Because my website was going to be a small website with very little traffic, to use free web hosting
from GoDaddy.com. This hosting works perfectly for what I needed from my hosting company, because don't
have a lot of traffic to my site, and don't have a large website with a ton of graphics or videos. GoDaddy
uploaded the site to the Internet with just a click of the "publish" button. The disadvantage of having free web
hosting is the fact that the web hosting company will place ads on your site, as you can see from my website.
Make sure you do a lot of research on web hosting before you choose a hosting company, because it is a very
important step in the success of a website.

If you do choose to purchase web hosting, research the hosting company to make sure they are reliable.
You can check user reviews and comments from any independent web host review site to check out the
reliability of a host. Make sure they offer enough bandwidth, disk space, acceptable uptime (99.9% is now
standard), and customer support. Also make sure to ask them about their backup policies, so that you know
that your website will be safe even if their servers crash. If the host doesn't have an acceptable backup policy,
you should consider another hosting company.

4. Getting Traffic to Your Website

Once you have your website online, you need to get people to your website. There are a variety of
different ways of doing this. The first thing you should do is submit your website to the major search engines,

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 38
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
mainly Yahoo, Google, and MSN. You should also submit your site to DMOZ, which is a free, open directory.
Submitting your website to search engines and directories is free, and it's very important, but you will not get
instant traffic from them. It often takes months before your website gets listed in a search engine or directory.

Google AdWords to generate traffic to my website, but it can get a bit expensive. If you do use AdWords,
make sure to set your daily spending limit at a price which you can afford. AdWords can be an effective tool
for bringing in targeted traffic.

Another way to generate traffic is by link exchanges, or by placing links to your site in forums and
articles. Link exchanges work by placing another website's link on your website, and in turn they place a link
to your site on their website. This technique will not generate a ton of traffic, but it should bring in some
visitors to your site. Writing articles in forums and article directories is very time-consuming, but it can pay
off by getting your website link out into cyber space.

There are a variety of other ways to generate traffic to your website, but that is beyond the scope of this
article. If you explore our companion site, SEO Chat, you will find many articles devoted to exactly this topic.
Just wanted to lay down the ground work on how to create a simple website for beginners. Hopefully you have
gained some insight into how basic website development works.

Web browsers work and how are web pages displayed

So you've been surfing the web using your favourite browser? Maybe you spend a few minutes each
day or you may be "hooked" and it takes the force of ten elephants to take you away from your computer; I
know, the web is really an interesting place.

To load a web page you type in a URL or select a link from the favourites/bookmarks, hit the Enter key and
are taken to a web page. You are not concerned what goes on behind the scene. But have you ever wondered
how a web browser works and displays the web page on your computer? If yes, I assure you it's going to be an
interesting read.

Web browsers and web pages/sites - a brief history

A web browser, as you probably know, is a computer program that displays web pages and web sites.
If you didn't know that, suggest you read the article that provides a brief on web browsers - what is a web
browser? These programs, also called clients, come in different flavours and versions, like Internet Explorer
for Windows or Safari for Macs or Firefox which can run on several different operating systems. [There are
tons of browser available; check the web browsers list].

First, a little history. Web browsers are what made the web "happen". Before these programs came into
existence, the Internet was a pretty bland place, as some would say, with digital information (like text
documents, images, music files) scattered around with nothing to "link" them up. For example, if you wanted
the lyrics of The Doors, you would first hunt for a plain text document that had those lyrics and if you wanted
pictures of the famous 60s music group, you would have to indentify these by the file names (assuming that
the picture was named properly and correctly).

Web browsers tied up text and images (and other media, like animation) together. You could now
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 39
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
view a web page with text and images on your screen. And what was responsible for making this happen?

Enter HTML (HyperText Markup Language, for those who want to know what it stands for), which is
a simple "programming" language based on tags that provided instructions for creating web pages such as
where to place an image or which text to be made large or which one to be put in italics. Web browsers could
understand and interpret HTML and display the web page to the viewer.

Remember, the images and other media such as music files, animation are separate from the actual web
page HTML file and are only embedded on the page when it’s displayed by a browser.

How does a web browser work?

As you already know, to view a web site or a web page in a browser, you would either type in the URL
or click on a link (as one in your Favorites/Bookmarks) and hit the Go button. Now, the page you have asked
the browser to display would probably be located on a Server computer far far away. The web browser
program sends a request (Could I have the web page please?) to a web server program running on the remote
computer. Newbies may be baffled here due to similarity of names... the computer on which the web site is
stored is called a Server (uppercase) and it runs a program (confusingly) also called a server (all small case).
Purists try to differentiate the computer (hardware) and program (software) by having the first letter in capitals
(as in Server) but this is not a rule. Anyway, the server program, gathers the request from the web browser,
tries to hunt for the web page and then formulates a response. This response will differ depending on whether
the server program was able to find the requested web page or web file. Assuming, the server was able to
locate the web page, it sends the HTML file to the web browser. The browser picks up all the information
coming in from the server and does its best to display the web page. A typical web page not only has text but
also images and these are separate files that need to be transferred from the server to the browser. So the
browser-server communication goes on till all the files have been transferred to the browser. Once the files
arrive at your computer, the browser-server connection is severed - cut - chopped! If you now click on any
link on this web page or even refresh the page, the process starts all over again. FYI, this is called the client-
server architecture.

One important point remains - let us say you are looking at two different web pages of the same web
site (such as ebay auctions) from two computers simultaneously using the same internet connection. How does
the ebay server program know which page (and its associated images and other files) to send to which
computer? The answer to this seemingly complicated question lies in the request and response headers sent by
the browser and server, respectively. So each request and response has a header that contains details such as
the computer name (actually the I.P. address) so everything is in tune.

Finally, the information over the web is transferred using a set of rules called the HyperText Transfer
Protocol (HTTP). Read more about this if you want to get you hand at details.

Start a New Paragraph

HTML paragraphs are defined with the <p> tag.

Example

<p> This is a paragraph</p>

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 40
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
<p> This is another paragraph</p>

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>

The <br /> element is an empty HTML element. It has no end tag.

<br> or <br />

In XHTML, XML, and future versions of HTML, HTML elements with no end tag (closing tag) are not
allowed.

Even if <br> works in all browsers, writing <br /> instead is more future proof.

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

<h1> defines the largest heading. <h6> defines the smallest heading.

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

Heading Elements

<h1>Largest Heading</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

Note: Browsers automatically add an empty line before and after headings.

Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 41
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Search engines use your headings to index the structure and content of your web pages.

Since users may skim your pages by its headings, it is important to use headings to show the document
structure.

H1 headings should be used as main headings, followed by H2 headings, then less important H3 headings, and
so on.

Preformatted Text

The pre-formatted element (<pre> and </pre>) allows you to include pre-formatted text. Text
contained within the pre-formatted text element defaults to a fixed pitch font. Yours browser will preserve the
white space (line-breaks and horizontal spacing) of yours text within the <pre> and </pre> tags. This means
that your text can continue past the screen width because your browser will not automatically wrap the text.
Text is wrapped only when you include a line-break. Most browser will follow the HTML standard for block-
level elements and create a paragraph break before the <pre> start tag and after the </pre> closing tag.

Comment

A comment is a part of your HTML document that a browser does not display. You can think of a
comment as an invisible post-It note that is only revealed when someone looks at the HTML source code by
viewing the source. There are several reasons to include comments in your HTML code. One reason is to help
remind you what a tag does. Secondly, comments can help other people understand your HTML document.
you might also use comments as a way to put notes about your plans for a document. To create a comment,
start with the < -- character. Then whatever text you want to be in the comment. Then end the comment with
the -- > character. Here is a sample comment tag. < -- your character go here -- >.

Special Characters

HTML codes use special characters including the left bracket (<), right bracket (>), ampersand (&),
and quote (") to represent certain attributes (starting a tag, ending a tag, etc.). In order for you to be able to
visually present these characters, you need to use special referencing. Also, you may occasionally need to
use extended characters, which are characters not found on the keyboard, such as those used in foreign
languages (like the ñ used in many Spanish words).

Two formats can be used to do this--code number (character reference) and phonetic reference (entity
reference). Although the entity reference is commonly used for special characters, it is better to use
character reference with extended characters because not all browsers recognize entity references.

For a complete listing of codes, check out the University of Toronto's

Character Listing at:

http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/iso_table.html Entity Listing at:

http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/entities.html

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 42
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Commonly Used Special Characters

Symbol Character Codes Entity Codes

Less Than (<) &#60; &lt;

Greater Than (>) &#62; &gt;

Ampersand (&) &#38; &amp;

Quote (") &#34; &quote;

Copyright Symbol (©) &#169; &copy;

Registered Trademark &#174; &reg;

(®)
Emphasis Text

The emphasis element is a popular way to emphasise text. Any text marked between <EM> and
</EM> will be emphasized. The emphasis tag, <EM>, with its corresponding </EM> ending tag is used for
highlighting text.

Example: Meet me today. It is <EM> important </EM>.

Superscript

The superscript element (<SUP> and </SUP>) render the enclosed text in super-script (a bit higher
than regular text). This element is useful for mathematical formulas.

Example, here Einstin’s most famous formula equation.

E=MC<SUP>2</SUP>.

Subscript

The subscript element (<SUB> and </SUB>) render the enclosed text in subscript (a bit lower than
regular text). This element is also useful for mathematical formulas.

Example, this line of HTML code contains the chemical formula for water

We will need H <SUB>2</SUB>O.

Formatting Text
The FONT tag is another text formatting feature. It allows you to adjust the size and color of your text.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 43
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

The properties of a FONT tag are:

A number 1 to 7 for height and thickness. Using a + or a - before the number will adjust the size
SIZE
against the default.
COLOR A hex number set for color.

<html>
<head>
<title> Welcome to David's web page.
</title> </head>
<body>
<P>
<font color="#ff0000">
Hi there! Thanks for visiting my web page. There isn't much here right now, but come back soon and see
the changes! The text in this section is red.
</font>
</p>
<hr size="10" width="50%" noshade
align="right"> <b>This text is bold</b>
<br>
<font size="+3">
<i>This text is italisized and 3 font sizes larger than the normal sized
font.</i> </font>
<br>
<u>This text is underlined. This text is black and is a normal
size.</u> <br>
This text is back to
normal. <hr>
<p>
<b><i>This text is bold and
italisized.</i></b> <br>
<u><b>This text is underlined and
bold.</b></u> </p>
<p>
<font
color="#FF0000">
<font size="5">
This text is red and size
5. </font>
</font>
</p>
<p>
<font color="#ff0000"
size="5"> This text is red and

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 44
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
size 5.
</font>
</p>
</body>
</html>

Example In Action.

This text is bold

This text is italisized and 3 font sizes larger than the

normal sized font.
This text is underlined. This text is black and is a normal size.
This text is back to normal.

This text is bold and italisized.

This text is underlined and bold.

This text is red and size 5.

This text is red and size 5.

Normal text size is 3. The text color usually defaults to black unless there is a different color specified in the
BODY tag.

Instead of having two separate FONT tags affecting the same text, they can be combined into one.

From this :
<font color="#ff0000">
<font size="5">
This text is red and size 5.
</font>
</font>

To this :
<font color="#ff0000" size="5">
This text is red and size 5. </font>

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 45
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Both will work correctly, but the latter example is considered better coding.

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

These HTML tags are called formatting tags.

Text Formatting Tags

Char Format

<b> </b> Defines bold text.

<font> </font> Defines text font, size, and color.

<i> </i> Defines italic text.

<em> </em> Defines emphasized text.

<big> </big> Defines big text.

<strong> </strong> Defines strong text.

<small> Defines small text.

 Defines superscripted text.

 Defines subscripted text.

<u> </u> Defines underlined text.

Blockquote element
The blockquote element (<BLOCKQUOTE> and </ BLOCKQUOTE >) mark up quotes that take
more than a few lines (“blocks of quotation”). You use this tag when you are quoting one or more paragraphs
from another source. Navigator and IE indent the entire block of quoted text.
BLOCKQUOTE is used to create a paragraph type of area. There will be some space created to the sides of
the "block" of text contained within it's tags.

Example :
This is a regular paragraph type area. As you can see, the defaults of the text allow it to show across most of
the screen area. This is done without using the BLOCKQUOTE tag set. Since most people don't use this tag,
this is the defualt result. Now trying to use up a lot of word space to correctly demonstrate the example. <br>

<blockquote>
This is a paragraph of text done within a BLOCKQUOTE type area. As you can see, there is a buffer of space
on both the left and the right side of this section of text. If were to use another set of BLOCKQUOTE tags
around this paragraph, the space on both sides would increase. Again trying to use up a lot of word space to

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 46
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

correctly demonstrate this example.

</blockquote>

Outcome :
This is a regular paragraph type area. As you can see, the defaults of the text allow it to show across most
of the screen area. This is done without using the BLOCKQUOTE tag set. Since most people don't use
this tag, this is the defualt result. Now trying to use up a lot of word space to correctly demonstrate the
example.
This is a paragraph of text done within a BLOCKQUOTE type area. As you can see, there is a buffer of
space on both the left and the right side of this section of text. If were to use another set of
BLOCKQUOTE tags around this paragraph, the space on both sides would increase. Again trying to use
up a lot of word space to correctly demonstrate this example.

Monospaced Font
The typewriter text tag, <TT>, is used for placing text in a monospaced typewriter font. This can be
used to indicate that a certain phrase needs to be type in. For example, suppose you are writing a web page
describing how to list your files in DOS. You could do the following:
In DOS you enter <TT> DIR</TT> to obtain a directory listing of your files.

Lists
HTML supports ordered, unordered definition lists and nested list.

HTML Lists
This is the first
This is the second
This is the third
Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Here is how it looks in a browser:

Coffee
Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 47
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Here is how it looks in a browser:

1. Coffee
2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists

A definition list is not a list of single items. It is a list of items (terms), with a description of each item (term).

A definition list starts with a <dl> tag (definition list).

Each term starts with a <dt> tag (definition term).

Each description starts with a <dd> tag (definition description).

<dl>
<dt>Coffee</dt> <dd>Black
hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Here is how it looks in a browser:

Coffee
Black hot drink
Milk
White cold drink

Inside the <dd> tag you can put paragraphs, line breaks, images, links, other lists, etc.

Nested Lists

To be creative, you can create nested lists. These will create a list, inside another list. Each new list will be
indented from the one before. This will work for BOTH Unordered lists and Ordered lists.

<ul>
<li> apples
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 48
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi,
Coimbatore.
</li> <ul>
<li> green are good
</li> <li> red are better
</li> </ul> apples o green are good

<li> oranges </li>

<li> bananas </li> o red are
</ul> better oranges
bananas

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar,
Asst.Prof.of Commerce. 49
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Using a nested list makes it possible to create sub-catagories from a main list. Take note that a full set of list
tags are used to nest a list and the nested (sub) list tags are NOT overlapping the main list tags.

You don't have to indent the actual coding for the new list as the example shows. It is just easier to read and
keep track of it that way.

There can be a list, inside a list, inside a list, etc.. Anything beyond 3 nests gets confusing and usually makes
a web page look cluttered, so don't overdo it.

It is possible to net the different type of lists within one another, or to nest multiple lists of the same type. In
computer science, the word nest is used to indicate layer within layers. When nested list environments you
not let them overlap. Nested lists are useful when you would like to expand on one or more items.

List Tags
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a term (an item) in a definition list
<dd> Defines a description of a term in a definition list
<dir> Deprecated. Use <ul> instead
<menu> Deprecated. Use <ul> instead

Images

The internet is a visual medium. Without color and images to provide interest and excitement to your
pages, you would have nothing but rows of text. Boring! Chances are your visitors will lose interest very
quickly and move on. But you don't want to overdo the images either. If you keep your visitors waiting too
long for your page to load, well they may decide to go find something else to look at. Below you will find a
few tips on using images in your web pages.

Image Formats

There are many different image formats. Since most browsers can read only .jpg and .gif images, those
are the formats you will need to use. These are the best two formats for web use since they are the most
compressed, resulting in smaller file size, which results in shorter load time. Remember that the larger
a file is, the longer it will take a browser to load and view it.

File Size and Download Time

The larger a file is, the longer it will take a browser to load and view it. We recommend a maximum
individual image file size of approximately 35KB. Since .jpg and .gif image formats are compressed formats, a
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 50
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
35KB can be quite large and very clear if done properly. Remember that each file you embed in a page adds to
it's overall size. So, if you place two 20KB image files in one page, you will have 40KB of image files that
your viewer must load before viewing your page.

Images are the photographs, digital artwork, charts, etc, that you will use on your web site. But you'd make
a huge mistake placing an image directly from your digital camera onto your web site. Explain why, let give
you the super quick summary of the three image types found on the web:

GIF - An older image format great for legacy compatibility web sites (Say, if your whole base uses
Netscape Navigator 3 circa 1996-let's hope not!) Great for short, small animations, such as web
advertisements. A decent choice for line art.
JPEG - (Commonly labeled simply as JPG) this stands for Joint Photographic Experts Group, so, as
you guessed, is typically used with photographs, as well as complicated artwork and three-dimensional
renderings.
PNG - This format is now in widespread use across the web, and actually handles both simple artwork
-and- photographs fairly well. This is my first choice when saving things from Photoshop. Then try the
other two formats if disk space and bandwidth consumption (transfer usage) is a concern.

So, imagine you have a photograph from your digital camera. It's probably saved in JPG format. But the level
of clarity in that photograph is probably made for printing the picture, and holds too much detail for a web
site, resulting in lengthy Internet transfer times.

If you ever plan to print this picture, you will want to keep the original JPG in a safe place. Many people have
a folder on their hard drive for photograph originals, and back up that folder to an external hard disk, flash
drive, burned CD or DVD, or an online backup site. This is a very good idea.

But for the version on your web site, you need to re-save it for web usage. In Photoshop, this is often labeled,
cleverly, "Save for Web & Devices." You can also use other software to re-save your digital photographs.
You'd still want to use the original JPG files from the camera if you were planning to crop for printing, but
you should really optimize your photographs before placing them on your web site.

Please note that the optimized JPG photograph would be the approximately the same file size when resized
with the same pixel width and height whether taken on a 5 megapixel or 10 megapixel camera, although the 5
megapixel camera's originals would be smaller. The 10 megapixel camera would allow for more accurate
cropping and larger prints (Say, poster prints instead of 8x10s ).

HTML - Images

Images are a staple of any web designer, so it is very important that you understand how to use them properly.
Use the

<img /> tag to place an image on your web page.

HTML Code:
<img src="sunset.gif" />

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 51
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Image:

HTML - Image src

Above we have defined the src attribute. Src stands for source, the source of the image or more
appropriately, where the picture file is located. As with links described in a previous lesson, you may use any
standard URL to properly point the src attribute to a local or external source.

There are two ways to define the source of an image. First you may use a standard URL.
(src=http://www.Tizag.com/pics/htmlT/sunset.gif) As your second choice, you may copy or upload the file
onto your web server and access it locally using standard directory tree methods. (src="../sunset.gif") the
location of this picture file is in relation to your location of your .html file.

URL Types:
Local Src Location Description
src="sunset.gif" picture file resides in same directory as .html file
src="../sunset.gif" picture file resides in previous directory as .html file
src="../pics/sunset.gif" picture file resides in the pic directory in a previous directory as .html file

A URL cannot contain drive letters, since a src URL is a relational source interpretation based on the location
of your .html file and the location of the picture file. Therefore something like src="C:\\www\web\pics\" will
not work. Pictures must be uploaded along with your .html file to your web server.
Each method has its pros and cons, for instance using the URL of pictures on other sites poses a problem if the
web master(s) of the other site happen to change the physical location of the picture file. Copying the file
directly to your web server solves this problem; however, as you continue to upload picture files to your
system, you may eventually run short on hard drive space. Use your best judgement to meet your needs.

HTML - Alternative Attribute

The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the
image, or if a user has image files disabled. Text only browsers also depend on the alt attribute since they
cannot display pictures.

HTML Code:
<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />

HTML - Image Height and Width

To define the height and width of the image, rather than letting the browser compute the size, use the height
and width attributes.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 52
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

HTML Code:
<img src="sunset.gif" height="50" width="100">

Height and Width:

Above we have defined the src, height and width attributes. By informing the browser of the image
dimensions it knows to set aside a place for that image. Without defining an image's dimensions your site may
load poorly; text and other images will be moved around when the browser finally figures out how big the
picture is supposed to be and then makes room for the picture.

Vertically and Horizontally Align Images

Use the align and valign attributes to place images within your body, tables, or sections.

1. align (Horizontal)
o right
o left
o center
2. valign (Vertical)
o top
o bottom
o center

Below is an example of how to align an image to the right of a paragraph.

HTML Code:
<p>This is paragraph 1, yes it is...</p>

<p>

<img src="sunset.gif" align="right">

The image will appear along the...isn't it?

</p>

<p>This is the third paragraph that appears...</p>

Image Wrap Around:

This is paragraph 1, yes it is. This paragraph serves as a nice example to show how this image alignment
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 53
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
works.

The image will appear along the right hand side of the paragraph. As you can see this is very
nice for adding a little eye candy that relates to the specified paragraph. If we were talking
about beautiful tropical sunsets, this picture would be perfect. But we aren't talking about that,
so it's rather a waste, isn't it?

This is the third paragraph that appears below the paragraph with the image!

Images as Links

This will be a quick review of the links - image lesson. Images are very useful for links and can be created
with the HTML below.

HTML Code:
<a href="http://www.tizag.com/">

<img
src="sunset.gif"> </a>

Image Links:

Now your image will take you to our home page when you click it. Change it to your home page URL.

HTML GIF vs. JPEG

Gifs are best used for banners, clip art, and buttons. The main reason for this is that gifs can have a transparent
background which is priceless when it comes to web design. On the down side, gifs are usually larger files, not
as compressed as a jpeg, which calls for slow load times and large transfer rates. Gifs are also limited to the
256 color scheme.

Jpegs however, have an unlimited color wheel, and have a high compression rate downsizing your load times
and saving hard drive space. Jpegs don't allow for transparent backgrounds, but their size/quality ratio is
outstanding. It’s best to use Jpegs for photo galleries, or artwork to allow the viewer to catch that extra bit of
detail. Avoid Jpegs for graphical design, stick to using them for thumbnails and backgrounds.

Using a Background Image

How to add a background image to your page

Note: These effects can now all be achieved using Cascading Style Sheets.

To add a background image to your page, you will need to locate the <body> tag in your document. When you
have found it, you may see just the word body, or you may see a string of commands afterward. It may look
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 54
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
something like this:

<body bgcolor="#FFFFFF" text="#000000">

What we are going to do is add a command after the word body. So, go to the end of the word body, skip a
space, and type the following:

background=""

Now your body tag should look something like this (and may have more commands):

<body background="">

Now, we are going to place the url of the image inside the quotation marks. So, if the image we want to use is
at http://www.mysite.com/image1.gif, we would insert this into the command, like this:

<body background="http://www.mysite.com/image1.gif">

Your image should have the file extension .gif or .jpg. If not, you will want to covert it to one of these file
types. One program that will do this is Paint Shop Pro, which is available as shareware from JASC.

Now, if your image file is located in the same directory as your HTML file, you can just type the filename of
the image rather than the full url. So, if we want image2.gif to be the background image, and it is in the same
directory as the page we are editing, we can type the command this way:

<body background="image2.gif">
Now, as a real example, Use an image from my server as a background on a page. The name of the image is
"next.jpg". The URL for the image is http://www.pageresource.com/images/next.jpg. So, to use this as a
background, we would type in this:

<body background="http://www.pageresource.com/images/next.jpg">

Now, if you put an HTML file in my "images" directory, could use the image by typing in just the filename,
like this:

<body background="next.jpg">

Wrapping Text Next to Images

Including an image inside a line works fine if you have only one line of text. One aspect of inline images to
have sneakily avoided mentioning up to this point is that in HTML 2.0 all this works only with a single line of
text. If you have multiple lines of text and you include an image in the middle of it, all the text around the
image (except for the one line) will appear above and below that image.

Text does not wrap around images.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 55
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
What if you want to wrap multiple lines of text next to an image so you have text surrounding all sides? Using
HTML 2.0, you can't. You're restricted to just a single line of text on either side of the image, which limits the
kinds of designs you can do.

To get around this limitation in HTML 2.0, Netscape defined two new values for the ALIGN attribute of the
<IMG> tag-LEFT and RIGHT. These new values have been incorporated into HTML 3.2 and are supported now
by many browsers other than Netscape.

ALIGN=LEFT and ALIGN=RIGHT

The ALIGN=LEFT aligns an image to the left margin, and ALIGN=RIGHT aligns an image to the right margin. But
using these attributes also causes any text following the image to be displayed in the space to the right or left
of that image, depending on the margin alignment. Figure 7.9 shows an image with some text aligned next to
it.

Text and images aligned.

You can put any HTML text (paragraphs, lists, headings, other images) after an aligned image, and the
text will be wrapped into the space between the image and the margin (or you can also have images on both
margins and put the text between them). The browser fills in the space with text until the bottom of the image,
and then continues filling in the text beneath the image.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 56
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
UNIT – IV
Links - Link to another Web Page – Link within a Web Page – Link to an Image – Link to a File –
Email Link – Link to an FTP Site – Change Link Colors – Create Keyboard Shortcuts – Change the Tab Order
– Tables – Create a Table – Add a Border – Caption – Column Groups – Row Groups – Color – Background
Images – Aligning Data – Size of a Table – Size of a Cell – Span Cells – Cell Spacing and Cell Padding –
Borders – Text Wrapping – Nested Tables – Wrap Text around a Table.

Linking to a Section in the Current Document

As with links to other documents, the links to a section surround the "cue" for the reader. This location of the
cue is influenced by the content and organization of your document.

Code: <A HREF="#section_name">linking text</A>

EXAMPLE: <A HREF="#Intro">Introduction</A>

Linking to a Section in another Document

When linking to a section in another document you need to include the URL and the name of the section. To
avoid confusion, you may want to indicate that the user is going to a section within another document.

Code: <A HREF="URL#section_name">linking text</A>

EXAMPLE: <A HREF="http://www.uwec.edu/Info/UWECWeb/resources.html#copyright">Copyright</A>

Tips for Working with Target Links

Provide a link back to the top of the document or to the listing of links (you will need to assign a
section name to this area)
To make maintenance easier, assign meaningful names to your sections.
If links to other sites are intermingled with target links, you may want to alert the reader.
Use the comment code to create a summary section of your section names

Linking to Internet Resources

An HTML document can contain links to other HTML documents and Internet resources. The link has
three main components: the HTML code indicating a link (A HREF), the URL, and the text or image that
indicates that it is a link. Examples of links are included in this page.

Universal Resource Locator (URL)

This is the location of the document that the link will take the user to. You need to understand the three
basic parts of a URL to be able to create links. If the document is within the same directory as the master
document, the site address and path is not required. The filename must include the .html extension (must be
lowercase and include the four-character extension. We will begin with an example URL:

http://www.uwec.edu/tour/tour.html
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 57
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Internet Tool Type: http://
Host Name: www.uwec.edu/
Path and Filename: Tour/tour.html

Absolute URL: The complete location of a file that includes the Internet tool type and the host name (ex:
"http://www.uwec.edu/orientation/orientation.html"). Absolute URLs are used for links to documents created
by others.

Relative URL: The partial location of a file that only includes the path (if there is one) and filename (ex:
"Orientation/orientation.html"). Relative URLs are generally only used for files that you create.

For additional information about absolute and relative URLs, please review Naming Files and Understanding
URLs.

Referencing Your Link

How the links are referenced in your documents reflects on you, the Web developer. Using the phrase "click
here" should be avoided because some browsers do not have the ability to click and as new users learn about
the Web, they will learn very quickly how to access links. When using word links, the text for the link should
closely match the title and page heading of the document that is being linked to.

The following table includes examples of how links can be identified within your document. A brief
evaluation of the sample is also included.

Example Comments
Click here to see a Bad: The link is underlined and appears in color. These are two visual clues to the
description of rich-text user that this is a link. Adding the word "click" is unnecessary to identify it as a link
format. and may aggravate users that are using a text-based browser that does not support
"clicking" on links.
This file is also Good: The content of the sentence indicates what the link will take the user to.
available in a graphic-
rich format.
We recommend that Bad: The entire sentence does not need to be identified as a link. A key word
new users review our or phrase (as in the next example) is sufficient and easier for the user to read.
key to symbols.
We recommend that Good: The content of the sentence indicates where the link will take the user.
new users review our
key to symbols.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 58
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Link Code
Anchor: <A HREF=
URL Filename: "http://www.uwec.edu/tour/tour.html">
Text for Link: Campus Tour
Off Code for Anchor: </A>

You can also create links to other types of Internet resources through alternative links.

Link Examples
Links to other documents and sites
<A HREF="http://www.uwec.edu/tour/tour.html">Campus Tour</A>
<A HREF="http://www.yahoo.com/">Yahoo</A>

Link to one of your files in the same directory/folder

<A HREF="element.htm">HTML Elements</A>

Link to one of your files in the parent directory/folder <A

HREF="../webpub.htm">Web Publishing Series</A>

Link to one of your files in a child directory/folder

<A HREF="/sample.htm">Sample Document</A>

FTP (File Transfer Protocol)

When developing FTP links, you want to provide the user with sufficient information about the file
that will be downloaded. For example, if you are going to provide a link to download software that has special
requirements or installation instructions, you may want to also include a link to the Web page that has that
information.

Code for FTP Links

Sample for the UWEC FTP Anonymous Login Site:

<A HREF="ftp://ftp.uwec.edu">UWEC FTP Anonymous Login</A>

Email Links for Mailto

Web users can contact you more efficiently via email with a mailto link, so you need to make a commitment
to respond to the email messages frequently. To access mailto links, users must have email software installed
on their computer and have their browser configured to open the software.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 59
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Since some users are unable to access mailto links, it is important to include the email address in your Web
site (perhaps as the link itself).

Mailto Link Examples

Kathy Finder: finderks@uwec.edu

Code for Mailto Links

Kathy Finder:
<A HREF="mailto:finderks@uwec.edu">finderks@uwec.edu</A>

HTML Links

A link is the "address" to a document (or a resource) on the web.

Hyperlinks, Anchors, and Links

In web terms, a hyperlink is a reference (an address) to a resource on the web.

Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc.

An anchor is a term used to define a hyperlink destination inside a document.

The HTML anchor element <a>, is used to define both hyperlinks and anchors.

We will use the term HTML link when the <a> element points to a resource, and the term HTML anchor
when the <a> elements defines an address inside a document..

An HTML Link
Link syntax:

<a href="url">Link text</a>

The start tag contains attributes about the link.

The element content (Link text) defines the part to be displayed.

Note: The element content doesn't have to be text. You can link from an image or any other HTML element.

The href Attribute

The href attribute defines the link "address".

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 60
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
This <a> element defines a link to W3Schools:
<a href="http://www.w3schools.com/">Visit W3Schools!</a>

The code above will display like this in a browser:

The target Attribute

The target attribute defines where the linked document will be opened.

The code below will open the document in a new browser window:

Example
<a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>

The name Attribute

When the name attribute is used, the <a> element defines a named anchor inside a HTML

document. Named anchor are not displayed in any special way. They are invisible to the reader.

Named anchor syntax:

<a name="label">Any content</a>

The link syntax to a named anchor:

<a href="#label">Any content</a>

The # in the href attribute defines a link to a named anchor.

Example:

A named anchor inside an HTML document:

<a name="tips">Useful Tips Section</a>

A link to the Useful Tips Section from the same document:

<a href="#tips">
Jump to the Useful Tips Section</a>

A link to the Useful Tips Section from another document:

<a
href="http://www.w3schools.com/html_tutorial.htm#tips">
Jump to the Useful Tips Section</a>
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 61
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Basic Notes - Useful Tips

Always add a trailing slash to subfolder references. If you link like this:

href="http://www.w3schools.com/html", you will generate two HTTP requests to the server, because the
server will add a slash to the address and create a new request like this:

href="http://www.w3schools.com/html/"

Named anchors are often used to create "table of contents" at the beginning of a large document. Each
chapter within the document is given a named anchor, and links to each of these anchors are put at the top of
the document.

If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error
occurs.

Link Tags
Tag Description
<a> Defines an anchor

Links are used to "link" a visitor from one area to another. Both text and images are able to be used as a
link source. There are many types of links :

Local - A page on the same server or directory.

External - A page or site on a different server or directory.
Internal - A section on the current page or document.
Download - A file for the visitor to download.
E-mail - Opens the visitor's e-mail program.

<a href="some_url"> text or image </a>

The start tag <A HREF=" "> acts like a pointer. The page name or URL entered in the quotes is the target
of where the link will go.

The text or image entered between the tags will become the link point. If a visitor places the mouse pointer
over that text or image, it will show as a "hand" symbolizing a link. If they "click" on that text or image,
they will link over to the target page or URL.

The end tag </A> ends the link command.

A LOCAL link uses a page name (including sub-directories if needed) as the target. It is "local" to the current
server.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 62
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

<a href="SomePage.html">
Click here to go to SomePage!
</a>

An EXTERNAL link uses a URL as the target. URL stands for Universal Resource Locators. Simply put, it is
the internet address of a web page or site. The URL commonly begins with http://.

<a href="http://www.Someplace.com/">
Text link to Someplace.
</a>

Sometimes you will want to open the link into a new window to keep your site active as well. This can
be done by entering the TARGET="_blank" into the link tag.

<a href="http://www.Someplace.com/" target="_blank">

Text link to Someplace.
</a>

The TARGET propery is normally used for a FRAMED site, but it does have its uses here too. To work
properly, the value of _blank is must have the underscore character and the word blank in lower case letters.

The PAGE LINK (or INTERNAL link) is useful for long pages. This creates a link that points to another spot
on the same page.

<a href="#top_of_page">
Click here to go to top of page.
</a>

Looking at the "pointer" location, it is aimed at a spot called #top_of_page. The # sign lets the pointer know
the location is on the current page.

Now that there is a link, you have to establish where that link is going to end up. You have to create a NAME
or anchor tag. In your code, go down (or up) to the area you want the visitor to link to when they click on the
page link. Then, around a word or image, place the NAME tag set.

<a name="top_of_page">
Some text or image. </a>

The POINTER LINK will find the NAME tag and link the visitor's browser to that point on the web page.
Note: Use names that are easy to understand or describe the link. Calling them "link1" and "link2" may
get confusing when it comes to editing them.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 63
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

You can combine a REGULAR (external or local) link and PAGE (internal) link together to form a COMBO
link. This will direct the visitor to another page at a certain spot.

Step 1 : On your target page, create a PAGE link anchor using the NAME tag set. Place it around some text
or image the visitor is going to be when they link to it.

<a name="SomeSpot">
text or image code
</a>

Step 2 : On your linking page, create a COMBO link using your target page and area in the HREF value.

<a href="TargetPageName.html#SomeSpot">
Click here to go to a spot on my second page.
</a>

File Links

File links are used for allowing a visitor to download a file. These links are set up exactly the same as the local
or external links. Instead of "pointing" to another page or site, it points to a file. When the user clicks on this
link, the browser knows it is a file and will ask the visitor if they want to download the file.

<a href="Lite.zip">
Download this file
</a>

The types of files available to be used for download depends on your online server. A common and most
accepted type is a ZIP file.

E-MAIL Links
The e-mail link is for receiving e-mail and feedback from visitors. This link will prompt the browser's e-mail
program to start and place the e-mail address in automatically.

<a href="mailto:Someone@Someplace.com">
E-mail Me
</a>

Note the mailto: in the HREF value. This is how the browser detects an e-mail setting instead of a web page
setting.
The subject line of an e-mail can be filled in automatically by adding a SUBJECT property.
<a href="mailto:Someone@Someplace.com?subject='About your site'">
E-mail Me
</a>
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 64
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Notice the single quotes ' around the subject text. Using full quotes would confuse the browser since they are
in use around the full HREF area. Any time you need to nest quoted items or values, change back and forth
between double and single quotes.

Link Colors

Links, by default, show up in different colors from the rest of the text on your web page. These settings are
found in the individual browser settings

To over-ride these settings, you can declare your own link colors in the opening BODY tag.

LINK - Color of a non-activated link. (default blue)

VLINK - Color of a previously visited link. (default red)
ALINK - Color of a currently active link. (default orange)

<body bgcolor="#0000ff" text="#000000" background="car.gif" link="#0000ff"

vlink="#ff0000" alink="#ff8429">

Using the hex color codes, you can choose the colors to suit your page. The ALINK is not used much. There
aren't many instances when there is an open link at the same time as the current page.

Be sure you are just inserting these properties into the current opening BODY tag. DO NOT creates a second
opening BODY tag. Any given HTML document can have only one BODY tag set. Any more than one set
will result with page errors.
Create Keyboard Shortcuts
One drawback with a graphical browser is that it is usually very mouse-dependent. For example, you
have to click on link to follow them if you use browsers. If a page has many this keybord method is a little
cumbersome and can be difficult to use, especially for people with disabilities. For addresses this problem by
introducing two new attributes.
The ACCESSKEY attributes lets you a shortcut key to be used to follow a link (for example,
you specify that y link should be followed whenever a user presses the Y key).
For example, <A HREF=http://www.yahoo.com/ ACCESSKEY=”Y”>Yahoo!</A>
The TABINDEX attribute lets you specify a priority number for a link so that the Tab key will
select that link easier or later than other links. By using the TABINDEX attribute with a
number of anchor elements, you can create a custom”tab order” that replaces the default top-to
bottom order.
The TABINDEX attribute is a little more complicated than ACCESSKEY. Both the ACCESSKEY
and TABINDEX attributes can use with form element.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 65
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

TABLES
TABLES are very similar to a spread sheet. There are rows and columns that divide an area into cells.
For each cell, you specify what information is going to appear.
Creating a table uses 3 sets of tags.
TABLE Table. Creates an area for cells.
TR Table Row. Creates rows within a TABLE.
TD Table Data. Creates cells within a ROW.

All 3 tag sets work togehter in harmony. All TD sets are contained within a TR set. All TR sets are
contained within a TABLE set.

<table>
<tr>
<td>

</td>
</tr>
</table>

The CELL is contained in the ROW which is contained in the TABLE. The space in the TD tag set is where
the text, images, or other objects are going to be placed. These are known as the cell contents.

A TABLE may contain many rows and cells. Here is a TABLE with 2 rows. Each row has only 1 cell.

<table>
<tr>
<td>

</td>
</tr>
<tr>
<td>

</td>
</tr>
</table>

(Indenting the code is not necessary. Just do that for easier editing and organizing.)

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 66
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Notice the ROW tags do not overlap each other and show as separate sections.

A ROW may contain many cells. Here is a TABLE with 2 rows. Each row contains 2 cells this time.

<table>
<tr>
<td>

</td>
<td>

</td>
</tr>
<tr>
<td>

</td>
<td>

</td>
</tr>
</table>

Again, the separate sections do not overlap each other. TD tag sets are individual sections that are contained
within a TR tag set which are contained within a TABLE tag set.

Note: Each row MUST have the same number of cells to be viewed properly.
Note: Each row and column are, by default, as wide as and high as the widest and highest object
contained within them.
Note: You may have an empty cell by placing a space code into it. &nbsp;

The TABLE tag has the following properties:

WIDTH Width of the TABLE in pixels or percentage.

BORDER Thickness of the TABLE borders in pixels.
ALIGN Aligns the TABLE to the LEFT, RIGHT, or CENTER.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 67
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
None of these settings are mandatory to create a TABLE, but they help form and design the TABLE.

WIDTH specifies how far across the TABLE is going to be. The number for this property can be specified as
a number (in pixels) or a percentage of the screen width. If the WIDTH property is not specified, the TABLE
automatically adjusts itself to be as long as the information contained within it.
WIDTH as a number:
<table
width="200"> <tr>
<td>
some
text
</td>
</tr>
</table>

some text

WIDTH as a percentage:
<table
width="75%"> <tr>
<td>
some
text
</td>
</tr>
</table>

some text

If the visitor adjusts their window size, the fixed width table remains at 200 pixels wide and the percentage
table adjusts itself to the window area. Some people prefer to use the percentage value so the table will adjust
itself to the screen size of any resolution.

BORDER specifies a pixel wide border around the TABLE. This creates a similar effect as a frame around a
picture. If this property is not specified, the default is 0.

A TABLE with 0 border:

<table
border="0"> <tr>
<td>
sample image coding
here </td>
</tr>
</table>
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 68
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
A TABLE with 5 border:
<table border="5">
<tr>
<td>
sample image coding
here </td>
</tr>
</table>

A TABLE with 15 border:

<table border="15">
<tr>
<td>
sample image coding
here </td>
</tr>
</table>

ALIGN will place the table to the left, right or center of the width of the screen.

<table width="200" align="right">

<tr>
<td>
some text
</td>
</tr>
</table>

some text

The TR tag has the following properties :

ALIGN Aligns row contents to the LEFT, RIGHT, or CENTER. (default LEFT) VALIGN
Aligns row contents to the TOP, MIDDLE, or BOTTOM. (default MIDDLE)

<table width="100%" border="1"> Text.

<tr> Text3.
<td width="50%" > Text2.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 69
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Text.
<p> Text2.
</p> </td>
<td width="50%">
Text3.
</td>
</tr>
</table>

<table width="100%" border="1">

<tr align="right">
<td width="50%" >
Text.
<p> Text2. </p> Text.
</td> Text3.
<td width="50%"> Text2.
Text3.
</td>
</tr>
</table>

<table width="100%" border="1">

<tr align="right" valign="top">
<td width="50%" >
Text.
<p> Text2. </p> Text. Text3.
</td>
<td width="50%"> Text2.
Text3.
</td>
</tr>
</table>

The TD tag has the following properties :

ALIGN Aligns row contents to the LEFT, RIGHT, or CENTER. (default LEFT)
VALIGN Aligns row contents to the TOP, MIDDLE, or BOTTOM. (default MIDDLE)
WIDTH Assigns a pixel or percentage width to the cell. (default cell content width)
HEIGHT Assigns a pixel or percentage height to the cell. (default cell content height)

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 70
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Without any of these properties declared, the TABLE code automatically calculates the properties of the data
cells according to it's contents.

<table border="1" width="100%">

<tr>
<td width="50%" align="right">
Text1.
<p> Text2. </p>
</td> Text1.
<td width="50%" valign="bottom"
height="300"> Text2.
Text3.
</td>
</tr>
</table>
</table>
Text3.

When defining the WIDTH of data cells, the total data cell WIDTH should match the WIDTH of the TABLE
tag. Anything in a WIDTH defined cell will wrap to the next line when it reaches the cell border.

Note: The HEIGHT property is not widely used. Some browsers have difficulty processing it and will
default the cell height to the content height.

The TABLE tag has two properties known as CELLSPACING and CELLPADDING. Here is a table
example without these properties on. These properties may be used separately or together. The examples
shown are separate to show you the difference easier.

<table border="1">
<tr>
<td>some text</td>
<td>some text</td>
some text some text
</tr><tr> <td>some
text</td> <td>some some text some text
text</td> </tr>

</table>

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 71
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

CELLSPACING is the pixel width between the individual data cells in the TABLE. (The thickness
of the lines makeing the TABLE grid). The default is zero. If the BORDER is set at 0, the
CELLSPACING lines will be invisible.

<table border="1" cellspacing="5">

<tr>
<td>some text</td>
<td>some text</td> some text some text
</tr><tr>
<td>some text</td> some text some text
<td>some text</td>
</tr>
</table>

CELLPADDING is the pixel space between the cell contents and the cell border. The default for
this property is also zero. This feature is not used often, but sometimes comes in handy when you
have your borders turned on and you want the contents to be "away" from the border a bit for easy
viewing. CELLPADDING is invisible, even with the BORDER property turned on.

<table border="1" cellpadding="10">

<tr>
<td>some text</td>
<td>some text</td> some text some text
</tr><tr>
<td>some text</td> some text some text
<td>some text</td>
</tr>
</table>

TH or Table Header tags may be used in place of a TD tag set. It can use the same properties as the
TD tag set as well (align, valign, width, etc.). The difference is TH will automatically CENTER and
BOLD the contents.

<table border="1" width="100%">

<tr>
<th width="50%" align="right">
Text1.
</th>
<td width="50%"> Text1. Text2.
Text2.
</td>
</tr>
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce.
72
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
</table>

CAPTION will create a line of text (centered) above or below the table. The text appears "outside"
of the table borders. Caption is usually used as a title or header.

Caption has only one property, ALIGN, that can be set to TOP or BOTTOM. The caption tag set is
always placed directly after the opening TABLE tag and before the first TR tag.

<table border="1" width="100%">

<caption align="top">
My Table Title
</caption>
<tr>
<th width="50%" align="right"> My Table Title
Text1.
</th> Text1. Text2.
<td width="50%">
Text2.
</td>
</tr>
</table>

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce.
73
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Creating a cell that "spans" across a number of columns or rows is possible using the COLSPAN and the
ROWSPAN properties in a TD (or TH) tag.

These two properties can be a bit confusing, so I'll start off with a simple 2 row 2 column table.

<table>
<tr>
<td>
row 1 cell 1
</td>
<td>
row 1 cell 2
</td>
</tr> row 1 cell 1. row 1 cell 2
<tr> row 2 cell 1 row 2 cell 2
<td>
row 2 cell 1
</td>
<td>
row 2 cell 2
</td>
</tr>
</table>

COLSPAN creates a cell that "spans" across a number of cells in a row. This makes the cell longer across, not
down, since it is crossing COLumns, not ROWs.

<table>
row 1 cell 1. row 1 cell 2
<tr>
<td> row 2 cell 1

row 1 cell 1
</td>
<td>
row 1 cell 2
</td>
</tr>
<tr>
<td colspan="2">
row 2 cell 1 </td>

</tr>
</table>

You are probably thinking "Hey what happened to the other TD tag set in the second row? you said each row
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 74
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
must have the same number of cells in them!". Well, yes that is true, but this is a special circumstance. Since
the first cell of the second row is going to take up the room of 2 cells using COLSPAN="2", it also takes the
place of the cell in the coding. So that one cell is actually taking up the space of 2 cells.

ROWSPAN is very similar to COLSPAN, but it works in the opposite direction. While COLSPAN goes across
columns, ROWSPAN goes across rows. Taking the simple 2 row 2 column table from above, here is an example
with ROWSPAN in place.

<table>
<tr>
<td rowspan="2">
row 1 cell 1
</td>
<td>
row 1 cell 2 row 1 cell 2
</td> row 1 cell 1 row 2 cell 2
</tr>

<tr>
<td>
row 2 cell 2
</td>
</tr>
</table>

Now you would think being a ROWSPAN, it would take away one of the ROW tag sets. BZZZZ WRONG.
Both ROWSPAN and COLSPAN are properties of the TD tag, thus it is the TD tag sets that are going to be
involved.
Have a look at that coding above. The first cell of the second row is gone. This is because the first cell of the
first row is using that space via the ROWSPAN.

No matter how many SPANS there are, the coding should always work out. It is always easier to draw out
(yes, with ordinary pencil and paper) the TABLE you want to create, then do the codes from there. That way
you have a solid visual of what you are trying to do.

A couple other properties you can add to TABLE, TD or TH tags are BGCOLOR, BACKGROUND, and
BORDERCOLOR. These are not supported by all browsers, and may have very different results.

BGCOLOR Creates a colored background using a hex number for the value.
BACKGROUND Creates a specified image background (tiled). Have different results in different browsers.
BORDERCOLOR Gives the borders of the TABLE color using a hex number for the value. Used in the
TABLE tag only.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 75
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
UNIT – V
Sounds and Videos – Link to a Sound – Sound Considerations – Embedded Sound – Extended Video –
Video Considerations – Internal Video – Introduction to Forms – Set up a Form – Text Box – Large Text Area
– Check Boxes – Radio Buttons – Menu – Upload Files – Submit and Reset Button – Hidden Field – Organize
Form Elements – Label From Elements – Introduction to Frames – Creating Frames – Frame Considerations –
Provide Alternative Information – Link to a Frame - Scroll Bars – Resizing Frames – Frame Borders – Frame
Margins – Nested Framesets – Inline Frame.

In this chapter, discuss about digital audio and video: the basics of how they work, the common file
formats in use on the Web and in the industry, and some ideas for obtaining sound and video and using it in
your Web pages. Here are some of the things you'll learn in this chapter:

Digital audio and video: what they are and how they work
The common sound formats: m-law, AIFF, WAVE, and RealAudio
The common video formats: QuickTime, Video for Windows, and MPEG
Video codes: what they are and which ones are the most popular and useful Creating and modifying sound
and video files for use on the Web

An Introduction to Digital Sound

Want to know something about how sound on the computer works? Want to create your own audio
clips for the Web (be they music, voice, sound effects, or other strange noises)? You've come to the right
place. In the first part of the chapter, you'll learn about what digital audio is and the sort of formats that are
popular on the Web, and you'll have a quick lesson in how to get sound into your computer so you can put it
on the Web.

Sound Waves
You might remember from high school physics that the basic definition of sound is that sound is
created by disturbances in the air that produce waves. Those pressure waves are what is perceived as sound by
the human ear.

A basic sound wave

There are two important things to note about the basic sound wave. First, it has amplitude, which is the
distance between the middle line (silence) and the top or bottom of the wave crests. The greater the amplitude,
the louder the sound.
It also has a frequency, which is the speed the wave moves (or, more precisely, the number of waves
that move past a point during a certain amount of time). Higher frequencies (that is, faster waves moving past
that point) produce high-pitched sounds, and lower frequencies produce low-pitched sounds.
Real sounds are much more complicated than that, of course, with lots of different complex wave
forms making up a single sound as you hear it. With the combinations of lots of sound waves and different
ways of describing them, there are many other words and concepts could define here. But frequency and
amplitude are the two most important ones, and are the ones that will matter most in the next section.
Common Sound Formats
Now that you know how digital sound works, let's go over how digital sound is stored. Unfortunately,
even now there isn't a standard for audio on the Web that is similar to the way GIF and JPEG are standard now
for images. It's still a hodgepodge of formats, all of them used at different times. This section will at least give
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 76
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
you an idea of what's out there and what it means.

AIFF/AIFC

AIFF stands for Audio Interchange File Format. AIFF was developed by Apple and is primarily a
Macintosh format, but SGI has adopted it as well. In terms of flexibility, AIFF is an excellent format, which
allows for 8- or 16-bit samples at many sample rates, in mono or stereo. AIFF files have a .aiff or .aif filename
extension.

AIFC is AIFF with compression built in. The basic compression algorithm is MACE (Macintosh
Audio Compression/Expansion), with two variations, MACE3 (3-to-1 compression) and MACE6 (6-to-1
compression). Both are lossy compression schemes, so AIFC compressed files will lose some of the sound
quality of the original. Most AIFF players also play AIFC, so using one over the other is only a question of file
size or sound quality.

Macintosh SND Files

The SND format, sometimes called just plain Macintosh System Sounds, is the format used only on the
Macintosh for many simple sounds such as the beeps and quacks that come with the system. SND files are
actually files with SND resources (the Macintosh has a resource and data fork for many files) which can
contain digital samples or a series of commands playable by the Macintosh Sound Manager. SND files are not
widely used on the Web because they are limited to the Macintosh, but SND files are widely available and
easily converted to other sound formats.

Windows WAVE
WAVE or RIFF WAVE format, sometimes called WAV from the .wav extension, was developed by
Microsoft and IBM, and its inclusion in Windows 3.1 has made it the audio standard on the PC platform.
WAVE and AIFF have much in common, mostly in their flexibility. WAVE files can also accommodate
samples in any rate, size, and number of channels. In addition, WAVE files can include several different
compression schemes.

MPEG Audio
MPEG stands for Moving Picture Experts Group, which is a standards committee interested primarily
in compression for digital video. But, because video usually includes an audio track, the group considers
issues in audio compression as well. The MPEG audio compression algorithm is far too complex to explain
here. However, you can get all the technical information you want from the MPEG FAQ, available at most
sites that carry Usenet FAQs (one is listed at the end of this chapter).

MPEG audio has become popular on the Web mostly because of the Internet Underground Music
Archive, which uses it for its sound samples (visit IUMA at http://www.iuma.com/IUMA/). Using MPEG, you
can get excellent sound quality without needing enormous amounts of disk space. The files are still rather
large, but the quality is excellent. On the other hand, your readers (listeners) will also need an MPEG audio
player for their platform and might need to configure their browser in order to properly use the samples.

RealAudio
RealAudio format, playable using the RealAudio player or plug-in and the RealAudio server currently
comes in two flavors: 14.4 formats, playable over 14.4KB modems, provides "monophonic AM quality
sound." The 28.8 format, playable over 28.8KB modems or faster connections, provides "monophonic near-
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 77
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
FM quality sound." Both 14.4 and 28.8 formats are highly compressed using a loss compression algorithm of
their own design. RealAudio files tend to be much smaller than their equivalent AIFF or WAVE equivalents,
but the sound quality is not as good.

Getting Sound Files

Where can you get sound files to use on the Web? You can get them from a variety of sources: Some
platforms with CD-ROM drives may allow you to record digital sounds directly off a standard audio CD;
you'll need a CD-ROM drive that supports this, of course. Keep in mind if you go this route that most
published audio material is copyrighted, and its owners may not appreciate your making their songs or sounds
available for free on the Internet.
Many Internet archives have collections of small, digitized samples in the appropriate format for the
platform they emphasize (for example, SND format files for Macintosh archives, WAV format for Windows,
AU for Sun's UNIX, and so on).

Warning
Keep in mind that, like images, sounds you find on the Net may be owned by someone
who won't like your using them. Use caution when using "found" sounds.
Commercial "clip sound" products are available, again, in appropriate formats for your platform. These sounds
have the advantage of usually being public domain or royalty-free, meaning that you can use them anywhere
without needing to get permission or pay a fee.

Converting Sound Files

Once you have a sound file, it may not be in the right format-that is, the format you want it to be in.
The programs mentioned in this section can read and convert many popular sound formats.

For UNIX and PC-compatible systems, a program called SOX by Lance Norskog can convert between
many sound formats (including AU, WAV, AIFF, and Macintosh SND) and perform some rudimentary
processing including filtering, changing the sample rate, and reversing the sample.

On DOS, WAVany by Bill Neisius converts most common sound formats (including AU and
Macintosh SND) to WAV format. Waveform Hold and Modify (WHAM), for Windows, is an excellent sound
player, editor, and converter that also work really well as a helper application for your browser.

For the Macintosh, the freeware SoundApp by Norman Franke reads and plays most sound formats,
and converts to WAV, Macintosh SND, AIFF, and NeXT sound formats (but mysteriously, not Sun AU). The
freeware program Ulaw (yes, it's spelled with a U) will convert Macintosh sounds (SND) to AU format.

FTP sources for each of these programs are listed in Appendix A, "Sources for Further Information."

To convert any sound formats to RealAudio format, you'll need the RealAudio Encoder. It's available
free with the RealAudio Server package, or you can download a copy from Real Audio's site at
http://www.realaudio.com/.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 78
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Audio for the Web
Now that I've presented all the options you have for recording and working with audio, should give
some cautions for providing audio files on the Web.

Just as with images, you won't be able to provide as much as you would like on your Web pages because of
limitations in your readers' systems and in the speed of their connections. Here are some hints for using audio
on the Web:
Few systems on the Web have 16-bit sound capabilities, and listening to 16-bit sounds on an 8-bit
system can result in some strange effects. To provide the best quality of sound for the widest audience,
distribute only 8-bit sounds on your Web page. Or, provide different sound files in both 8- and 16-bits.
To provide the best quality of 8-bit sounds, record in the highest sampling rate and size you can, and
then use a sound editor to process the sound down to 8-bit. A lot of sound converter programs and editors
enable you to down sample the sound in this way. Check out, in particular, a package called SOX for UNIX
and DOS systems that include several filters for improving the quality of 8-bit sound.
Try to keep your file sizes small by down sampling to 8-bit, using a lower sampling rate, and providing
mono sounds instead of stereo. As noted in the last chapter, always indicate on the page where you describe
your sounds what format those sounds are in, whether it is WAVE, AIFF, or other format. Keep in mind that
because there is no generic audio standard on the Web, your readers will be annoyed at you if they spend a lot
of time downloading a sound and they don't have the software to play it. Providing the file size in the
description is also a common politeness for your readers so they know how long they will have to wait for
your sound.
If you are very concerned about sound quality and you must provide large audio files on your Web
page, consider including a smaller sound clip in m-law format as a preview or for people who don't have the
capabilities to listen to the higher-quality sample.
Creating sounds for RealAudio format? Most of these same hints apply. However, you'll also want to
check out the hints and suggestions RealAudio gives for getting the best sound quality out of RealAudio files
at http://www.realaudio.com/help/content/audiohints.html.

An Introduction to Digital Video

Digital video is tremendously exciting to many in the computer industry at the moment, from hardware
manufacturers to software developers (particularly of games and multimedia titles) to people who just like to
play with cutting-edge technology. On the Web, digital video usually takes the form of small movie clips,
usually in media archives.

Frame rates and sizes.

New Term
A frame is an individual image in a video file. The frame rate is how many frames go
by per second, and the frame size is the actual pixel dimension of each frame.

The frame rate of standard full-screen video, such as what you get on your VCR, is 30 frames per second. This
frame rate is sometimes called full-motion video. Achieving full-screen, full-motion video-the sort of standard
that is easy with a $700 camcorder-is the Holy Grail for programmers and authors working with digital video.
Most of the time, they must settle for significantly less in frame rates and frame sizes to get smooth playback.
Why? On an analog video source, 30 frames per second is no big deal. The frames go by, and they're
displayed. With digital video, each frame must be read from disk, decompressed if necessary, and then spat
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 79
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
onto the screen as fast as possible. Therefore, a lot of processing power, a fast hard drive, and an even faster
graphics system in your computer are required in order for it to work correctly, even more so for larger frame
sizes and faster frame rates.

So what happens if the movie is playing faster than your computer can keep up? Usually your computer will
drop frames-that is, throw them away without displaying them. And when frames are being dropped, the frame
rate goes down, creating jerkier motions or outright halts in the action. This is not a good situation for your
video clip.

What you'll discover when you start playing with it is that producing digital video is often a series of
compromises in order to fit into the constraints of the platform you are working with. You'll learn more about
these compromises later in this section.

Movie Formats
Digital video in a file ready to be played back on a computer is often referred to as a movie. A movie
contains digital video data (just as a sound file contains digital audio data), but that data can be a live-action
film or an animation; movie is simply a generic term to refer to the file itself. Right now the Big Three movie
formats on the Web and in the computer industry at large are QuickTime, Video for Windows (VfW), and
MPEG.

QuickTime
Although QuickTime was developed by Apple for the Macintosh, QuickTime files are the closest thing
the Web has to a standard cross-platform movie format (with MPEG a close second). The Apple system
software includes QuickTime and a simple player (called MoviePlayer or SimplePlayer). For PCs, QuickTime
files can be played through the QuickTime for Windows (QTfW) package, and the freely available Xanim
program will play them under the X Window System and UNIX. QuickTime movies have the extension .qt or
.mov.

QuickTime supports many different codecs, particularly CinePak and Indeo, both of which can be used cross-
platform. See the "Codec Formats" section later in this chapter for more information on these formats.

NOTE
If you produce your QuickTime videos on the Macintosh, you must make sure that they
are flattened before they can be viewable on other platforms. See the section "Getting
and Converting Video" later in this chapter for more information on programs that will
flatten QuickTime files for you.

Video for Windows

Video for Windows (VfW) was developed by Microsoft and is the PC standard for desktop video. VfW
files are sometimes called AVI files from the .avi extension (AVI stands for Audio/Video Interleave). VfW
files are extremely popular on PCs, and hordes of existing files are available in AVI format. However, outside
of the PC world, few players exist for playing AVI files directly, making VfW less suitable than QuickTime
for video on the Web.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 80
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
The MPEG Video Format
MPEG is both a file format and a codec for digital video. There are actually three forms of MPEG:
MPEG video, for picture only; MPEG audio, which is discussed in the previous section; and MPEG systems,
which includes both audio and video tracks.

MPEG files provide excellent picture quality but can be very slow to decompress. For this reason,
many MPEG decoding systems are hardware-assisted, meaning that you need a board to play MPEG files
reliably without dropping a lot of frames. Although software decoders definitely exist (and there are some very
good ones out there), they tend to require a lot of processor power on your system and also usually support
MPEG video only (they have no soundtrack).

A third drawback of MPEG video as a standard for the Web is that MPEG movies are very expensive
to encode. You need a hardware encoder to do so, and the price ranges for encoders are in the thousands of
dollars. As MPEG becomes more popular, those prices are likely to drop. But for now, unless you already
have access to the encoding equipment or you're really serious about your digital video, a software-based
format is probably the better way to go.
NOTE
An alternative to buying encoding hardware is to contract a video production service
bureau to do it for you. Some service bureaus may have the MPEG encoding equipment
and can encode your video into MPEG for you, usually charging you a set rate per
minute. Like the costs of MPEG hardware, costs for these service bureaus are also

dropping and may provide you a reasonable option if you must have MPEG

Movie Compression

As with images and audio, compression is very important for being able to store digital video data,
perhaps even more so because movie files have so much data associated with them. Fortunately, lots of
compression technologies exist for digital video, so you have lots to choose from.

As mentioned early on in this section, video compression methods are called codecs, which include
both compression and decompression as a pair. Compression generally occurs when a movie is saved or
produced; decompression occurs on the fly when the movie is played back. The codec is not part of the movie
file itself; the movie file can use one of several codecs, and you can usually choose which one you want to use
for your movie when you create it. (When the movie is played, the right codec to decompress it is chosen
automatically.)

In this section, I'll talk about methods of video compression and, in the next section, about specific
codecs you have available for use in your own files.

Frame Differencing
But how do codecs work for video? They can either work in much the same way image compressing
works, with individual frames being compressed and then decompressed at playback, or they can support what
is called frame differencing. Frame differencing is simply a method of movie compression that many codecs
use; it is not a codec itself.
Much of the processing time required by digital video during playback is taken up in decompressing
and drawing individual frames and then spitting them to the screen at the best frame rate possible. If the CPU
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 81
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
gets behind in rendering frames, frames can get dropped, resulting in jerky motion. Frame differencing,
therefore, is a way of speeding up the time it takes to uncompress and draw a frame. Differenced frames do
not have all the information that a standard frame has; instead, they have only the information that is different
from that in the frame before it in the movie. Because the differences are usually a lot smaller than the full
frame that means your computer doesn't have to take as long to process it, which can help to minimize
dropped frames. Of course, because a differenced frame is also a lot smaller in terms of information, the
resulting file size of the movie is a lot smaller as well. Figure 10.13 shows a simple example of frame
differencing.

Key Frames
Frame differencing relies on the existence of what are called key frames in the movie file. Key frames
are complete frames upon which the differences in differenced frames are based. Each time a differenced
frame comes along, the differences are calculated from the frame before it, which is calculated from the frame
before it, and so on, back to the key frame

JPEG

JPEG Compression? Isn't that the image standard? Yes, it is, and it's exactly the same form of
compression when it is used in digital video (where it's sometimes called motion JPEG). Remember, movies
are a set of frames, and each one is an image-usually a photographic-quality image. Each of those images can
be compressed quite well using JPEG compression.

There are two drawbacks to JPEG compression as a codec: lack of frame differencing, and slow
decompression. Because JPEG is a compression method for still images, it treats each frame as if it was a still
image and does no differencing between frames. For playback, this means that each frame must be
individually decompressed and displayed, making it more likely that frames will be dropped and performance
will degrade. With hardware assistance, however, JPEG decompression speeds can easily surpass those of
software-only codecs with frame differencing, and with hardware assistance JPEG provides probably the best
quality and the most widely available video format. But, as with all hardware-assisted codecs, few computers
on the Web have JPEG capabilities, so producing JPEG files for the Web is probably not a good idea.

On the other hand, JPEG might be appropriate for video capture. Many video boards support JPEG
compression for video capture. If you're planning on using CinePak as your final codec, capturing to JPEG
first is an excellent first pass (if you have the disk space to store the movie before you finish compressing it).

The MPEG Codec

I'll mention MPEG here as well because MPEG is both a format and a codec. As I mentioned in the
section on formats, MPEG provides excellent high-quality compression for digital video, but usually requires
hardware assistance in order to decompress well. Also, MPEG encoders tend to be quite expensive, so creating
MPEG movies is no small task. For Web purposes, you should probably go with a software codec such as
CinePak or Indeo.

NOTE
MPEG compression is extremely complicated and far beyond the scope of this book; if
you have interest in MPEG and how it works, highly recommend you look at the MPEG
FAQ (referenced at the end of this chapter).

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 82
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Video on the PC

The market for low-cost desktop video capture cards on the PC has exploded in recent months. If
you're interested in doing video on the PC, strongly recommend that you check with the trade magazines to
see what is currently out there and what is recommended.

On a very basic level of video production, an awesome tool for doing very simple video on the PC (and
on the Mac) is the QuickCam from Connectix. This little $100 camera sits on your desktop, and can capture
both audio and video or take video still pictures. It operates only in grayscale, and the frame rate is rather low
for all but tiny pictures. For simple applications such as small files for the Web or video-conferencing,
however, it's a great deal.

In terms of video software, VidCap and VidEdit come with the Video for Windows package. VidCap
is used to capture video to VfW format (appropriately) and provide several options of codecs, and it can
capture video stills as well. VidEdit is used to edit existing video clips. For example, you can change the frame
rate, frame size, codec, or audio qualities, as well as cut, copy, and paste portions of the movie itself.

Getting and Converting Video

Just as with images and sound, you can get video clips by making them yourself, downloading them
from the Net, or purchasing royalty-free clips that you can read on your platform. Sometimes you may need to
convert a video file from one format to another or from one codec to another. For these sorts of operations,
often the software you used to capture the original video is the best to use, but if you don't have that software,
or if you got a video file from another source, you'll need simpler tools.

To convert video files between formats on Windows systems, a commercial program called XingCD
enables you to convert AVI files to MPEG. AVI to QuickTime converters are also available; one is a program
called SmartCap from Intel, which can convert between AVI and QuickTime files that use the Indeo
compression method. To use AVI files, you'll need the Video for Windows package, available from Microsoft.
To use QuickTime movies, you'll need the QuickTime for Windows package, available from Apple. You'll
need both to convert from one format to the other.

To convert video files between formats on the Macintosh, you can use the freeware program Sparkle.
Sparkle can read and play both MPEG and QuickTime files, and convert between them. In addition,the
program AVI-> Quick can convert AVI (Video for Windows) files to QuickTime format.

If you're using QuickTime for your movie files and you want that movie to be read on a platform other
than the Macintosh, you will need to "flatten" that movie. On the Macintosh, files contain resource and data
forks for different bits of the file. Flattening a QuickTime file involves moving all the data in the QuickTime
file into the data fork so that other platforms can read it.

A small freeware program called Fast Player will flatten QuickTime movies on the Mac; on Windows,
try a program called Qflat. FTP locations and other information for these programs are in Appendix A.

Video for the Web

Using a basic desktop computer and simple video equipment you might have lying about, you're never
going to get really high-quality video at a large frame rate and size. Even professional desktop video
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 83
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
researchers are having trouble achieving that goal, and they're spending several thousands of dollars to get
there.

What you can get with everyday household items, however, is a short video sample (less than a minute) in a
small window with a high enough frame rate to avoid serious jerkiness. But, even then, the file sizes you'll end
up with are pretty large. As I've emphasized time and time again, this is not a good thing over the Web where
larger file sizes take longer to transmit over a network connection.

So plan to make some compromises now. The physical size of desktop video files depends on several factors
Frame size: The smaller the area of the video, the less space you take up on the disk. Shoot for 240´180,
160´120, or even smaller.
Frame rate: The fewer frames per second, the less disk space the file takes; but the lower the frame rate, the
jerkier the action. Frame rate tends to be one of the more important factors for good video, so when you have a
choice, try to save space in areas other than the frame rate. 15fps is considered an excellent rate for digital
video, but you can get down to 10fps before things start looking really bad.
Color depth: Just as with images, the fewer colors in the movie, the smaller the file size.
Audio soundtrack: All the hints that mentioned in the previous section apply here. Or, avoid having a
soundtrack altogether if you can.
Compression algorithm: Some codecs are better than others for different kinds of video. Codecs that
use frame differencing, for example, are better for movies in which the background doesn't change overly
much. Most software programs let you play with different codecs and different key frames, so try several
experiments to see what kind of file sizes you can get.

Of course, file size isn't the only consideration. Picture quality and speed of playback are both crucial factors
that can affect some or all of these compromises. You might be willing to give up picture quality for smooth
playback, or give up color for having audio as well as video.

In terms of actually producing the video, there are several hints for improving picture and sound quality and
keeping the file sizes small so they can be more easily transferred over the Web:

Record direct from a camera to the capture card instead of recording from tape. If you must use tape, use the
best quality tape you can find.
If you can get S-video equipment, use it.
Record the audio track separately, using the hints in the audio section of this chapter, and then add it later
using a video processing program.
As with audio, capture the video at the highest possible quality, and then use software to shrink the frame size,
frame rate, number of colors, and so on. The result will be better than if you sampled at the lower rate. Note
that you might need a very large hard drive to store the file while you're processing it; multiple gigabyte drives
are not uncommon in the video-processing world.
Do your compression last. Capture with JPEG compression if you can, at the highest quality possible. You can
then compress the raw file later. Again, you'll need lots and lots of disk space for this.

For More Information

Alison Zhang's Multimedia File Formats on the Internet is an excellent resource for file formats and
tools for playing both audio and video. Check it out at http://ac.dal.ca/~dong/contents.htm.
For information about audio formats, there are audio formats FAQs at the usual FAQ sites, including
ftp://rtfm.mit.edu/pub/usenet/news.answers/ and ftp://ftp.uu.net/usenet/news.answers/.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 84
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Finally, for a more technical introduction to digital audio and video and aspects of both, the Desktop
Multimedia Bible by Jeff Burger, Addison Wesley, is exhaustive and covers all aspects of analog and digital
audio and video, as well as audio and video production.

If you're interested in learning more about digital video and video production in general, I highly recommend a
book called How to Digitize Video, by Nels Johnson with Fred Gault and Mark Florence, from John Wiley &
Sons. This book is an extensive reference to all aspects of digital video, contains lots of information about
hardware and software solutions, and includes a CD-ROM with Mac and Windows software you can use.

If you're interested in MPEG (which isn't covered very much in the previously mentioned book), your best
source for information is probably the MPEG FAQ, which you can get anywhere that archives Usenet FAQs.
One source is http://www.cis.ohio-state.edu/hypertext/faq/usenet/mpeg-faq/top.html.

For more information on QuickTime, definitely check out http://quicktime.apple.com/. This site has plenty of
information on QuickTime itself as well as sample movies and the terribly excellent QuickTime FAQ, and you
can even order the QuickTime software online from here.

Summary

Even though most audio and video files are stored offline in external files on the Web, sound and video
can provide an extra bit of "oomph" to your Web presentation, particularly if you have something interesting
to be played or viewed. And with many simple low-cost audio and video sampling tools available on the
market today, creating sound and video is something you can accomplish even if you don't have an enormous
amount of money or a background in audio and video production.

Here's a recap of topics covered in this chapter.

For digital audio files, there is no firm cross-platform standard. Files that are au can be played on the
most platforms, but the sound quality is not very good. AIFF and WAVE are about equal in terms of sound
quality, but neither is well supported outside its native platform (Mac and Windows, respectively). MPEG
Audio has become more popular because of the Internet Underground Music Archive, but encoding MPEG
audio is expensive. Finally, RealAudio can be used to play audio on the fly as it's being downloaded but
requires extra software on both the server and browser side in order to work.

For digital video, QuickTime and MPEG are the most popular formats, with QuickTime drawing a greater
lead because of its wide cross-platform support and software-based players. For QuickTime files, either the
CinePak or Indeo Video codecs are preferred, although CinePak is slightly more supported, particularly on
UNIX players.

For both audio and video, always choose the best recording equipment you can afford and record or sample at
the best rate you can. Then use editing software to reduce the picture quality and size to a point at which the
file sizes are acceptable for publishing on an environment such as the Web. Always keep in mind that because
sound and video files tend to be large, you should always provide a good description of the file you are linking
to, including the format it is in and the file size.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 85
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Music or Sound files can be found on the internet. Some people have a program which allows them to
record from CD-ROMs or use a microphone. Saving a music file off the internet is done the same way as
saving an image file.

Right click on the link to the music file.

2. Choose 'Save Link As' (or 'Save Target as').

Be sure to remember where you save the file and the name of it. You can then upload the file to your online
server and create a link to it. The name of sound files are CaSe SeNsItIvE. Music.mid is different than
music.mid.

Note: DO NOT STEAL BANDWIDTH. That means, do not link your page to retrieve and play a sound
stored on another person's site.
Most sound or music files have a WAV or MID or MP3 extension. A MIDI file (a file that ends in .mid) is a
small file of instructions that tell the sound card HOW to play a song. The better the sound card, the better it
will sound. All of the actual playing is done on the visitor's computer. You cannot "record" existing sounds as
MIDI. A WAV file (a file that ends in .wav) is a digital recording of a sound. It is much like a cassettte tape
or CD ROM. Because there is so much information contained in a WAV file, these files tend to be VERY
large. Mp3 are a newer version of sound files. They contain a much higher quality of sound.

There are 2 main ways to link to sound files.

1. Foreground (regular link). The visitor clicks on an area to activate it.

2. Embedded. Used for background music or automatic playing.

Foreground (regular link)

Foreground music allows the visitor to click on a text or image link to activate their browser music
player. This is the most perferred to both visitors and web page designers. The visitors have a choice to
activate the music (or not) and the designer (you) will have a faster loading page since the music file is note
taking time to download.

<a href="FileName.mid"> Click here for music </a>

This will create a text link calling up the visitor's music player and load the file FileName.mid. Another
advantage to FOREGROUND linking is the visitor's control over the playing and volume of the sound. Many
visitors hate being FORCED to listen to some music they did not choose and have no control over.

Embedded (background)

Embedded sounds are commonly referred to as BACKGROUND music. It does not require the visitor
to click on a link to activate it. The web page can either show a "console" window or have the music
completely in the background. This form is very similar to the concept of placing an image onto the page.
The sound file will be displayed on the page.

<embed src="FileName.mid">
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 86
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

That will cover most web browsers these days. There were a few extra code lines for much older browser
versions, but those days are gone. Similar to an image tag, the SRC shows the SourRCe of the sound file to
use. Other properties to set and control the sound file are:

WIDTH n HEIGHT
AUTOSTART
CONSOLE
LOOP

WIDTH and HEIGHT (in pixels) control how long and tall the console will be. This is very similar to
assigning image properties. When a music file plays, the browser player will start and a control box appears.
It's good to keep these around WIDTH=150 and HEIGHT=55. This will leave enough room for different
player plug-ins to fit into the assigned area.

<embed src="FileName.mid" width="150" height="55">

This will give the visitor a control box this size :

To eliminate the control box from the web page, set the WIDTH and HEIGHT to zero. The music will still
play, but the visitor will have no control over it. Thus creating a totally background playing sound.

AUTOSTART controls the music starting to play. Setting this to TRUE, the music will start to play
automatically after loading. Setting this to FALSE, the music will load and wait for the visitor to click on the
play button in the console box.

<embed src="FileName.mid" width="150" height="55" autostart="true">

CONSOLE creates a display format to control the playing sound. The values for this property are :

console
smallconsole
playbutton
pausebutton
stopbutton
volumelever

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 87
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Some people leave this property out and let the browser determine a default display. Other people like to
limit the controls the visitor has on the playing sound. Test out different CONSOLE values and change the
WIDTH and HEIGHT settings to create the best display for your needs.

<embed src="FileName.mid" width="150" height="55" autostart="true" console="smallconsole">

LOOP controls how many times the song is going to be played. This property should be set for both
browsers.

<embed src="FileName.mid" width="150" height="55" autostart="true" console="smallconsole" loop="true">

The TRUE and INFINITE settings will make the sound (music) play continuously, over and over again, non-
stop. The other allowable values are FALSE or a number. Using a number will play the sound file that many
times before quitting.

Forms are a great way to get feedback from your visitors. From simple comments to taking orders. Some
online servers provide a general CGI form to activate and receive comments from visitors. Some older
browsers may not understand the FORM function. This won't create an error, but it will bring up the visitor's
e-mail program to send information.

Most FORMs use a CGI (Common Gateway Interface) program. This is a separate program that lives on a
server. It takes the visitor's FORM input, processes it, and sends it to a specified email. Without a CGI, the
outcome may be a very long line of continuous text.

If your server does not offer a GGI for your FORM, you can find a FREE service at
http://www.bravenet.com/. Once registered, choose E-mail Forms and follow the questions to set your FORM
up. They give you a simple form code to copy and paste into your own code. Very easy to understand and do.

Note: Using a FORM to collect data DOES NOT and WILL NOT post information onto a web page.
The information is directed to a CGI or e-mail only.

Anything placed within the FORM tags will be considered part of the FORM. Any FORM type tags must be
within the FORM area to work correctly. All regular HTML tags are usable in the FORM area as well.

The basic FORM has :

1. The FORM tag set.
2. The SUBMIT button.
3. The RESET button.

<form method=" " action=" ">

<input type="submit" value="
"> <input type="reset"
value=" "> </form>

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 88
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
FORM tells the browser to expect some visitor input using some special tags.

<form method="GET or POST" action=" ">

<input type="submit" value=" ">

<input type="reset" value=" ">
</form>

METHOD is how the FORM information is going to be sent. The two options for this property are GET or
POST. Post is the most common and used.

GET The default setting.

Sends information as a query string.
Not used often. Size limitations.
POST Sends information as text.
Text is in one long line.
No size limitations.

<form method=" " action="CGI or mailto:SomeEmail">

<input type="submit" value=" ">
<input type="reset" value=" ">
</form>

ACTION is where information is going to be sent. This is where the specified CGI link or your e-mail
information goes. Direct to e-mail usually results in a VERY long line of information instead of a compiled set
of answers. Mailto tends to be an unstable working value. The CGI option is very recommended.

<form method=" " action=" ">

<input type="submit" value=" ">
<input type="reset" value=" ">
</form>

INPUT readies for FORM for accepting information.

<form method=" " action=" ">

<input type="submit" value=" ">
<input type="reset" value=" ">
</form>

TYPE produces the actual FORM item. The different values for TYPE are :
submit creates a button for sending information.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 89
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
reset creates a button for clearing the FORM.
text single line text box for user input.
radio single circle toggled on/off in a set.
checkbox single square toggled on/off individually.

<form method=" " action=" ">

<input type="submit" value="Send the info"> <input type="reset" value="Clear the form"> </form>

VALUE produces words to appear on or in the specified TYPE. Also acts as a title on submitted
information. a single line box. The TEXTAREA is a multiple line box.

TEXT BOX

These boxes are most common in FORMs. They are generally used for collecting information such
as names, email addresses, URLs, etc..

Type your e-mail here

Type your e-mail here <input type="text" name="EmailAddress" size="40">

If the visitor clicks inside the box, a cursor appears and text can be entered.

input gets the FORM ready for accepting visitor input.

type="text" creates the single line TEXT BOX.
name="EmailAddress" When you receive your feedback, this NAME will appear before the visitor input
answer. This helps distinguish what question the visitor answered since the question
itself is NOT transmitted.
size="40" the length of character spaces of the box. The visitor may type in more than the
assigned number, but only the declared number of characters will be in view.

Some starting or default text can be entered into the box area. Some FORMs use this feature to start the
URL address or insert a pre-determined amount for an order.

http://
Type your homepage URL here

Type your homepage URL here <input type="text" name="homepage" size="40" value="http://">
Adding the VALUE property to the INPUT line adds text into the declared TYPE. In this case, into the TEXT
BOX created. The inserted text can be deleted or edited by the visitor.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 90
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
TEXT AREA

These are larger versions of the TEXT BOX. They give more room for visitors input. TEXTAREAs
are generally used to gather feedback or comments. Anything that would take more than just one simple line
answer.
Please comment on my site

Please comment on my site<br>

<textarea name="comments" rows="3"
cols="40"> </textarea>

textarea Gets the FORM ready for accepting visitor input.

name When you receive your feedback, this NAME will appear before the visitor input answer.
rows Number of rows down to view. The visitor may type in many more rows of information, but only the
specified number of rows will be in view.
cols Number of character spaces across to view. If the visitor types in past the specified number, the
cursor will default to the next row down.

Note: The word TEXTAREA is all one word and requires an ending tag.

Some starting or default text can be entered into the box area, similar to the TEXT BOX. Instead of declaring
a VALUE, it is any text you enter between the TEXTAREA tags. The text pre-inserted into the TEXTAREA
can be deleted or edited by the visitor.

Please comment on my site

Wonderful, couldn't be better. Don't chang

Please comment on my site<br>

<textarea name="comments" rows="3" cols="40"> Wonderful, couldn't be better. Don't change a thing.
</textarea>

Textarea has a limit of 32700 characters. The scrollbar appears when it is necessary.

RADIO buttons are the small circles option. You can list out as many items as you like with Radio buttons,
but only one answer per grouping can be activated at a time. If a new one is selected, the last one becomes
unselected.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 91
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Please choose an option:
Option 1
Option 2
Option 3
Option 4
Please choose an option: <br>
<input type="radio" name="sample" value="one" checked> Option 1
<br> <input type="radio" name="sample" value="two"> Option 2 <br>
<input type="radio" name="sample" value="three"> Option 3 <br>
<input type="radio" name="sample" value="four"> Option 4

input Readies the FORM for visitor input.

type="radio" Creates the radio circle
name="sample" Creates a NAME for this set of options. Notice how all the options have the same NAME.
This group is called "sample". When you get the feedback, this name will be sent.
value="one" An individual name given to each individual option. When you get the feedback, the chosen
value name will be sent.
checked Creates a default choice. If this property is left out, all options will be blank until the visitor
checks one of them.

Note: Notice the NAME value is the same for the group of choices. This is how a radio button can tell if a
new value is selected. Only one value can be held in a specified name at one time.
To have a second radio button set on the page, a different NAME value must be used.

CHECKBOX are small square options. All options the visitor checks will remain checked unless they click
on it again to uncheck it. Unlike the Radio buttons, more than one Checkbox can be active at a time.
Please choose an option:
Option 1
Option 2
Option 3
Option 4
Please choose an option:<br>
<input type="checkbox" name="special 1" checked> Option 1<br>
<input type="checkbox" name="special 2" > Option 2<br>
<input type="checkbox" name="special 3" > Option 3<br>
<input type="checkbox" name="special 4" > Option 4

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 92
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Input Readies the FORM for visitor input.

type="checkbox" Creates the checkbox square.
Name="sample" Assigns an individual name to each option. All checked names will be sent in the feedback.
checked Creates a default choice. If this property is left out, all options will be blank until the visitor
checks one of them.

Note: Notice the NAME value is different for each option in this group. This allows more than one answer
to be chosen. The outcome will show all of the "checked" items as true or yes.

Drop lists and List boxes are a way to offer a list of options to choose from without taking up a lot of space.

DROP LISTS are the smallest way to display a list. The width of a drop list is determined by the width of
the longest OPTION in the list provided. (It hates to waste space). Only one list item will be shown in view
since a drop list is only one line high.

Lists use a SELECT ~ OPTION method to get information. The SELECT command sets the FORM for a
field of information or list. The OPTION commands create the list within the field.

Plan 1
Please choose an option:

Please choose an option

: <select
name="decision">
<option selected>Plan 1
<option>Plan 2
<option>Plan 3
<option>Plan 4
<option>Plan 5
</select>

Select Creates a text area for options with a drop button.

name="decision" Gives a description of the list. This name will be sent in the feedback along with the
selected OPTION.
Option Creates the list. There is no ending tag for OPTION.
selected Creates a default choice. This option will be placed in view when the visitor views the
FORM. If SELECTED is not specified in any OPTION, the first OPTION will be the first
in view. This property is optional.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 93
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

LIST BOX is similar to a text box. It shows a declared number of text rows and gives the visitor a list of
choices. Similar to the drop list, the list box length is determined by the length of the longest OPTION.
Plan 1
Plan 2
Please choose an option: Plan 3

Please choose an option :

<select size="3" name="decision2">
<option selected>Plan 1
<option>Plan 2
<option>Plan 3
<option>Plan 4
<option>Plan 5
</select>

The only difference you will see from the code of a drop list is the first line. The size property is now added.
The rest of the code is the same as the drop list.

SIZE Creates the number of text lines the box is going to show going down. If the list is longer than the
declared size, scroll bars will appear to view the OPTIONS further down the list. In the above
example, there are 5 options, but only 3 of them are in view at one time.

Please choose an option :

<select size="3" name="decision2" multiple>
<option selected>Plan 1
<option>Plan 2
<option>Plan 3
<option>Plan 4
<option>Plan 5
</select>

MULTIPLE is an optional property. Left out, the selection defaults to allow only one answer. Using
MULTIPLE allows more than one option to be selected.
Subject Line

When the FORM input is directed through a CGI, your return e-mail will usually have a blank subject line
or a generic "feedback from FORM" in the subject line. This can usually be changed to a title of your
choice. Some people use the different subject lines if they have a number of FORMs and they want to know
from which FORM this information is coming from.

After the opening FORM tag, this code line will create a SUBJECT line in the e-mail you receive.
<input type="hidden" name="subject" value="Form_Answers">

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 94
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Every INPUT needs a TYPE specified for it. Since this code line is not necessary for appearing on the
FORM itself, we can specify hidden as the TYPE. This makes the command work but "hides" it from view.

Specifying "subject" for the NAME lets the CGI know that we are doing something with the subject line
for the return e-mail.

Any text declared in the VALUE quotes will become the subject line of the return e-mail. It's best NOT to
have actual spaces in the VALUE text. Don't use spaces or use an underscore instead.

Password

The PASSWORD value creates "stars" for any characters entered by the user. SIZE determines the length of
the FORM field.

Enter your password:

Enter your password : <input type="password" size="40">

This only creates the stars in the field area. This is NOT an actual password protection. The data is not
encrypted when it is sent.

Forwarding URL
Isn't it annoying when you SUBMIT a FORM and all it does is display a page showing you all the input
information? Then waits, and waits, and waits, and does nothing more? Well, that's because the coder forgot
to add in the forwarding URL command. This lets the browser know where to go after the FORM has been
SUBMITed.

This code is inserted just before the SUBMIT button code.

<input type="hidden" name="next-url" value="Your_Target_URL">

type="hidden" A background or underlying command as described above in the Subject line

tag.
name="next-url" Creates the actual command "GO TO".
value="Your_Target_URL" Lets the FORM know where to "GO TO" after it has been Submitted.
In some cases, you can have it go to a thank-you page, back to your main site page, or to some totally
different site if you wish. There is one "MUST DO" for this property and command. The target URL MUST
be a full and complete URL. This means the full written URL such as "http://www.XyZ.com/page.html". If it
is not entered completely, the FORM may not work properly.

Image SUBMIT/RESET button

This is to substitute an image for the regular grey SUBMIT button.

<input type="image" src="SomeImage.gif" alt="My Submit Image">

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 95
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Be sure to include any subdirectories and check the spelling for the image.

This is to substitute an image for the regular grey RESET button. Substitute the FormName and image
filename where necessary.

<a href="javascript:document.FormName.reset( );">

<img src="SomeImage.gif">
</a>

READONLY

It's sometimes necessary to create a field of text that is only meant to be read and not changed. To prevent the
visitor from changing it, the READONLY property is used. This property can be specified in a TEXT BOX,
TEXTAREA, CHECK BOX, or RADIO BUTTON.

Please read the terms below:

1. I w ill not SPAM.
2. I w ill not steal bandw idth.
3. I w ill link back to HTMlite tutorials.

Please read the terms below : <br>

<textarea name="terms" rows="3" cols="40" readonly>
1. I will not SPAM.
2. I will not stead bandwidth.
I will link back to HTMlite tutorials.
</textarea>

Frames
Frames are hated by some and loved by others. They are the lines that create sections in the one browser
window to display at least two pages at once. If you look at the Source Code on a framed site, you will
probably see a very small HTML code. This code sections the main page and inserts individual web pages into
the sections.

Frames are enhanced tables that use the whole screen. You specify the rows and columns, then you decide
what contents to show in each cell. You should have a solid grasp on regular HTML coding before attempting
frames.

To start a framed site, a MASTER PAGE must be created. This page will divide the screen into sections
(frames) and specify the contents to be viewed in each frame. Most people have the MASTER PAGE saved as
the "index" page so it is the default load page.

The tag set used to create a frame is <frameset>. This set is entered after the HEAD of the web page code.
Have a peek at the coding below. Notice the BODY tags missing? In a frame setup, we don't need them... for
now.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 96
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
The opening FRAMESET tag has parameters used to create a number of COLUMNS or ROWS. The settings
for the COLS and ROWS parameters can be declared as a percentage of the screen or as a fixed pixel amount.

This example shows a screen divided into 4 equal columns. COLS are the column parameter and each column
needs a declared width. The columns are laid out from left to right.

<html>
<head>
<title> Example Page </title>
</head>
<frameset cols="25%,25%,25%,25%">
</frameset>
</html>

1. COLS creates the columns.

2. There happens to be 4 declared values, so 4 columns will be created.
3. Each column is being declared at 25% of the screen size.

This next example shows a screen divided into 3 rows. The rows are laid out from top to bottom. Both COLS
and ROWS may have a percentage (example above) or a fixed pixel width (example below) specified.

<html>
<head>
<title> Example Page </title>
</head>
<frameset rows="200,300,*">
</frameset>
</html>

1. ROWS divide the screen into rows.

2. There are 3 values declared, so 3 rows will be created.

Notice the * used for the third ROW setting? This is a "Whatever is left over" setting. It can be used with a
percentage setting but it is usually found in the fixed pixel setting. Percentages will adjust themselves to the
screen size.

For the rest of the frames tutorial, 4 sample pages have been created. Here is the code for one of them :
<html>
<head>
<title> Page 1 example </title>
</head>
<body>
This is page 1.
</body>
</html>

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 97
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

In a real application, these will be actual pages containing your information.

To specify which pages are going to be shown in the FRAMES, the FRAME SRC tag is used. This is found
within the FRAMESET tags. FRAME SRC does not have a closing tag.
Using the first Master Page example, we can insert pages for viewing like so :

<html>
<head>
<title>Master Page
Example</title> </head>
<frameset cols="25%,25%,25%,25%">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
<frame src="page4.html">
</frameset>
</html>

This will place :

page1.html into the first specified COL space.

page2.html into the next specified COL space.
page3.html into the next specified COL space.
page4.html into the next (last) specified COL space.

Note: Always have something going into each frame area. You can use web pages, images, or another
frameset.

This is a very simplified example to show a frame setup. You can combine FRAMSETS to create a wide
variety of different layouts and designs. This is known as nesting framesets.

Using a combination of both columns and rows is known as NESTING. Instead of specifying a web page or an
image into a frame area, you can enter a new FRAMESET.

First I'll start with a simple 2 column setup.

<html>
<head>
<title> Master page </title>
</head>
<frameset cols="25%,75%">
</frameset>
</html>

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 98
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
Now put in the "page1.html" example page into the first column.

<html>
<head>
<title> Master page </title>
</head>
<frameset cols="25%,75%">
<frame src="page1.html">
</frameset>
</html>

Now instead of using a FRAME SRC for the second column area, a new FRAMESET will be used.

<html>
<head>
<title> Master page </title>
</head>
<frameset cols="25%,75%">
<frame src="page1.html">
<frameset rows="20%,80%">
</frameset>
</frameset>
</html>
Remember to enter the ending FRAMESET tag for it. The new frameset will act and be coded like the main
frameset. The main frameset affects the entire screen. This new frameset will affect the space it was entered
into. In this case, the second column is being divided into 2 rows. I'll put in the other sample pages for the
newly formed areas.

<html>
<head>
<title> Master page </title>
</head>
<frameset cols="25%,75%">
<frame src="page1.html">
<frameset rows="20%,80%">
<frame src="page2.html">
<frame src="page3.html">
</frameset>
</frameset>
</html>

For any space created by a FRAMESET, you can enter a web page, image, or another FRAMESET. Just be
sure you have "something" going into each of your spaces. Now with this little bit of knowledge, you can
create a great frame layout to your preferences.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 99
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Now that you have your frames in place, you can adjust different parameters of the frame dividing lines. For
these examples, we will start off using a simple COLumn setup.

<html>
<head>
<title> Master Page </title>
</head>
<frameset cols="200,*">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
</html>

The example created a two column page. The first column is 200 pixels wide; the second column is "whatever
space is left over".

The SCROLLING property controls the scroll or slide bar on a frame area. On a regular page, you will see
these appear along the right side of the screen or along the bottom when the displayed page is longer (or
wider) than the screen size. The same effect happens in a frame area.
SCROLLING is not a widely used property considering the scroll bars appear automatically when the page
contents go beyond the area boundaries. If all the contents are within the boundaries, then no scroll bars will
appear.

There are some very minor circumstances when you would like to control the appearance (or not) though.
The value settings for this property are AUTO, YES, or NO. The AUTO value is just like not declaring the
SCROLLING property. The YES value will make the scroll bars appear even if the contents don't go past
boundaries. The NO value will not let the scroll bars appear at all.

<html>
<head>
<title> Master Page
</title> </head>
<frameset cols="200,*">
<frame src="page1.html" scrolling="yes">
<frame src="page2.html">
</frameset>
</html>

AUTO The default. It will insert scroll bars only if necessary.

YES Will insert scroll bars.
Will eliminate scroll bars. If the images or page in the section is larger than the section space, no
NO
scroll bars will appear and the space will show only as much as it possibly can.

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 100
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
As with most objects on a web page, frames have an invisible buffer space around them. This help keeps the
contents of the areas a bit away from the dividing lines. This is controllable using the MARGINWIDTH and
MARGINHEIGHT in the FRAME SRC tag.

<html>
<head>
<title> Master Page
</title> </head>
<frameset cols="200,*">
<frame src="page1.html" scrolling="yes">
<frame src="page2.html" marginwidth="0"
marginheight="0"> </frameset>
</html>

For the example, Set these to zero, but if you prefer to have some extra space try entering different amounts
to see what looks better for your page.

The actual frame divider lines can be altered to suit your page style. Some of these settings may not work in
all browsers though. In that case it will revert to using a default setting.

Without any alterations, a divider is a grey 3 pixels thick border line. The thickness of the border can be set by
using the BORDER property in the FRAMESET tag.

<html>
<head>
<title> Master Page </title>
</head>
<frameset cols="200,*" border="15">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
</html>
This example shows how to do a much thicker border of 15. To eliminate the border or make it invisible, set
the BORDER value to 0.

<html>
<head>
<title> Master Page </title>
</head>
<frameset cols="200,*" border="0">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
</html>

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 101
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

The default color on the frames border is a dull grey. This can be changed to a preferred color using a hex
number and the BORDERCOLOR property in the FRAMESET tag.

<html>
<head>
<title> Master Page </title>
</head>
<frameset cols="200,*" border="15" bordercolor="#ff0000">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
</html>

The example shows the hex number for red. Using the color chart on THIS PAGE, you can insert the hex
number for your choice of color.

As default, the visitor is able to resize the frame borders using their mouse control. Using the noresize
property in the FRAME SRC tag cancels this ability.

<html>
<head>
<title> Master Page </title>
</head>
<frameset cols="200,*" border="15">
<frame src="page1.html" noresize>
<frame src="page2.html">
</frameset>
</html>

NORESIZE is a property on its own. It does not have values associated with it. It can be placed in either of the
FRAME SRC tags and still work. It will affect that specific area and any joining areas to it.

Linking between frames creates the "magic" of using frames. Linking can make the same frame change its
contents or have a different frame change its contents.

First, start off with a simple column layout again.

<html>
<head>
<title>Master Page Example</title> </head>
<frameset cols="35%,65%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
</html>
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 102
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

Linking in the same frame

Open the coding for "PAGE 1" and create a simple link that goes to "PAGE 3".

<html>
<head>
<title> Page 1 example </title>
</head>
<body>
This is page 1
<BR>
Link to page 3 <a href="page3.html"> CLICK HERE </a>
</body>
</html>

When the Master Page is run, the first column containing "PAGE 1" will now have a link to "PAGE 3".
Clicking on this link will load "PAGE 3" into the same frame (column) that "PAGE 1" occupies.

Linking to a different frame

Linking to a different frame requires using the NAME and TARGET properties. This gives the
browser instructions on where to open the link.

On the Master Page, the NAME property is entered into the FRAME SRC tag to give the frame a name.

<html>
<head>
<title>Master Page
Example</title> </head>
<frameset cols="35%,65%">
<frame src="page1.html">
<frame src="page2.html" name="MainWindow">
</frameset>
</html>

In PAGE1, the TARGET property will be added to the A HREF tag. This is a "pointer" to find the named
area.
<html>
<head>
<title> Page 1 example </title>
</head>
<body>
This is page 1
<BR>
Link to page 3
<a href="page3.html" target="MainWindow">
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 103
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
CLICK HERE
</a>
</body>
</html>
When the link in "PAGE 1" is activated, the TARGET will look for the NAME and load the link into that
particular frame.

Note: Be sure to check your spelling and CaSe LeTtErS for the NAMES and TARGETS. They should
match EXACTLY to work properly.

Add another link into PAGE 1. This one will load PAGE 4 into the NAME specified frame. The PAGE 1
coding now looks like this:

<html>
<head>
<title> Page 1 example
</title> </head>
<body>
This is page
1 <BR>
Link to page 3 <a href="page3.html" target="MainWindow"> CLICK HERE
</a> <BR>
Link to page 4 <a href="page4.html" target="MainWindow"> CLICK HERE
</a> </body>
</html>

You have now created a framed page with a site directory on the left side. This can also be done in ROWS if
you prefer to have a listing along the top or bottom of the page.

Linking to more than one frame

Having more than one frame area change during one click is covered in our FAQ area. Outside Linking

When linking to other sites, the settings for the TARGET property should be changed. Having
someone else's site load into one of your frames is considered "bad netiquette" and is sometimes confusing.
The outside values for the TARGET property are _top, _self, and _blank. These settings MUST be in lower
case and MUST contain the underscore before them to work properly.

This will clear your site out of the current browser window and load the targeted page. This is the best
_top
way to link to another site.
_self This is just like not having a TARGET property. It will load the target page into the same frame.

_blank This will bring up a new browser window and load the target page into it. This makes it easier for a
visitor to return to your page afterwards.

To show how the _top value works, I'll add a link in "PAGE 1" going to the AltaVista site.
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 104
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.

<html>
<head>
<title> Page 1 example
</title> </head>
<body>
This is page
1 <BR>

Link to page 3 <a href="page3.html" target="MainWindow"> CLICK HERE </a> <BR>

Link to page 4 <a href="page4.html" target="MainWindow"> CLICK HERE </a> <BR>
<a href="http://www.altavista.com/" target="_top"> Visit Altavista </a> </body>
</html>

There is one important section to include in the MASTER Page. The code to help all the non-frame
capable visitors. If you create a framed site, it is good to have a "non-framed" version as well. Or, at the very
least, have a message telling your visitor they are running a non-frame browser and your site is only available
in frames. This section is the NOFRAMES section.

The NOFRAMES section contains the BODY section of a regular web page.
<html>
<head>
<title> Master Page Example
</title> </head>
<frameset cols="35%,65%">
<frame src="page1.html">
<frame src="page2.html" name="MainWindow">
</frameset>
<noframes>
<body>
regular page code here
</body>
</noframes> </html>

In the NOFRAMES section, the page acts like a non-framed (regular) page. If a frame capable browser visits a
framed site, it will ignore the NOFRAMES area. If a non-frame browser visits a framed site, it will ignore the
frames and run the code in the NOFRAMES area.
In the NOFRAMES area, you should enter at least one of the following :
1. A link to a non-framed version of your site.
2. A message telling them you only have a frames version.
3. A link to another site since they can't enjoy yours.
4. Frame Breaker

You may have noticed some sites having a "frame breaker" message link. This is usually a phrase saying
"If you are stuck in someone else's frames ..." or "Break out of frames here". Some framed sites DO
NOT set their targets as _top when they are linking to outside sites. This can be quite annoying. So, this
Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 105
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
code will eliminate the frames and load your site page again as the dominant page.

<a href="Your_URL_here"
target="_top"> Frame Breaker Link
</a>

BASE TARGET
Without any TARGET specification, a link automatically opens in the same window (frame) as the
link. Using the TARGET property, I've shown how to open a link in a specified window or area. BASE
TARGET establishes a BASE or GENERAL TARGET property. If your framed site is generally a
navigation and main area type layout, this will save some typing.
The BASE TARGET is placed in the HEAD area of the page containing the
links. From this :

<html>
<head>
<title> Page 1 example </title>
</head>
<body>
This is page 1
<BR>
Link to page 3 <a href="page3.html" target="MainWindow"> CLICK HERE
</a> <BR>
Link to page 4 <a href="page4.html" target="MainWindow"> CLICK HERE
</a> <BR>
<a href="http://www.altavista.com/" target="_top"> Visit Altavista </a>
</body>
</html>
5.To this :

<html>
<head>
<title> Page 1 example </title>
<base target="MainWindow">
</head>
<body>
This is page 1
<BR>
Link to page 3 <a href="page3.html"> CLICK HERE </a> <BR>Link to page 4
<a href="page4.html"> CLICK HERE </a> <BR>
<a href="http://www.infoseek.com/" target="_top"> Visit InfoSeek
</a> </body>
</html>

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 106
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
6. Normal links will now default to opening in a frame or window called "Main Window". Any link
with an actual TARGET specified in it will over-ride the BASE TARGET.
7. The main advantage to using BASE TARGET is on a page that contains many links to the same area.

IFRAME stands for Inline FRAME. These are also known as "floating" frames. It's kind of like a smaller
version of regular frames. There is an individual window on the page instead of the entire current window
being sectioned.

Sorry, your browser doesn't support iframes.

Kind of looks like a text box doesn't it? Well, that is actually a separate web page being shown in there. The
IE browser (version 3+) does well with this cool feature. I think Netscape has now adopted the ability to
show IFRAMES, but that is just a guess right now. If you don't see an IFRAME above this paragraph, you
are out of luck.
First you start off with the tag itself...

<iframe> </iframe>

And these are the properties allowed in the starting iframe tag. You may notice that most of these are
extremely similar to normal FRAME coding.
src Specified the URL of the document to be displayed in the frame.
src="FileName.html"
name Specifies the name of the frame for the purpose of linking and targeting.
name="MyIframe"
width Specifies the width/height of the iframe space in pixels or percentages.
height width="200" height="100"
align Aligns the iframe to the left, center, or right side of the page.
align="center"
noresize Kills the visitor’s ability to resize the iframe borders manually.
noresize="noresize"
scrolling Indicates the ability of a scrollbar to appear (or not) with a value of yes, no,
or auto.
scrolling="auto"
frameborder Carries a value of 0 or 1 depending if you want a border to appear around the
iframe or not.
frameborder="1"
marginwidth Specifies the width/height of the margin in pixels.
marginheight marginwidth="1" marginheight="1"
vspace Specifies the verticle/horizontal margin space in pixels.
hspace vspace="1" hspace="1"

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 107
PG & Research Department of Commerce, SREE NARAYANA GURU COLLEGE, K.G.Chavadi, Coimbatore.
You don't have to use ALL of these properties. Most of the time, you will use the first four: SRC, NAME,
WIDTH, and HEIGHT.

The space between the opening and closing iframe tags is used just like the NOFRAMES tag in frames and the
default text in the TEXTAREA tag. The text you enter within this area will be shown on the webpage IF the
visitor's browser does not support the IFRAME tag.
The next part is linking. Iframes behave the exact same way as regular frames when it comes to linking. The
Iframe has a NAME property assigned to it, the link tags get a TARGET property in them.

<iframe src="firstpage.html" name="myspot" width="75%" height="200">

Sorry, your browser doesn't support iframes.
</iframe>
<a href="nextpage.html" target="myspot">

When clicked on, the link will open "nextpage.html" into the space known as "myspot" which just happens to
be the iframe area.

You can have as many iframes on a page as your layout requires, just make sure each one has its own NAME
and the links are TARGETed correctly. Click on one of the links to see the pages change in the test iframe
area.

********
*This study material prepared only for reference, you need more details on this subject refer the
following books :
1. Alexis Leon & Mathews Leon, “Internet for Everyone”, Leon Tech World, Chennai.
2. Eric Kramer, “HTML”.
3. Kamalesh N. Agarwala, Amit Lal & Deeksha Agarwala, “Business of the Net”.
4. John Zabour, Jeff Foust & David Kerven, “HTML 4 HOW- TO”.
5. www.sngccommerce.webs.com.

ALL THE BEST

Internet and Web Designing Study Material for B.Com (CA) – Mr.M.Mahesh Kumar, Asst.Prof.of Commerce. 108