Introduction To Web Development

BMG 201
INTRODUCTION TO WEB DEVELOPMENT
. The draft instructional material is being made

available “as received” from authors. The editing
and various other quality checks are under progress.
The uses are advised to consult Study Centers for
any missing content, updates and instructions
according to syllabi of course.
UNIT 1 WEB DEVELOPMENT PROCESS
Program Name : B. Sc. (MGA)
Written by: Sonal Ramrao Dalvi
SRAJAN Institute, Pune.
Structure
1.0 Introduction
1.1 Unit Objective
1.2 Software to Create Your Website
1.2.1 Website Creation Program
1.2.2 Image Editing Program
1.3 What Makes a Good Website?
1.3.1 A Good Website is Compelling
1.3.2 A Good Website Clearly Meets Identified Goals
1.3.1 A Good Website is Easy to Navigate
1.3.2 A Good Website is Visually Attractive
1.4 How to Plan Your Website
1.4.1 Collection of Information
1.4.2 Define your target audiences
1.4.3 Create a list of Content
1.4.4 Diving this List into Webpages
1.4.5 Create a sitemap
1.4.6 Create a Navigation Scheme
1.5 Design and Layout
1.5.1 Create a Consistent Visual Theme
1.5.2 Align Various Elements on the Web Page
1.5.3 Create a Responsive Web Design
1.5.4 Use Color Contrast and Text Weight Effectively
1.5.5 Group similar Elements Together
1.5.6 Make intelligent use of Images
1.6 Create Your Web Page
1.7 How to Put Your Website on the Internet
1.7.1 Get a Host
Web Development Process 1

1.7.2 Get a Domain Name
1.7.3 Your Username and Password
1.7.4 Software to Transfer Files to Your website
1.8 Summary
1.9 Key Terms
1.10 Questions
1.11 Bibliography
1.0 INTRODUCTION
Today almost everyone realizes the prominence of having a website of their

own. However, all of us might not be expert, technically, to create a website of
our own. Getting a website created by a professional can actually take away a
huge amount of money. So, why don’t you create your website for yourself?
You can actually create a website of you own using free software and website
builder tool available in the market these days. In this unit, you will learn about
some of the basic steps of creating a website. The unit explains the process of
web development starting with the types of software required to create web
page. You will learn not only about the technical details of the software, but
also how to make your useful and compelling website for your audience. For
this you will learn design and layout principles. A website is a bunch of
webpages, so you will learn steps to create webpage. Once a website is ready,
you will need to publish it on Internet. This unit describes basic steps for it. In
short this unit is a user guide for website creation.
1.1 UNIT OBJECTIVES:
After studying this unit you will be able to

Identify the right software to create a website
Understand the features of Good website
Describe steps involved in website planning
Understand how to design and layout webpages
Create webpages
Understand how to publish a website over Internet.
1.2 SOFTWARE TO CREATE YOUR WEBSITE

In the Web Development Process the vital part is using correct Website
creation software. As creating a website is a great way to promote a business or
Web Development Process

start a personal brand, now days there are numerous ways out there on Internet
which will help you to create your Website. Before you begin designing a
website, you should become familiar with the industry standard web-graphic
software tools.
In this topic you will learn two basic types of software which are
required for Website creation.
• Website Creation Program
• Image Editing Program
Let us now discuss about these two in details.
1.2.1 Website Creation Program

The website creation program is used to create the web pages of website. It is
also used to manage the website. These programs are available with different
feature levels and flavors. As per the level of the feature and flavors of the
program, the price of the program also varies. The most popular type of
website creation program currently is WYSIWYG. WYSIWYG stands for
‘What You See Is What You Get’. The user interface for many of these
programs remains the same. It is either a WordPress or a page layout program.
Instead, you can download free software, which will hold your hand through
the various steps of programming, or sit back and let you do your thing. HTML
editor is another type of interface. These programs are specifically used by
those users who prefer HTML to create their webpages instead of visual
interface. This program does require basic knowledge of programming and
coding. If you’re not quite ready for that, take a look our best free and paid
website builders. Open source applications and tools are a great alternative for
web designers on a budget. Many open source tools have comparable features
to the expensive applications, and are also free. This makes it possible for a
web designer to have all the tools and applications needed to complete
everyday tasks without even spending a cent.
Below you will learn various options for creating a website as per cost
and ease of program involved. Let us start for Beginners who prefer to work
from templates to Professional who will work on programming language.
• WordPress :
WordPress, created in 2005 is an open source online publishing platform is
the most popular website builder program, currently running more than
26% of the web.
There are various hosted version of the open source software. Here, you
can start with a blog or build a website in seconds without any technical
knowledge.
Nearly everything on WordPress.com is free, and what’s currently free
will continue so in the future. WordPress keeps your sites free by proposing
upgrades for things like not only custom domains and Plans but

also products like anti-spam software and VIP hosting partnerships with
major media outlets. Figure 1.1 shows WordPress interface.
Figure 1.1 shows WordPress interface.
• CoffeeCup Free HTML Editor:

It includes a Help feature which can walk a beginner through set up and
design, and it includes templates that you can tweak if you’re wary of
programming. You can easily turn off this help function if you already feel
comfortable with your web design coding talents. Because this is the free
version of the original software, it doesn’t have all the features that come
with the full version. That being said, it still has enough tools to build a
fully functioning site. Figure 1.2 shows CoffeeCup interface
Figure 1.2 shows CoffeeCup interface
• Dreamweaver :
Previously Macromedia Dreamweaver and now part of the Adobe portfolio,

this tool is one of the commonly used editors which can support
developers, improve the workflow and save you a lot of time during
coding. Dreamweaver offers hybrid editing, you can work completely in
WYSIWYG mode without ever seeing a bit of code, you can work directly

in the code only switching over to preview your work, or you can work in a
dual-pane environment to take advantage of WYSIWYG and hand-coding
simultaneously as shown in Figure 1.3.
Dreamweaver also offers various helpful tools such as the library of
code snippets, ftp management, server debug and an integrated coding
development. E.g. you can view CSS information in a single, unified CSS
panel that makes it easy to see the styles applied to a specific element,
identify where attributes are defined, and edit existing styles without
entering Code view.
Figure 1.3 Dreamweaver dual pane mode
• Adobe Contribute:
The main purpose of Adobe Contribute is to let editing web-sites and blogs
for users without any technical expertise. Contribute CS3 allows content
authors to update existing websites and blogs while maintaining site
integrity. Contribute offers a Dreamweaver integration, facilitates posting
from Microsoft Office and editing from IE 7 and Firefox.
With a WYSIWYG authoring environment, content authors and
contributors can edit or update any website or blog without having to learn
HTML. Figure 1.4 shows its interface.
Figure 1.4 Contribute interface

• Notepad++:
Notepad++ is a text editor and source code editor. It is a replacement for

Notepad the built-in Windows text editor. Unlike Notepad, we can work
with multiple open files in a single window as it supports tabbed editing. It
supports numerous programming languages. Few of its features are Speech
synthesis, Spell checker and Drag-and-drop. It also supports syntax
highlighting and code folding for over 50 programming languages.
Notepad++ interface is as shown in Figure 1.5.
Figure 1.5 Notepad++ interface
1.2.2 Image editing program

Image editing program includes the processes of modifying images, whether
they are digital photographs, traditional photochemical photographs, or vector
illustrations. Sometimes it is also referred as photo editing software, and one of
the most common tasks performed with this type of program is the retouching
of photos or editing illustrations. Other things that can be accomplished with
image editor software include resizing, cropping, colorizing, merging and
altering digital images to create virtually any drawing of any photograph or
scene imaginable. Image editors usually have a list of special effects that can
create unusual results. A digital image can be taken by a digital camera or can
be created by scanning a print photo or illustration into a computer. It also
allows you to save images in ‘gif’, ‘png’ or ‘jpg’ format.
Image editing program can be used to turn a black-and-white photo into
one that is in full color or to modify characteristics such as hue, brightness and
contrast. Digital images also can be rotated clockwise or counter-clockwise and
can be flipped horizontally or vertically.
Image size alteration is one of the most important processes for website
development. Image editors can resize images in a process often called image
scaling, making them larger, or smaller. High image resolution cameras can
produce large images which are often reduced in size for Internet use. So that
images can load easily and faster on browser.

Listed here are some basic to the professional-grade standards used for
image editing.
• Photoshop
Most web comps, as page designs are called in the industry, are built in
Photoshop. It is the agency and in-house standard; most developers expect
to be handed Photoshop comps before they build the actual website.
Typically, there is one Photoshop file per web-page template. Photoshop
lets you to make extensive use of layers and layer sets, keeping distinct
(and helping you organize) all the components that make up your design.
For creating, editing, and manipulating bitmaps, no other tool on the market
holds a candle to Photoshop. The problem with Photoshop, however, is that
learning to use it to its fullest is akin to learning to fly a jumbo jet. In
addition to the years it may take to fully master Photoshop’s power, you
also have to deal with a steep price tag.
However it’s a best practice to name and organize your layers so that other
designers can make sense of your document. Figure 1.6 shows Photoshop
workspace.
Figure 1.6 Photoshop workspace
• Illustrator
Adobe Illustrator is considered an industry leading editor and is more
expensive than other similar products. Often you’ll need to create custom
icons, buttons, or illustrations in web design, and it’s easiest to use
Illustrator for such tasks. You can then import these illustrations into
Photoshop or Fireworks to fold into your web comp. Figure 1.7 shows
illustrator workspace.
The illustrator (.ai) file format is a common vector format for exchange and
its feature set lets creation of relatively complex vector artwork. Illustrator
imports over two dozen formats (including PSD, PDF, SVG) and exports
AI, PDF, GIF, JPG, PNG, SVG, SVGZ, WBMP, and SWF. However, the
user must be aware of unchecking the "Preserve Illustrator Editing

Capabilities" option if he or she desires to generate interoperable SVG
files. The powerhouse of Adobe Illustrator's vector drawing interface is the
pen tool and its set of complementary tools
Figure 1.7 shows illustrator workspace.
• CorelDraw:
It is an editor used in the graphic design, sign making industries.
CorelDraw is capable of limited interoperation by reading file formats from
Adobe Illustrator. CorelDraw has over 50 import and export filters, on-
screen and dialog box editing and the ability to create multi-page
documents. It can also generate TrueType and Type 1 fonts which can be
used as customized fonts for web or print. Some other features of
CorelDraw include the creation and execution of VBA macros, viewing of
color separations in print preview mode and integrated professional
imposing options. Figure 1.8 shows CorelDraw’s interface.
Figure 1.8 CorelDraw’s interface

1.3 WHAT MAKES A GOOD WEBSITE?
In today’s digital era’s world there must be millions of websites over Internet.
Making a website has become an easy and manageable task by using software.
Getting your business online is one of the best things you can do to reach new
and prospective clients. However, many people find it difficult to begin. In this
topic, you will learn outline of four basic steps to help you make your website
memorable and engaging.
1.3.1 A Good Website is Compelling
A website must be visually appealing, polished and professional. As website is
a representation of your brand name and company, your products and services.
A good website is enriched with value for the viewers that make them want to
visit that site on regular basis. For example think about some of most popular
site, such as Flipkart.com or amazon.com. These websites create an interest in
the audience, causing them to return. The reason for this is the compelling
content of the site, which is informative and relevant. When you visit the site,
Flipkart.com, you are able to find easily what you are looking for. The site
enables you to read through the reviews of the products too. Also listed are the
reviews from both critics and clients. There is also an option to review the
product yourself. Additionally, other products information related to the same
areas of interest is also recommended.
Even though you are into designing a personal home page for your
website, you can use features which have the capacity to make the website
attractive to visit. In order to have a successful and engaging website, it should
have a simple and clear message that all visitors can understand. The best way
to communicate your website’s purpose is through a clear message on your
homepage. This will also help search engines categorize your website for
appropriate keywords and phrases. To make your homepage compelling to
audience, you would need to put yourself in their place. You need to think, if
you were the audience. Then what you could do to make your website
interesting enough. Think about all features that would have compelled you to
return to that website again and again?
For example, if you have to create a website of your interest in Indian
food recipe, you would have definitely wanted to attract more and more people
with the same interest to you website. In order to sustain the interest of your
audience, you could create state wise separate folders of recipes or highlighting
recipe of the week, which you can change periodically. You could add a
section of advice and comment on your recipe. Also you could provide links to
some other sites for additional information about ingredients or procedures. In
order to catch the interest you could even write some minutes tips to enhance
the taste of daily food or how to save timing while cooking.
1.3.2 A Good Website Clearly Meets Identified Goals
When you start designing your website, your goals of achievement must be
very clear. The goals could be to tell others about your seasonal business and
the regular updates of it on the change of season. It could also be to get

connected with other people who share the same interest as you. Identifying the
goals for your website is a vital aspect as it will help you to create a dedicated
content. This dedicated content will further make your website cohesive and
consistent. You will learn about this feature in detail in the next topic.
1.3.3 A Good Website is Easy to Navigate

Another essential feature of a good website is navigation. Many website
owners fail to include well-structured pages or clear navigation tabs that
navigate the visitors to relevant sections of their website.
Organize the information on your website in a simple and planned way.
Think of the common path you would like a site visitor to take. The navigation
of the website should be decided at the initial phase itself. Before you start
building the website, you must spend sufficient time on deciding the structure
of the site. While designing the structure of the site, all the links to be put on
the website must be organized in a consistent sequence. In many cases, adding
sub-pages to the top navigation will be the best option for organizing your
information into particular groups.
Think over your web pages’ organization so that it all makes sense in a logical
flow. That way, when customers visit your website, they will have an easier
time navigating to the information on your website that is most relevant to
them.
1.3.4 A Good Website is Visually Attractive
What adds the charm to the website is the presence of images, animation,
music and various other elements. It is a vital characteristic of a website. But
this should be used judicially on the site. Some designers add unnecessary and
redundant visual elements in the site. The designers think that by adding these
elements they can attract more people. Rather, when used redundantly, these
features add to failure of the site. The audience does not visit a site merely to
check the flash animation and beautiful colored graphics. If the website lacks
relevant information, audience finds a waste of time and would never visit your
site again. Hence it is important that you use the visual elements in accordance
and combination with the content of the site.
You should use the images and design as a vehicle to achieve the goals
you set out for your website. Try to make design as simple and clean as
possible. In order to ensure that you choose the right design for your website,
you must follow the basic of design principle. Which you will learn in further
units.
1.4 HOW TO PLAN YOUR WEBSITE
In this topic you will learn some of the basic rules of how to plan a website.
This is interesting to know that you need not invest a lot of your time in
creating a plan for your site. Whatever time you invest on the plan that will be

well worth the rewards. There are several steps in the web site design and
development process.
1.4.1 Collection of Information:
The first step in planning a successful web site is to collect information. There
are several things which need to be taken into consideration when the look and
feel of your site is created.
This first step is actually the most important one, as it involves a solid
understanding of the company for which you are creating a website. It involves
a good understanding of what your business goals are and how the web can be
used to help you achieve those goals. You should answer few of questions to
get clear idea about the website.
• Purpose:
What is the main purpose of the website? Do you want to provide some
kind of information, promote a service or sell a product?
• Goals:
What do you want to accomplish by building this web site? Two of the
more general goals are either to make money or share information.
1.4.2 Define your target audiences:
After deciding the goals now you should identify the target audience. A
specific group of people which will help you to accomplish your goals.
Consider their age, sex or interests – this will later help determine the best
design style for your site. To find out target audience answer following listed
questions.
• Who will use your website?

• Where do they visit from?
• Why they will visit?
• How do they visit?
There are many different types of people who view your website: potential
clients, current clients, employees, job seekers, students interested in
internships, vendors, media etc.
1.4.3 Create a list of Content:
What kind of information will the target audiences are looking for on your site?
Are they looking for specific information, a particular product or service,
online ordering…? Remember that your audience is looking for information
that will help them make a decision, so it should be informative and relevant.
Use this opportunity to increase visitor trust in your company's knowledge and
competence.

1.4.4 Diving this List into Webpages
Once you have created a list of the content, try to organize it into groups. The
list of content now needs to be organized into contents for the webpages. You
can organize the content by putting similar ideas under on topic. Clearly label
topics and break your text up into small paragraphs. Don't bore your visitors
with visually vast text. You've got less than 10 seconds to nail your visitors, so
grab their attention by being clear, brief and compelling. Each page of the
website should stand on its own to an extent. Try to update your content on
regular basis. No one likes to read the same thing over and over again. Dead or
static content will not bring visitors back to your site!
1.4.5 Create a sitemap:
The site map is a list of all main topic areas of the site, as well as sub-topics, if
applicable. This serves as a guide as to what content will be on the site, and is
essential to developing a consistent, easy to understand navigational system.
Sitemap can be as shown in Figure 1.9.
Figure 1.9 Sitemap
1.4.6 Create a Navigation Scheme:

Once you have created a sitemap showing all the relationships amongst the
various webpages of the site, the next step is to create a navigation scheme.
The navigation scheme ensures that all the webpages are linked to each other in
a simple consistent way.
These were some simple steps to plan a website. After planning website
development starts. We will come across it in future. In the next topic, you will
learn how to make your website aesthetically good.

Check your Progress 1
What is WYSIWYG?
Which two basic types of software are required for Website creation?
What hybrid editing Dreamweaver offers?
What is the first step in planning a successful web site?
How to grab visitors’ attention in less than 10 second?
1.5 DESIGN AND LAYOUT
In this topic, you will learn some of the basic fundamentals of a good layout.
These principles would help you in making your web pages more effective and
attractive to the reader.
The following are some basic principles:
• Create a consistent visual theme
• Align various elements on the web page.
• Use color contrast and text weight effectively
• Group similar elements together so that the reader is able to grasp the
information of the web page easily.
• Make intelligent use of images on web pages, including images that
display text on them.
Let us now discuss these principles in detail.
1.5.1 Create a consistent visual theme

The visual theme of a website helps in creating the mood and atmosphere for
the visitor. The visitor gets an idea about the feel of the website through a
combination of colors and images on the webpages. So you should choose a
consistent set of colors and images that can set the mood of message and
information you want to convey through your website.
Almost all computes have the capability to display millions of colors,
yet majority of people have set their computers to view only 256 colors. This
suggests that many people may not able to see the colors on your web pages, as
you intend them to be seen. Fortunately, there are 256 that would be displayed
properly on nearly all the computers. These colors are called ‘browser safe
colors’
1.5.2 Align various elements on the web page

You must be very careful about placing elements on the webpage. You should
never place text and images on the page haphazardly or randomly. The

elements must be placed in such a way that these are able to create interest and
visual appeal.
Figure 1.10 (a, b, c, d) illustrates some of the options of how can you
balance the elements and text on a webpage.
Figure 1.10 (a) Figure 1.10 (b)
Figure 1.10 (c) Figure 1.10 (d)
1.5.3 Create a Responsive Web Design
It is a newer approach, based on CSS3, and a deeper level of per-device

specification within the page's stylesheet through an enhanced use of the
CSS @media rule.
To achieve responsiveness in webpages you must use of Fluid layouts, which

are used as an alternative to HTML-table-based layouts and grid-based
design in both page layout design principle and in coding technique. You must
divide a design into units (sidebars, content blocks and navigation areas) that
are sent to the browser and which will be fitted into the display window by the
browser, as best it can. As the browser does recognize the details of the reader's
screen (window size, font size relative to window etc.) the browser can make
user-specific layout adjustments to fluid layouts, but not fixed-width layouts.
To get fitted into perfectly such a display may often change the relative
position of major content units, sidebars may be displaced below body
text rather than to the side of it. You should design in particular way that the

relative position of content blocks may change while leaving the content within
the block unaffected. This also minimizes the user's need to horizontally scroll
the page. As shown in Figure 1.11 you can see how major units of website
change their position as per the device screen width.
Figure 1.11 Responsive Webpage Layout
1.5.4 Use color contrast and text weight effectively

To understand this principle, think of any website which you found difficult to
read or which was hard on the eyes. This happened because of little or no
contrast between the text and other elements of the webpage.
For further clarification between good and bad color contrast and text weight,
check Figure 1.12 (a) and (b).
Figure 1.12 (a) illustrates an example of good color contrast, which is
easy to read and looks interesting.
Figure 1.12(a) Good Color Contrast
Figure 1.22(b) illustrates an example of bad color contrast and text weight,
which is hard on the eyes. The color combinations used is also loud.
Figure 1.12(b) Bad Color Contrast

Note that the contrast can be created not only by the color combinations used,
but you can also create contrast by using text weighting.
As you can see in the preceding example that mixing type faces of different
weight can be enable you to create contrast. Also it helps you to separate
sections of your webpage. In Figure 1.13 Serif and San-Serif fonts have been
combined. You can see that San-serif font have smooth edges whereas Serif
fonts have flourishes or serifs on the edge.
Figure 1.13 Combination of Serif and San-Serif fonts
As another piece of caution, you should avoid backgrounds that have guzzled
texture in them. Texture of any kind in the background makes the text hard to
read. Figure 1.14 provides you with one such an example of background with
texture.
Figure 1.14 Textured background

1.5.5 Group similar elements together
This principle suggests that you must place the elements with same nature and
Properties together on a page. The elements with same nature are able to give
readers that exact impression and feel of what the website Contains.
1.5.6 Make intelligent use of images

To make a website interesting for all types of viewers is one of the difficult
aspects of creating a website. It is actually challenging to create a website
which could meet the requirements and expectations of a wide range of
audience. The designer has to be considerate to the needs of maximum users of
the website. Unfortunately, not every visitor has the same fonts available to
them on their computer. So in order to ensure that the look of the text used is
the same for every user, it is wise to create an image consist of text. You can
do this by creating an image using the text. Figure 1.15 is an example where
images comprise the text within them.
Figure 1.15 Text within Images
The text in the above Figure is a.gif file. Generally, if you create images
from text, they should be gifs. This makes the file size small and text is
'rendered' or displayed clearly as compared to a .jpg or JPEG images.
You must be thinking of creating a web page itself as an image. But that is
not a practical option. Nor it is desirable. It is not practical because the file size
of the web page would be very huge. You can easily imagine the duration of
time a file of this much size would take to download. And the option of making
a web page as an image is not desirable because the search engines would
never be able to add your website in the index. The search engines index sites
based on the text that is visible to them. If the entire page is an image, the
website appears to contain no text. It is been taken as an Image only by the
search engine.
You can render important titles as images to create contrast and interest in
the website. This could be an intelligent negotiation to use text as images. It
ensures to create a nice visual effect without making your web page seem
bloated.
1.6 CREATE YOUR WEB PAGES

In the previous topics of this chapter, you have learned how you can make
your website look good. Also you have knowledge of how to plan the elements
you want to put on your website. Now let us learn about what it actually takes
to create a website.

In case you know how to use word processors such as Microsoft Word or
Core Word Perfect, you can use them to create the web pages of your website.
Creating a web page using these processors is really very easy and
appropriate. It is just like creating any other document. Creating a web page
using the processors stated above is similar to creating any normal word
processor. The only thing you need to be careful about while creating a
webpage using these processors is to add hyperlinks. These hyperlinks should
be created to connect various webpages to your website. When you have
completed a webpage, you simply need to save it as an HTML document.
HTML stands for Hyper Text Markup Language. Figure 1.16 below shows
how the extension of file looks like.
Figure 1.16 HTML File Extension
Indeed the process of creating a website as mentioned above is very simple

and everyone can easily create their websites using some or other word
processors. However, this method is not appreciated due to a number of
reasons. Let us find out what these are.
First, the html created by your word processor is not optimized for the web.
It is designed to preserve only the formatting of the word processor used for
creating the website. This indicates that the webpage of your website may look
fine in some browser but may not look fine on others. For example, it may
work for readers who use Mozilla Firefox and may not work for those using
internet explorer or chrome.
Second, it is not a suitable task to manage a website. You may need to
create customized images for your website. Your word processor is simply not
set for such image modification and customization.
To avoid such hurdles, most of the websites are created using software that
is designed to create websites. Such software helps in creating and editing
HTML files. This is the language that your web browser understands and able
to read.

You must be thinking that you would need to learn HTML to create your
webpage. But you do not need to. Design programs of most of the websites
work like a word processor. You simply need to place your text and images on
the page and the program saves files in HTML formats. This type of design
programs used to create website are called WYSIWYG website editors.
WordPress and Adobe Dreamweaver are some example of such website design
programs.
You must have noticed that most of the webpages consist of images and
text. So you would need some software that enables you to resize images and
save them in a format that is easily understandable by your web browser.
The web compatible image formats are JPEGs,PNGs and GIFs. What is
important about these image formats is that these are compressed in order to
reduce the size of their files. This feature enables you to download the files
faster. Instead of minutes, you wait only for seconds; it just takes a few seconds
for them to get downloaded on your web pages. GIFs are best for line art,
illustrations and text and JPEGs are ideal for photographs. There are many
programs available in the market that enables you to manipulate images and
save them as GIFs and JPEGs for the web. You can use Corel PaintShop Pro or
GIMP for beginners. For professionals, Adobe Photoshop, version 5.5 or later
Adobe Dreamweaver are advisable. There are also freeware or shareware
programs that are available. You can look for such programs at Internet.
1.7 HOW TO PUT YOUR WEBSITE ON THE

INTERNET
1.7.1 Get a Host
Once you’ve built your website, you can publish it on the internet, before you
go any further; you need a place on which you can put your website so that it
can be available through the internet. This is called a host. The host is simply
the computer (or computers) that contain the server of your website. When
someone wishes to access the website, the server is responsible for sending and
retrieving the correct information required for the site to function properly.
You can go with the Web hosting packages, which include two essential
features:
• Storage space, for your website files. This is measured in megabytes

(MB). You need at least 10MB for a simple site, and much more for a
complex one.
• Bandwidth, which allows visitors to view your site. It’s also measured
in megabytes, the more visitors you have, the more bandwidth you’ll
need.

It’s hard to know exactly how much storage space and bandwidth you
should get, but entry-level hosting packages are usually suitable for simple
websites. If you’re not sure what you need, look for a low-end package which
you can upgrade easily
1.7.2 Get a Domain Name

Like your home address, your website also needs an address over Internet
to get accessed by visitors. The address of your website enables visitors to view
webpages. It also enables you to place your files at specific location. This
address is called as ‘Domain name’. Domain names are what identify your site
on the internet.
• If you’re making a website for your company or business, then your

domain name should match your company name. such as
YourCompanyName.com
• If you’re designing a website for yourself, then YourName.com would
be a great selection.
Domain names generally end with .com, .org or .net extensions.
Without such a domain, you can only access your website through the IP
Address of the server on which it is hosted. For example instead of having
www.google.com as an address, you would end up with 216.239.51.99. This
looks terribly unprofessional and it's hard to remember.
You have to buy the domain name for your site. You can buy one from
sites such as GoDaddy or BigRock.
Sometimes hosting providers actually give you a free subdomain. So
instead of having yoursite.com, you would end up with yoursite.yourhost.com.
In most cases, your hosting providers will actually give you the option of
buying a domain through them. They then set it all up, so you're all ready to go.
But this might cost you more.
1.7.3 Your Username and password

Your Internet Service Provider would provide you with a user name and
password. This username and password would enable you to have FTP access
to your Web site. The access would ensure that only you are allowed to add or
modify the files on your Web site.
1.7.4 Software to Transfer Files to Your Website

So now you have a good webhost and a domain. Now, you need to connect
both, the domain to the webhost, so that when you enter the domain name on
the internet or in URL window you are redirected to the site. You would need
software that enables you to send files to your website. This software enables
you to send files to your website using FTP. Some of the options you can use
to transfer tiles have been discussed below.

• Dedicated FTP Software:
Dedicated FTP software is a type of program. This program supports in
sending and retrieving files using FTP. Most of the dedicated software
available today is either free or shareware. One of the most famous
dedicated FTP software is WS_FTP. The user who uses the software for
non-commercial purpose can use it free of cost. However, the cost for
commercial purpose is also very cheap. The software can be
downloaded from any of the shareware sites, such as cnet.com.
• Website Design Programs:

Many of the FTP design program are existing with the feature of site
management. The site management feature lets you to retrieve files
from the website to edit. It also allows you to send FTP files to your
Web site. The web pages can be published using simplest programs,
such as Dreamweaver. Even it enables you to send individual web
pages be FTP.
• On-line Site Builders:

On-line builder help you by automatically placing all web pages at
correct location. On-line site builder are available on the computer of
your Internet service Provider.
Check your progress 2

Why combination of colors and images are important?
Why major content of webpages often change the relative position?
How to create contrast by typefaces?
Why creating a web page as an image is impractical?
What are two essential features of Web hosting packages?
1.8 SUMMARY
• The popular website creation program used to create new website is
• WYSIWYG Image editing Program are also essential ingredients used to
create a web page.
• For budget websites, Word processors, Front-page express, Photo deluxe,
etc., may be used.
• There are few professional software like Dreamweaver, Photoshop which
are expensive, but may be used to create websites.

• There are a few criteria for a good website. A good website is compelling,
meets clearly identified goods, is easy to navigate, have attractive visuals
and text layout, etc.
• In order to plan a website, one need to identify goods for the site, identify
visitors, create a list of contents, create web pages, draw a chart of links
between pages, create a navigation scheme.
• To attract viewers to a website, it is essential that the design and layout of a
website is taken care of. For this, a few basic principles like creating a
consistent visual theme, aligning various elements on the web page, using
color contrast and text weight effectively, grouping similar elements
together, making intelligent use of image on the web page is essential.
• Word processors like Microsoft word or Corel Draw perfect might be used
to create web pages for a website.
• To create a website on the net, one needs to have the required software for
this, know the address of the location of the site, the user name and
password is required to add and remove files to/from that location.
1.9 KEY TERMS

• Page layout: Page layout is the pan of graphic design that deals in the
arrangement and style treatment of elements (content) on a page.
• WYSIWYG: is a short term for 'What You See Is What You Get'.
• HTML: Hyper Text Markup Language
• Shareware: it refers to proprietary software that is provides to users
without payment on trial basis and often limited by any combination of
functionality, availability or convenience,
• Freeware: It is computer software that is available for use at no cost or for
an optional fee.
• Visual elements: lines, shapes, colors, spaces, textures, forms, values and
tones that work together to create a visual image.
• GIMP: GNU Image Manipulation Program.
• Internet: a computer network consisting of a worldwide network of
computer networks that use the TCP/IP network protocols to facilitate data
transmission and exchange.
1.10 QUESTIONS
1. List two basic programs that you need to create a website.
2. Note of website creation program.
3. Note on Image editing program.

4. List down point which will help you to create a good website.
5. Explain steps involved in website planning.
6. Explain principle of design and layout for a website in details.
7. Explain Responsive Web Design and its importance.
8. Describe how to publish your website on Internet?
9. Note on How to create a webpage?
10. Write in brief website planning steps for a ‘Good Health website’
11. Create a site map of a website for travelling agency.
Answer to check your progress questions
WYSIWYG stands for ‘What You See Is What You Get’.
Website Creation Program and Image Editing Program.
Dreamweaver offers hybrid editing, you can work completely in

WYSIWYG mode without ever seeing a bit of code or you can work
directly in the code only switching over to preview your work, or you
can work in a dual-pane environment to take advantage of WYSIWYG
and hand-coding simultaneously.
The first step in planning a successful web site is to collect information
To grab visitors’ attention provide them clear, brief and compelling
webpages.

The visitor gets an idea about the feel of the website through a
combination of colors and images on the webpages.
To get fitted into browser window perfectly major content of webpages

may often change the relative position.

By mixing type faces of different weight you can create contrast.
It is impractical because the file size of the web page would be very
huge and search engine will consider webpage as an image.
Two essential features of Web hosting packages

1. Storage space, for your website files. This is measured in megabytes
(MB) – you need at least 10MB for a simple site, and much more
for a complex one.
2. Bandwidth, which allows visitors to view your site. It’s also
measured in megabytes - the more visitors you have, the more
bandwidth you’ll need.
1.11 BIBLIOGRAPHY
• http://www.dummies.com/
• www.wikipedia.org
• www.wordpress.com
• www.smashingmagazine.com

UNIT 2 SITE DESIGN
Program Name: BSc (MGA)
Written by: Sonal Ramrao Dalvi,Srajan
Structure
2.0 Introduction
2.1 Unit Objectives
2.2 Organizing Information
2.2.1 Chunking Information
2.2.2 Hierarchy of Importance
2.2.3 Relations
2.2.4 Functions
2.3 Site Structure
2.4 Site design
2.4.1 Basic Information structures
2.5 Site Design Themes
2.6 Summary
2.7 Questions and Exercise
2.8 Bibliography
2.0 INTRODUCTION
In today’s generation daily people go online for various reasons. They
browse information from various websites. Each website has its own goal and
is designed for a specific set of visitors. Each website wishes to be famous
amongst it user. The success of the website depends upon website’s
organization of information, structure, design and theme.
This unit will give you outline of how to proceed for creation of a website.
You will learn about importance of information organizing and how it is done.
You will see construction of website and various factors you should consider
while organizing the content. All the parameters discussed in the unit show that
you need to have a balance between the various elements of the website, and
the combination of such elements defines the success of the website.

Understands the importance of organizing information on a website
Classify basic steps required for organizing the information
Describe the key points of site structure

Understand site design structure and design themes
2.2 ORGANIZING INFORMATION

A website with all precise features and designed with a latest technology but
lack of proper structure will create confusion in user’s mind. For a website to
work without any confusion, it should have firm and logical structural base.
Rational psychologists have proved with their researches that most people are
capable of holding small amount of information in short term memory. They
can read and remember only about five to seven discrete chunks of
information. It is difficult to manage and store huge amount of data on a
website, Therefore information organized in discrete units is more useful.
For creating a simple and well-structured website, you can use some
basic steps.
1. Distributing the whole content or information into simpler logical units.
2. Create a hierarchy of importance among logical units.
3. By using hierarchy, form connections among the logical units.
4. Construct a site that follows the structure of your information strictly.
5. Analyzing the visual and functional success of your system.
2.2.1 Chunking Information

World Wide Web contains a huge amount of information, presented in the
form of short reference documents that can be read randomly, especially when
it comes to technical or organizational documents. Even before the internet
came up technical writing used to be accessible in the form of short chunks of
data that can easily be located and scanned. This method of presenting
information is extremely suitable for the internet for the following reasons.
• Very few web users read long passages of text on screen. Most users
save the long document to drive or print them for more comfortable
reading.
• Small and dedicated chunks of information are suitable for web pages.
When a user clicks on a link, he supposes to find the precise
information he is searching for, without having to scroll through a lot of
irrelevant information.
• Chunking gives the website an integrated layout, which makes it
predictable and easy to read.
• Small and brief chunks of information are suitable for display within
the limits of computer screen. Long web pages require scrolling up and
down, which can puzzle readers.
While chunking the information it is important for the web designer to
remember that such chunking of information has to be done using common
sense and logic, as some contents are better presented in one logical page, even

if the page turns out to be a bit too long. An entire document on one page also
makes printing that document easier.
2.2.2 Hierarchy of Importance

It is extremely important that all the information in a website is presented in a
logical hierarchy of importance, with the most generalized information first in
the form of a home page, and successive pages and subpages containing more
exact and detailed information as you go on depth as shown in Figure 2.1.
These pages and subpages may be interlinked.
Figure 2.1 Hierarchy of importance

2.2.3 Relations
A website’s information architecture determines its usability and popularity.
User, who gets assistance from the design in accurately predicting the nature of
information that can be obtained from each section, an ambiguous structure
may mislead and confuse the user. A disappointed user may avoid visiting that
site again. Figure 2.2 is an example of poor structure.
Figure 2.2 Poor Website structure
2.2.4 Functions

Efficient website design depends on the right balance of pages and subpages.
There should not be a long and shallow list of individual content pages leading
straight from the home page as shown in Figure 2.3.
Figure 2.3 Imbalanced website

Neither should information be buried deep below multiple layers of menus and
submenus. Figure 2.3 shows bad site structures
Figure 2.4 Bad website structure

It is important to maintain a proper balance of menus and content pages.
Complex document structures may require deeper menu hierarchy, but users
should never be forced into page after page of menus if direct access is
possible.
Figure 2.5 Good Website Structure
2.3 SITE STRUCTURE

The website structure is different from the individual webpages structure. It
is made up of different entities of your website and navigation between these
entities. Basic website structure has organized in three main areas as shown in
Figure 2.5 i.e. Good website structure.
1) Home Page: This page has general information about the Website.
E.g. Information about company, Products images or any few lines of
descriptive paragraph.
2) Menu / Section: This area contains well organized different unique
features of your website.
E.g. Services offered by your website, product catalog, contact
information,
3) Submenu / Subsection: This area contains information about the unique
feature of the website or may contain any sub content in depth.
E.g. Details about what exact services you provide products
information, different addresses and other contact details.
If you choose the WWW (World Wide Web) for your website, you get
references to hypertext and hypermedia. World Wide Web is incomplete
without these two terms hypertext and hypermedia. Hypertext and hypermedia
suggests that the Web is able to distribute one of the most challenging aspects
of giving information. The Web helps in organizing information in a logical
manner. It creates an ‘easy to understand’ and interesting resource for readers.
But in your website, if you don’t have any relation among sections, then
your website is cluttered and very confusing in which you are less likely to
target your audience. If you do not have a complete, narrative or clear sense of
organizing information, then your visitors will know it soon. And most of the
visitors will select a website that is better organized. Hence, how you put
information on your website plays the most important role in its success. The
next topic will deal with the process of designing a site.

List how to organize the information for website
What is WWW?
Differentiate between balanced and imbalanced websites
Why relation is vital in webpages?
How to organize a good web structure?
2.4 SITE DESIGN

The design of a website plays a significant role. It determines the structural
outline of the website. At this initial stage of design, you are required to make
some structured and plan decisions about the site. These decisions include the
following key areas:
• Why are you doing this?
• What value will your website produce (from the investment you are
making)?
• Who is your audience?
• What do they want from you?
• How will you arrange the content, best meet the needs of your
audience.
You must be wondering as to why the above list does not mention the
graphics of the website. Graphic Design is what most people think of when
they consider web design is, i.e. cool online graphics. However, this level of
construction is much too important to decide based on what is thought ‘cool’ or
not. Rather, it should be built on how well it matches to your key areas:
Note that although the audience does notice the graphic design of a web page
right away. In fact, graphics, images and animations catch the eye of visitors
instantly, but the overall organization of the website definitely has the greatest
impact on the reader’s experience.
It is very common to see many organizations and enterprises use their
website, primarily to describe their administrative organization. This is a
common mistake which can be easily noticed in many websites. The services,
products and information, which the normal user is looking for in the website is
considered to be secondary in such websites. The users actually have to
struggle to get to know about the services and products offered by the
organization. Most of the users would be least interested in the structure of
your company or department. They would hardly care about how well
organized your department or company is. The readers would be highly
frustrated if your website appears to offer only the information related to the
organization of the company or department.
Hence, it is advised that before you start organizing the content for the
website, you must put yourself in the shoes of the target audience. You must
interacts with them and discuss about their expectations from the website.
Also, you must understand the requirements of the users. It is essential to
understand the importance of each and every chunk of information to be
uploaded on the website. Once you have a list of various chunks of
information, you must prioritize these as per the frequency of their use. You
should keep the items and services, the users want to be most prominent, on the
home page of your website.

Figure 2.6 Homepage of the Z NEWS
Figure 2.6 shows a home page of Z NEWS. It is a perfect example of how

the information should be separated and put on website. It shows various
sections based on different kind of viewer’s interest who will visit the website.
It also shows Current important news, so that in a short time span the viewer
will get more information. As you see this website is focused on the delivery of
the information rather than how the company and its organization work at
backend.
2.4.1 Basic Information Structures

There are 3 fundamental ways of structuring a website. They are as follows-
1) Sequences
This is the simplest way of organizing the information. The
sequence could be alphabetical, chronological or logical. This is most
suitable for glossaries, encyclopedia and training manuals.
2) Hierarchies
This is suitable for organizing complex information. Hierarchical
diagrams are very familiar in corporate and official life, so most users
find this structure easy to understand. User navigates to simple list of
subpages plus a link back to the home page.
3) Webs
A web like structure suitable is for users who are already aware
with the topic, but can be highly confusing to new or casual users. In
this type of site organization, web pages both in the same site, and also
external, are linked by association.
Before creating a site, it is important to make a site diagram based upon
which the entire structure of the site can be planned. The diagram should
take in to account the broad scope of the site, as well as details such as each
piece of content, interactive features, navigation etc.

Observe various websites and their structure.
Describe fundamental ways of structuring a website
What are the prerequisites of a website designing?
What are the common mistakes done by many websites?
Why graphics is not a key point in a website structure?
2.5 SITE DESIGN THEMES

All the information on a website must be governed by some principles or
factors. These factors should ensure that the information is presented
effectively on the website. Following are those parameters.
1) Goals of the information.
2) Real-world logistics of the chosen
3) Visitors of website
The above parameters would help you to organize your information on
the website Figure 2.7 plots the major themes for information delivery against
two fundamental variables. One of these variables is the linearity of the
structure of the presentation of the information. The second is length of the
contact time of a normal user.
Figure 2.7 Major Themes for Information Delivery

The website visitors, who access the content of a website comes with
various background. They have their own set of needs for which they look for
the information on the website. Some common uses of the web are most
organized and systematic. It depends on the visitors who arrive knowing what
they wish to accomplish. They hardly depend on the need for the motivation
supplied by the website. Their use of the website doesn’t depend on the
aesthetic look of the content. The viewer that knows what to seek from a
particular website proves to be more beneficial for the designer of the website.
The sites, which have such viewers, include information and news site, website
providing trainings, references or education belongs to this category.
The business intranets also have the visitors who know exactly what
they want from the website. The visitors of such sites log on to these sites with
a specific goal in their mind, when compared to the other websites. The first
time browsers must be able to spend some minimum span of time accessing the
website so that they become the regular customer of that website. Beside first
time users, the experienced users too need to be taken care of while organizing
the information of a website.
Sometimes inexperienced designers and clients put too much of focus
only on the presentation of the website.in order to make the website more
attractive and user friendly, they compromise on the other important aspects of
the website. They believe that if they constantly hit the reader between the eyes
with a huge, noisy graphics or flash animation, they would be able to sustain
the user’s attention. These designers are not always wrong in thinking so,
because sometimes this principle does work. But it works for a very short span
of time. Noisy and loud graphics and flashy animation are able to grab the
user’s attention for about 10-15 seconds only. Actually, the flash animation and
catchy images acts as ‘eye candy’ on the user’s eyes. You simply cannot build
a website on a few moments’ attention.
Till now we have discussed what makes a website boring and
complicated for most of the users. Let us now learn about the features which
can actually make a website a success amongst experienced user. A successful
website requires real and sustain engagement. It should be based on real
scenarios and examples so that a visitor is able to relate to the content easily.
You can achieve these parameters only when you offer a sophisticated visual
stimulus. The graphics and animation of the website should not put the user in
to a state of surprise. It should be relevant and make sense with the overall
theme and content of the website. A website should be structured to meet the
needs of its visitors effectively and quickly. A good structure involves the
correct combination and balance of various elements of the website. Hence, the
visual stimuli and the structure of the website are two of the most important
aspects to website themes.
Design for web based training
Websites that focus on online training are generally linear in design, keeping
the logical and chronological flow of the training process intact. Pages on such
sites should not have too many links to distract the users. It contains simple
‘Next’ and ‘Previous’ links ensure that every user sees the same presentation.

Websites for online training generally requires a log-in and forms for objective
type questions
Design for web based teaching

Teaching applications are not exactly the same as online training manuals in
the sense that the content is more sophisticated and deals with the topic in
greater depth. Although the development here might also be logical, users are
allowed to deviate from the central theme and explore other related links.
Web design for distance learning

Audiences for self-instructional learning will prefer a flexible, communicating,
nonlinear deign that allows access to a large number of topics both within the
same sites and also in the web.
Web design for reference

Reference websites allow users to visit a site, read or print what they required
and leave. There is usually no chronological or logical order to the content. A
user can simply search for whatever he requires. Some reference websites may
have a list of contents, in which case it is usually arranged in an alphabetical
order.

What are drawbacks of flashy and eye catchy graphics?
What are the important aspects of good website?
Why online training websites follows linear design in their
website?
What is the structure of web based teaching?
Why some visitors do not depend on the aesthetic look of
the content?
2.6 SUMMARY
• Before creating a website follow five basic steps.
• Dividing the large amount of information into small specific units helps
you to build webpages which are user friendly.
• Draw a tree like structure of your website as per the importance of
content. More general information is at home/ index page and then more
specific as you go in-depth.
• You should always have a proper relationship between webpages. In a
website, webpages and sub webpages should be in balanced form.

• You must give priority to the information which user seeks from your
website rather than the flashy and surprising elements. Perfect
combination of graphics and text make a well balanced website.
2.7 QUESTIONS
1) List 5 basic steps involved in organization of website.
2) Which areas of a website should be covered while deciding its structure?
3) How should a designer balance combination of text and graphics?
4) While designing a site, what are the factors a designer should consider?
5) Differentiate between balanced and imbalanced website with the help of
diagram.
6) Why chunking is important for website?
7) While making website, why we should consider the target audience and
their requirement?
8) Draw an outline structure for a construction company.
9) List down menu, submenu for a balanced website of an online
video/audio site.
10) What are advantages and disadvantages of using animated images or
content?

We can organize the information for website in following
way
1. Distributing the whole content or information into
simpler logical units.
2. Create a hierarchy of importance among logical units.
3. By using hierarchy, form connections among the logical
units.
4. Construct a site that follows the structure of your
information strictly.
5. Analyzing the visual and functional success of your
system.
WWW – World Wide Web

Balanced website is which follows proper order of hierarchy
of importance and not too long. Imbalanced is one which
content may have scattered its webpages or lengthy one site
Because relation between webpages avoids ambiguity, and
leads user to whatever he is searching for.

A good web structure consist of webpages with well-
organized levels-Home page, Menu/ Sections,
Submenu/Subsections

Observe various websites and their structure.
Sequence, hierarchy and Webs
Prerequisites of a website designing are
Organizations and enterprises use their website, primarily to
describe their administrative organization, is the most
common mistake done by many websites.
Graphic Design or flashy animations are considered as a
most important factor of web design.

The flash animation and catchy images acts as ‘eye candy’
on the user’s eyes. You simply cannot build a website on a
few moments’ attention.
Visual stimuli and the structure of the website
Online training websites follows linear design in their
website, to keep the logical and chronological flow of the
training process intact.
Web based teaching’s content is more sophisticated and
deals with the topic in greater depth.
Some visitors do not depend on the aesthetic look of the
content, because they know exactly what they want from the
website.
BIBLIOGRAPHY
1. “Web style guide” by Patrick J. Lynch and Sarah Horton
2. Wikipedia
UNIT 3 IMAGES
Program Name : BSc (MGA)
Written by: Sonal Ramrao Dalvi,
Structure
3.0 Introduction

3.1 Unit Objective
3.2 Use Images Purposefully
3.3 Avoid Animated Images
3.4 Provide Alt-text for all Relevant Images
3.5 Do Not Use Graphics Text
3.6 Provide a Full Text Description for Content Images
3.7 Provide Blank Alt-Text for Irrelevant or Redundant Images
3.8 Maintain a Catalogue of Image Content
3.9 Keep Image Dimension as Small as Possible
3.10 Use Thumbnails for Large Images
3.11 Summary
3.12 Key Terms
3.13 Questions and Exercises
3.14 Bibliography
3.0 INTRODUCTION
Preparing printed images is quite expensive than creating web images,
Even web images are easy to create. Like printed images, webpages also have
their disadvantages. An image file is often larger than a text file used in
webpage. It also takes more time to download. Sometimes the images are not
compatible with the user’s system and hence these do not appear on the
webpage. Images are used in webpages to seek the attention of a user but
sometimes an image on a webpage can be distracting or annoying too. Mostly
images are used to convey vital information. If users are unable to see these
images, which are an important part of the information presented, they may
miss the message.
Images are not unnecessary to combine. In fact some concepts are
easier to understand with the help of images. Images help in highlighting the
text. For example if assembly instructions are represented through graphics; it
becomes easier for the reader to understand the message. The graphic depiction
of each step visually confirms that the reader is on the right track. When you
add a photograph of a product along with the product description, the users are
able to know far more about the product. Just a text description of the product
is that appealing and useful. To understand the importance of an image let us
take a look at the webpage in Figure 3.1.

Figure 3.1 Flipkart Website
As shown in figure 3.1, you can see that the Flipkart site provides the
product images along with the textual description about the product. This
example shows how an image communicates information about the visuals
characteristics as an aspect of the product.
Thought images add for better understanding, these do affect the
accessibility. These affects accessibility when these are used as sole mean of
conveying information on any topic or product. Here sole means of conveying
information refers to only the images used to represent the information without
any textual description. When content is presented as an image it become
difficult for the user who unable to see these images to understand the
information at all. It happens because users are unable to access the image on
their systems. And they miss not only the images but the complete information.
User who cannot see the images are not able to access the content as well.
Those with the some technical limitations also may not have access to images.
These limitations could be low bandwidth or older browser software.
While designing a website, images are the vital factors of the website,
as it gives the aesthetic look for website. Images are added to a page to grasp
attention. Mostly images are used to convey important information and for
better understanding of webpage. Cost of using a webpage is much less than
that of a printed image and preparation of web images is easier too.
As a designer, you must use images appropriately. While deciding on
the text-images ratio for a webpage, you must decide on the images in such a
way that does not result in the exclusion of some users. Images must be added
to a webpage as per the global requirements of users and not for a specific set
of user.
In the next topic, you will learn about using images purposefully
in a website.

Identify the purpose of images
Identify the role of graphics text in an image
Find ways to provide alternate text to images
Identify various characteristics of images
3.2 USE IMAGES PURPOSEFULLY

You can convey the information on a webpage in various types. Some
concepts require graphical representation of the information for better and easy
understanding for the user. As shown in Figure 3.2 a company’s profit ratio is
described as a table as well as graphical format. From the graph user will
quickly analyze the result.
Year Profit
2011 25%
2012 56%
2013 38%
2014 63%
a) Information in tabular format
2015 72% b) Graphical format
Figure 3.2
Similarly sometimes an actual image of the product is much more

message conveying than the description, a map of the venue than the only
address, graphical assembling of the machine parts than the printed manual and
much more.
Sometimes images are also used as a part of the user interface,
such as buttons, arrows, and icons. These images form an essential part of the
website as these help the user to navigate through the website. Images can also
be used to create a visual identity for a website, something similar to a logo of
an organization. In fact each of the images has a unique purpose. Some
common purposes are listed below
• Convey information
• Establish situation
• Navigate the user

• Create a brand or identity
Apart from the listed above, there could be some other uses also include
images on a web page. As web designers are aware that the web is a visual medium
to attract and engage user, they try to make it decorative by adding more interesting
images. But sometimes in order to make webpage with more images, designers fail
to convey the exact purpose of adding that image. They misuse a powerful
communication device by adding such images. To understand the logic of adding
images to any page, remember that image first draw attention of the eye. Once seen
or observed by the need to be interpreted eye, images to be interpreted as a second
step. If you look at the webpage with text and images on it, by default your attention
would go first to the images on the webpage. After that you will try to interpret the
notion of the images.
Images on any webpage are effective only when these are used purposefully
and their purpose is easily conveyed to the users. Avoid adding content irrelevant
images to a webpage. For example, if you are designing a webpage that provides
information regarding any software set-up, then you should not add image of happy
people using computer. The image is not appropriate in the context of the
information conveyed in the webpage. Instead, you should include useful images
which are accordance with the context of the software set-up information. You can
use the images that demonstrate the description of the set-up instructions.
Let us look at Figure 3.3 below to understand the appropriateness of the
images on webpage.
Figure 3.3 Home page of Kesari tours

As shown in Figure, webpage of Kesari Tours. In this webpage you will see
that images are put purposefully to let the user know which place or type of tour
they are trying to find. By putting such content related images help users, make them
easy to navigate ahead and also make webpage more comprehensive.
3.3 AVOID ANIMATED IMAGES

In the last topic you learnt that images are a powerful force in
commanding the attention of the user. Images catch the attention of the user
quicker than the content of the webpage. However moving images are much
more powerful than static once. It is nearly impossible for the user to ignore an
element on a page that is constantly moving or blinking. These type of moving
images are called ‘animation’.
Animations are generally seen as source of irritation on web
pages because these make it difficult for the users to focus on the primary
content of the web page. In some severe cases animations are more than just
annoyance. These not only cause discomfort but some medical consequences
as well. Some of the medical consequences because of animations could be
migraines or attacks. To understand and consider the impact of animated or
moving images, you must study an image carefully before actually using it in
your webpage. Even static images that only appear to be animated can also act
as a trigger. For example images with closely spaced strips seem to vibrate.
An animation should not be placed alongside the primary
contains of a webpage. The animation should be added on a separate page.
When it appears on a separate page, it provides the user with the choice of
viewing it or not. Also you must decide the timing of the animations carefully.
The animation must not begin playing right when the page gets loaded. Instead
you should provide the control to start and stop the animation for the users. The
users can decide when to play animation as per their own convenience. You
should also choose the background of the webpage carefully. Stripped and
patterned backgrounds give animated appearance, so you must avoid such
background in your webpages.

List some common purposes of images on a webpage
Why to avoid ambiguous images?
Why to avoid animated images?
Where to store the animated images in website?
Why users need to provide the control over animation?

3.4 PROVIDE ALT-TEXT FOR ALL RELEVENT
IMAGES
Many HTML structures that the users use for creating their webpages
allow the designers to provide information in various formats. The users can
use these formats using different methods. For example for the users who
cannot see colors on the webpage you can underline the hyperlink added to the
webpage. And for the users who cannot see images on the webpage, you can
add alternate text to the images. Alternate text (Alt-text) appears along with the
image when the mouse is rolled over it.
Alt attribute of the <img> tag contains description of the image.
When an image is essential to the content and functioning of the webpage, the
user who cannot view the visual images can read the text description provided
in the alt attribute. Take an example in which text graphic with alt-text is the
same as the text displayed in the graphics. The visual user will be able to read
the text provided along the text graphic. The nonvisual user will have the
software that reads the text in the alt attribute. Nonvisual users can use
websites with images as long as the equivalent alt-text is provided along the
images. Figure 3.4 displays a webpage of M.P.S.C.
Figure 3.4 M.P.S.C. Website Homepage

This website provides descriptive alt-text for its image links. The image
links makes it easier for users who do not have access to images. Such users
can still use the site as shown in Figure 3.5

Figure 3.5 M.P.S.C. Homepage with alt-text
3.5 DO NOT USE GRAPHICS TEXT

When the alt-text is not added to images, it becomes difficult for the
users who cannot view the images. Also if the images are used on webpages
for navigation purpose, it causes difficulty for the non-visual users as well, for
the users are not able to download those images. In such cases if the alt-text is
missing and not provided along with the images the users will feel stuck. The
screen reader software depend on on the alt-text to communicate the image
information to users. And if the alt-text is missing then the screen reader
software would not have anything to read as description of the image and it
would not be able to interpret the image for the user.
If no alt-text is provided along with the image the only information the
screen reader software would be able to understand, is that the image on the
page displays the name of the file. For example if you have <img src
=”photo.jpg”> without any alt-text in your webpage. In this case the screen
reader software would display only the name of the image file i.e. ‘photo.jpg’.
This conveys the wrong information to the users. It may confuse the both,
visual and non-visual users.
Alt-text also has some important features. For instance the
number of words used as description in the alt-text must be in accordance with
the image it is used to explain. If an image is worth a thousand words then a
short description in the alt attribute would be a poor substitute. However such a
description can provide enough information to assure web access to non-visual
users. In case you are using images that are part of the user interface then you
must provide alternate text that provides equivalent function. By doing so the
non-visual users would not feel stuck. They would successfully be able to
navigate through the interface with the help of the description provided in the
alternate text. In other word the alt-text for the Times of India banner should be
‘Times of India banner’. Also note that when an image is a part of the content

displayed on the webpage, alt-text for the image must describe the image. For
example ‘photograph of sunset’, ‘graph of net gains’.
Not only should the images have alternate text, the maps must
also have it. Image maps should have alt-text for all the active areas. Even the
form buttons should have alt-text. All these are examples that must have alt-
text. Note that background images can not contain alt-text. So ensure that the
background images do not required any text to be added.
3.6 PROVIDE A FULL TEXT DESCRIPTION FOR

CONTENT IMAGES
If you had to analyze the use of alt-text for content images then you
would observe that the alt-text cannot be best used for these the best that alt-
text can do for content images is to provide a brief description of the format
and subject of the image. In order to provide complete information conveyed
through an image to a non-visual user we need to use other methods.
LONGDESC attribute of the <img> tag is the method that can
be best used to provide the long description of content images. Though the
LONGDESC attribute, HTML allows you to provide the full description of
image content. LONGDESC is file address pointing to a file that contains a text
description of the image. When non-visual users browse through an image with
lined text description, they download the file linked, read the description of the
image and then return to the original page on which the file was linked.
You have another method for providing a full description of the
image is to provide image captions. Figure 3.6 illustrates the use of image
caption. This option of image captions is beneficial for all types of users, visual
and non-visuals. It proves to be beneficial irrespective of the type of users
because the text may prove helpful in comprehending the image. If you have an
image caption that explains the contents of a graph or chart, it will allow the
non-visual users to access the information through the image caption. And it
would help the visual users to understand the image better.

Figure 3.6 Images are with Captions
3.7 PROVIDE BLANK ALT-TEXT FOR

IRRELAVENT OR REDUNDANT IMAGES
As you must have understood by now that alt-text is a way of
communicating relevant information content in an images to people who
cannot access these images. However, as a designer of the website you may
notice that not all images are relevant for non-visual users. Whenever you want
to provide images that are relevant only via a visual context, you can provide a
blank alt-text. A blank alt-text can be added in the format of ‘alt=’’’’’. The
non-visual users do not have to worry with irrelevant content if the blank alt-
text is provided. The screen reader software understands empty alt-text and
recognizes images that are irrelevant. Therefore it does not communicate any
information about the image to the user.
For example some of the elements of the website such as
spacers, arrows or bullets are added to the pages only for visual emphasis.
These elements need no explanations. The users who use screen reader
software do not need to know that black bullets on the interface are there to get
a list of the items. When you use blank alt-text or such images the screen
reader software skips there images, also the images that are put alongside the
text and provide visual emphasis or clarification need not to be communicate to
the non-visual users. For example the text links are often pair with icons. These
icons help the users to quickly identify the purpose of the links. Example of
these icons could be an arrow next to ‘Next Page’ link or icons of email inbox
or outbox along the ‘Inbox’ and ‘Outbox’ link as shown in Figure 3.7. In these
examples, the button text links itself is able to convey its function to the non-
visual users. Generally the images used to highlight the text links prove to be

redundant. These only provide functional equivalency through alt-text, which
actually not required.
Figure 3.7 Icons of Inbox and Outbox
Figure 3.8 Blank alt-text Icons of Inbox and Outbox
As shown in Figure 3.8, where the alt-text is redundant for inbox and outbox
images, they are provided with blank alt-text, as their purpose is taken care of
by the button text link.
Hence it is always better to use a blank alt-text on the web page rather than
providing a redundant text link.
3.8 MAINTAIN A CATALOUGE OF IMAGE

CONTENT
As a Web-designer, you are required to keep a track of many details of

the images that you use in your websites. Publishing web images for web pages
includes both visible and non-visible properties of the images. These properties
include alt-text and long descriptions. You must maintain a sort of catalogue of
the given image content. Such catalogue ensures quality and consistency.
Actually when given image catalogue is combined as part of the web design
process, the task of composting alt-text becomes a considered part of providing
image content. The catalogue can be a source for all alt-text to be used for
multiple images across the website.
3.9 KEEP IMAGE DIAMENTIONS AS SMALL AS

POSSIBLE
If you look at the images from a data perspective, you will realize that
these are less efficient than the text. The text of a webpage is of more
importance than the image.it also involves the aspect of space usage. A photo

graph of a toaster would require more disc space to store than a paragraph of
text that describes the toaster. Also, the photograph would need more
bandwidth to be delivered as compared to the text description. However a
visual user would definitely find it much more efficient to learn about the
toaster through its image.an image can prove to be more beneficial at
conveying what a toaster look like. Images are used because these are effective
and powerful enough to communicate the message and information. You must
consider the effective use of images before adding them on to the webpage.
Your goal must be to capitalize on the advantage of the images used. The
images on the webpages must not make the user feel over burdened with
information.
Web images are more demanding. These require more data
space than text. Most commonly, the web images are stored in the format of
bitmap images. Unlike text and vector graphics, bitmap images are not stored
intelligently. Therefore bitmap images require more data. To make for a large
file size, web bitmap images such as GIF, JPEG and PNG use different
compression schemes. These schemes help in reducing the size of the files.
With this reduced size images are able to traverse the network more quickly.
Also images are less flexible that text. Text can reflow to fit into
various display devices. Images cannot do that. These suggest that a user
viewing an image of 600px width on a 320px wide display would not able to
view the image at once. In order to use the images effectively, you must keep
the dimensions of the images as small as possible. When compared on the basis
of file size and display speed, small images are better than the larger one. Small
images even work better on small display devices. Figure 3.8 illustrates how
compression reduces the file size. Not only the file size it also reduces the
image quality.
High Quality 600 x 540 size-105 kb Low Quality 600 x 540 size-20 kb
Figure 3.9 Image Compression
In order to maintain quality of the image you can use an alternate

method. This alternate method is that of reducing the image dimension as
shown in Figure 3.10. Remember that smaller images make smaller files.
Smaller images are also better for different displays.

High Quality 600 x 540 size-105 kb High Quality 300 x 270 size-58 kb
Figure 3.10 Reduced Image Dimension
When saving images you must use the image format that best
suits the image. GIFs and PNG’s work well for graphics and illustrations.
JEPGs are better for photograph. You can compress an image as much as
possible to reduce the size of the file when compressing the image without
overly degrading the image quality. One of the best methods to reduce the file
size of a GIF image is to reduce the number of colors in the image. Reducing
the number of colors used in the image helps in reducing the size of the image
file.
(a) (b) (c)

Fig 3.11 GIF Images
(a) GIF 400 x 400, 256 colors size 98kb
(b) GIF 400 x 400, 64 colors size 58kb
(c) GIF 400 x 400, 16 colors size 35kb
Figure 3.11 illustrates how you can reduce the number of colors in the
GIF image to reduce the size of the file. Reducing the number of colors has
only little effect on the quality of the image. It is merely noticeable.

3.10 USE THUMBNAILS FOR LARGE IMAGES
Every time you cannot use small images. Sometimes you also need big
images. For example website contains information regarding various products
offered by a brand. In this case the image must be able to display details that
are important for the shopper. Color and size are two important features that
can enable shoppers to decide if they would like to buy that product or not.
Another reason where big images are required is printing. Images for printing
purpose must be large enough to be used in the printed publications. Content
images on museum or teaching sites must also be large. Content images must
be able to represent the content of the image. However given the requirement
of the large images and the impact these have on the user, these must not be
placed on the main page of the website. The main reason for avoiding large
images on the home pages is that it might take longer for them to download.
And if the users get frustrated with the downloading time they can simply
ignore the site completely. They would not want to wait for the images to get
downloaded in order to navigate through the site. Instead you must provide
access to large images through a thumbnail or text links.

Which image format is suitable for photographs?
Why to use color reduced images?
What is the need of maintaining a catalogue of image content?
What is the use of Alt-text of an image?
How to provide full description of content images?
What is the purpose of using thumbnail images?
SUMMARY
• Web images are quite easy to prepare than printed images
• A Website is composed of various contents; some of them required
supportive graphics illustration, as proper graphic illustration conveys tricky
information in easy way. So use images purposefully to make website more user-
friendly.
• Images should be related to the content; else ambiguous images may
lead to confusion of the users.
• Image files take more data space than text file; hence use them
appropriately as per need.
• Animated images may distract the user’s attention from the main
content or may slow down the webpage. Hence try to avoid using it or give animation
control in user’s hand.
• All relevant images are provided with the alt-text (alternate text)
property, so that it will help non-visual users and users who are unable to access the
images on their system to understand the concepts behind it.

• The content images of a websites needs full text description to be
provided. An image which requires elaborate description should not be assigned an
alt-text as it does not serve the purpose of describing loaded content images.
• All redundant and irrelevant images should have blank alt-text, as
these do not convey any message to the user.
• The images used on the website catalogued frequently. Such
cataloguing ensures quality and consistency in the website.
• The image should have smaller dimensions. Colors and size may be
reduced to make content images lighter.
• In case using large image is important, then this should be made up
of thumbnails.
3.12 KEY TERMS

• Graphics : Illustrations with pictures.
• Animation : Images in motion.
• Caption : Heading or short description.
• Redundant : That which repeats frequently.
• GIF : Graphic Interchange Format.
• PNG : Portable Network Graphics.
• JPEG : Joint Photographic Expert Group
3.13 END QUESTIONS:

1. How to provide alternate text for content images?
2. Discuss the need for a full text description for images?
3. How to avoid confusion of a user who is not able to see the
image?
4. What are the uses of the screen reader software?
5. How do we decide the size of image dimensions?
6. Why are large images not used on websites?
7. Why you should avoid animated images?
8. Why you should provide blank alt-text for irrelevant or
redundant images?
9. Why you should keep image dimensions as small as possible?
10. Why you should use thumbnail for large images?

To convey more information about text, to give graphical instruction about
any product assembly.
They mislead the user

They are annoying or distracting the user.
On database
Because user may stop the animation if that is distracting.

For photographs jpg is suitable.
They download faster.
Cataloguing ensures quality and consistency in the website.
It will help non-visual users and users who are unable to access
the images on their system to understand the concepts behind it.
By using LONGDESC attribute.
Instead of larger images thumbnails are used while loading the
webpage, as large images might take longer download time.
3.13 BIBLIOGRAPHY
www.wikipdia.com
www.kesari.in
www.nasa.gov
www.flipkart.com
Official website of M.P.S.C.
UNIT 4 ISSUES IN WEBSITE DESIGNING

Structure
4.0 Introduction
4.1 Unit Objective
4.2 Website Design
4.2.1 Design elements
4.2.2 Other Elements
4.2.3 Fixed Layout and Liquid Layout
4.2.4 Flash
4.2.5 Tables and CSS

4.2.6 Form and Function
4.3 Issues in Web Designing
4.3.1 Web usability
4.3.2 Speed
4.4 Accessible Web Design
4.4.1 Examples of Web accessibility
4.5 Website Planning
4.6 Summary
4.7 Questions and Exercise
4.8 Bibliography
4.0 INTRODUCTION
Web design is complex because it functions to enable the interface
between humans and computers and to organize information so that objectives
of a web designer are met. There are some points while interacting with a
website that the web designer cannot control, such as the impact of web design
is affected by the size of the screen, the type of browser and so on. All of
which determine the appearance of the web page.
Yet, over the years, some basic design prototypes for websites have
developed, framed by some notable experts. According to Jakob Nielsen of the
UK design firm spoke,’ the design elements should always be the same, but the
way they are composed should be different because the sites are doing different
things. If you think about cars, all cars have the accelerator to the right of the
brake pedal. This does not imply that all cars are identical, but the basic
elements you need to operate the device, follow some conventions’. Similarly,
a logo should always appear on the top left corner and hypertext links should
be underlines in blue.
One compelling element for web design is the role of time in
people’s behavior. People will abandon a website if they get lost or if the site is
difficult to navigate. They will not waste time trying to learn an interface. Fast-
loading pages make web user happy. People do not have patience to wait for
long foe a page to load. The practical guide on the speed of web loading is
thirty seconds. Other people suggests that if we hold our breath and wait until
we need to grasp for air, that period of time is the longest delay that web user
can tolerate. In order to build a fast loading web page, reduce the amount of
data and size of graphics.
4.1 UNIT OBJECTIVE

After going through this unit, you will be able to:
• Define various components of a website design.
• Identify issues related to website design
• Describe hurdles in web accessibility and how to overcome them

• Describe steps involved in website planning
4.2 WEBSITE DESIGN

4.2.1 Design Elements
Some of the important elements in designing, a good website have been
discussed in detail in the succeeding paragraphs. These are:
a) Presentation:
The presentation of a website consists of text, animations, images and
links as well as audio/ video elements. The homepage of a website is like a
cover of magazine. It is the place to convey important basic message to web
users. It is important to keep its content to a minimum on the homepage so that
users do not need to scroll through several pages to view it. Therefore it is
better to chunk information and use meaningful links to display the major
components of a website.
b) Navigation:
Navigation refers to the text and graphic links between pages that
indicate sequencing between webpages. Navigation facilitates movement from
one webpage to another and so plays a crucial role in getting site visitors to
view more than just the homepage. If navigation choices are unclear, visitors
may quickly leave to visit similar sites with easier navigation.
c) Visual appeal:
Visual appeal defines the aesthetics of a website. The colors, text styles
and graphics create its overall visual impression. It is very difficult to create a
website that is both effective functionally and pleasing aesthetically. The field
of web design has mostly focused on the technical and functional aspects of the
construction of a website. There is a need for models that weigh the analysis of
the visual and aesthetic aspects against the functional and technical aspects of
web design.
d) Interactivity:
Interactivity determines the communication flow between users and the
website, promoting the exchange of information between the web users and the
virtual company. Effective communication develops strong relationships,
which is especially important for commercial websites in which interactivity
replaces human representatives. A website needs to communicate company’s
message clearly in a way that fits in with the overall corporate image. Increased
level of interactivity on a website, have positive effects on the user’s perceived
satisfaction, effectiveness, efficiency, value and overall attitude towards a
website. Web content management is thus vital for success and application of
computers. To help ensure success of users’ interactions with a system,
preparation of content and its presentation to users must take into account:
• What information needs to be extracted?
• The way in which this information should be stored and organized
• The methods for retrieving the information

• How the information should be displayed.
e) Personalization:
Most people use the terms customization and personalization
interchangeably, but there is an important difference between two. One point of
view is that customization occurs when users have direct control on the website
by using an internal search to produce the desired results. Personalization
means that virtual companies provide individualized pages tailored to the
users’ specific needs. There are different ways to implement personalization.
Some websites offer a verity of options for users to choose from and other
personalize the website for their customers. Amazon.com, for example,
provides recommendations to its customers based on their prior behavior.
Personalization can markedly improve customer loyalty. A survey by Privacy
& American Business shows that a majority of internet users are willing to
provide their personal information and like to receive personalized commercial
information if they are given the choice. However as with nearly all aspects of
web design, it is dangerous to generalize. Popular personalization features in
one e-commerce environment may not be effective or useful for other e-
commerce domains.
4.2.2 Other Elements
When it comes to designing a website, there are various other aspects that
have to be kept in mind. While a non- commercial website can afford a lot of
flexibility in design, depending on its target readers, a commercial website has
to be built with a few design aspects in mind. They are as follows:
• The content on the site should focus on what the site is about and
should only contain relevant information on what visitors to such a site
would look for.
• The navigation should be simple and user friendly with visitors having
immediate access to the information they are looking for.
• The website should have a professional look and have consistency in
terms of graphics and font.
• It is important that appropriate keywords are used so that the site can
easily be found by search engines and advertising media.
The first page of a website is known as the homepage. It may often start
with a splash screen or a Flash intro, although nowadays that is discouraged.
Each page in a site has its own URL and is searchable. Once a website is
completed, it is uploaded by an FTP (File Transfer Protocol) client. After
upload the owner can submit his site to search engines such as Google or
Yahoo to increase hits.
4.3.3 Fixed Layout and Liquid Layout
A website can have a fixed or liquid layout. Some designers prefer a fixed
design to the website, regardless of what browser it opens in. For such a
website, the width of the page, and also the text and graphics, stay the same in
all browsers. This can be done by specifying width settings in the html table or
in the CSS. Some other designers like to leave the width of the page flexible,

so it can flow to take up the width of the entire screen for different browsers
and resolutions. A designer may also aloe the design to flow between a
minimum and maximum width.
4.3.4 Flash
Adobe flash is an animation and application development software and
enables the delivery of multimedia, dynamic content and interactive
applications over the web. The Flash format is not as versatile as the html
format as it requires a separate plug in to be installed in the computer. The
greatest advantage with Flash is that it enables visually pleasing design, it can
create applications that would otherwise not have been possible over the
internet and that it can use embedded fonts. Among its disadvantages is the fact
that Flash websites are often poorly designed, can be confusing to the user,
take time to load and till recently, and were not recognized by search engine.
4.3.5 Tables and CSS
Initially, web pages were designed with tables. Later with the development
of more advanced browsers, cascading style sheets [CSS] came to be used.
CSS is mostly used with HTML and XHTML. It enables layout of a page
without dependence on tables, so that HTML can be utilized for the content
alone. However, even today not all browsers are capable of recognizing CSS to
its fullest extent.
4.3.6 Form and Function
It is often a compromise to decide between a good design and good
functionality such as optimization of search engines. Both are important in
attracting, and keeping traffic. A designer should also ensure that the design
does not impede usability. Too many graphics on the page can reduce
download times and may leave the visitor frustrated.
4.3 ISSUES IN WEB DESIGNING

In its origins and continued rapid expansion and development, the WWW
is essentially an open environment. It is global in nature and so no regulatory
bodies can enforce rules about web content, information distribution or
security. It is left to the individual user to solve the threats posed by virus
attack, pop ups, especially those with adult content and other inappropriate
banner advertisements. In a dynamic environment, anti-virus software struggles
to catch up with virus attack. Educated web users who are security conscious
update anti-virus definitions and install security patches frequently to protect
their systems from attack.
There are no social norms on the web. Other forms of human culture
have laws regulations and rules to guide people’s behavior, but the virtual
world has not yet developed its cultural norms to encourage a healthy web
environment. Education in internet usage cannot focus only on technical but
must deal with the issues of decent, legal and appropriate web behavior.
However there will, probably, always be a tension between the profound
freedom available by accessing the internet and society’s needs for laws and
regulations.
4.3.1 Web usability

Usability measures the ease with which a user can learn to operate, prepare
inputs for and interpret outputs of a system or component. When we extends
this concepts to the web, web usability refers to how easily users of a website
can achieve whatever it is they want from the website. There is a difference
between usability and aesthetics. Jakob Nielsen (An expert on web
development) distinguishes between look and feel: feel is the experience of
navigating the site and he argues that the site organization should be user
friendly. He has developed five dimensions of usability.
1) Learnability: how easy is it for users to accomplish basic tasks during
their first visit?
2) Efficiency: once users have learned the design, how quickly can they
perform tasks?
3) Memorability: when users return to the design after a period of not using
it, how easily can they reestablished proficiency?
4) Errors: how many errors do users make, how severe are those errors and
how easily can they recover from those errors?
5) Satisfaction: how pleasant is it to use the design?
Usability is a concern for marketers because of its potential impact on
marketing metrics such as conversion rates that affect profitability. The user
interface of a site determines the ease of navigating through its contents. Web
features designed to enhance the user’s web experience are considered to
improve usability.
Until recently, measuring ease of use was entirely the responsibility of
specialist. Usability specialists within companies or web development agencies
perform usability tests to observe users browsing experience and discover
usability problems. The results of these tests provide feedbacks and
suggestions for a better design. Multiple usability tests with different groups of
users help developers to get complete usability information of a website. With
advancement in software tools, however, some usability tasks can be
automated, including the assessment of downloading time and the
identification of broken links. But software tools cannot replace observation for
some tasks. Tools cannot detect the subjective measurements of a website such
as quality of content, ease of learning and ease of use.
Cultural differences are of particular significance on the internet
because online information is accessible to anybody. Designing a global
website means considering the national differences and providing multi-
language access. E-commerce companies must take into account the symbols,
texts, graphics used on the website that could be confusing or may even be
offensive to international web users.
Cultural differences and the effects of demographic factors on web
usability are other areas in need of study. Practitioners suggest that periodic
user testing is an important element in developing and maintain a user friendly
website, but formal usability tests are often expensive and time consuming. A
quick checklist of usability with a few users can give web designers insightful
ideas for improvement.

Such a usability checklist focuses on accessibility, navigation and
presentation. The instruments measure the tone and clarity of a website.
Accessibility of a website means it loads a tolerable speed. It can also refer to
accessibility for users with physical impairments. A website’s design should
include audio effects, to help blind or visually impaired users understand a
webpage. One of the easiest and most effective techniques for easing blind
user’s navigation is to tell them in advance what will be on the screen. It also
considered a thoughtful practice to display narratives along with graphics to aid
incomprehension of the concepts. White space and ALT tags can be used in the
design of a website to visual strengthen it. Web designers should also take into
an account users with other physical impairments in their designs. For
example people with impaired motion need larger links, graphics and texts to
enable site navigation.
4.3.2 Speed
Background images often increase the load speed of a web page. So, in
designing a website, keep the background images small to reduce the chance
that users will abandon the website. Research suggests that long load times
have a measurable negative impact on reader’s perception of a website’s
organization and quality of content. Graphics-intensive pages are more likely
to be perceived as poor in quality than pages that are text heavy.
The Forrester research (http:www.forrester.com) poll on online
households surveyed participant on website characteristics that would drive a
repeat visit. Content, ease of use, quick downloading and frequent updates are
important factors. All other factors, including incentives, favorite brands and
cutting-edge technology, were ranked as of low importance in attracting more
visitors. Quality of content is inherently a subjective measure. But download
speed and frequency of updates can be measured in an automated fashion.

List down the website design elements
Difference between fixed and liquid layout
What is CSS?
List down five dimensions of usability
How to increase the speed of a website?
4.4 ACCESSIBLE WEBSITE

The Web is basically designed to work for all kinds of people, whatever
their software, hardware, language, culture, location, or physical or
psychological ability. When the Web meets this goal, it is accessible to people
with a various range of hearing, movement, sight and mental ability.
Thus the impact of such disability is completely changed on the Web
because the Web helps to communicate and to interact with those many people,
who face hurdles in the physical world. However, when websites, web
technologies, or web tools are poorly designed, they can create barriers that
exclude people from using the Web.

The task of the Web Accessibility Initiative (WAI) is to lead the Web to
its full potential to be available, allowing people with disabilities to contribute
equally on the Web.
It is necessary that the Web be accessible in order to provide equal
access and equal chance to people with various abilities. Actually, the UN
Agreement on the Rights of Persons with Disabilities identifies access to
information and communications technologies, including the Web, as a basic
human right.
Accessibility supports social addition for people with disabilities as
well as others, such as adult people, people in country areas, and people in
emerging countries. Case studies show that accessible websites have better
search results, reduced maintenance costs, and increased audience reach,
among other benefits.
4.4.1 Examples of Web Accessibility

Well-designed websites and web tools can be used by people with
disabilities. Below are just a few examples of barriers faced by people having
disabilities and how to resolve them for better accessibility.
4.4.2 Alternative Text for Images
Alt text is the typical example. Images should include equivalent

alternative text in the markup/code.
For images without alt-text, the image information is inaccessible to people
who unable to view the image or if the image file is missing and use screen
reader software that reads aloud the information on a page, including the alt
text for the visual image.
a) Alt-text for an image
b) Image in browser c) Image is missing

Figure 4.1
When equivalent alt-text is provided as shown in Figure 4.1, the
information is available to everyone to people who are blind, as well as to
people who turned off images on their mobile phone to minimize the
bandwidth charges or to speed download, and others. It's also accessible to

technologies that cannot see the image, such as search engines, which uses the
alternate text for their search operation.
4.4.3 Keyboard Input
Few people, such as older users cannot use mouse due to their limited fine
motor control. An accessible website does not depend on the mouse
functioning; it offers all functionality via a keyboard. Then people with
disabilities can use assistive technologies that mimic the keyboard, such as
speech input.
4.4.4 Transcripts for Podcasts

As images are inaccessible to the blind people, audio files are unavailable
to people who cannot hear or deaf. By providing a text transcript / copy as
shown in Figure 4.2, makes the audio information accessible to people who are
deaf or hard of hearing, as well as to search engines and other technologies that
can't hear.
Figure 4.2 Podcast Transcript

It's easy and relatively low-priced for website designers to provide
transcripts for podcasts and audio files. There are also transcription facilities
that create text transcripts in HTML format.
4.4.5 Make Your Website and Web Tools Accessible

Most of the basics of accessibility are even easier and cheap than providing
transcripts. However, the proper techniques are poorly integrated into some
web tools, education, and development processes. If you are new to
accessibility, it takes some time and effort to learn the basic issues and
solutions. A starting place is the Introduction to Web Accessibility. By using
authoring tools that support accessibility makes it easier for website
developers. Browsers also play a role in accessibility. Essential Components of
Web Accessibility explains the relationships between the different components
of web development and interaction. Accessibility is essential for developers
and organizations that want to create high quality websites and web tools, and
not exclude people from using their products and services.

4.5 WEBSITE PLANNING
Creating a website without a planning is like erecting a structure without
blueprints. Website should be responsive and easy for the user to operate.
Planning your website for the future will give you clear direction as well as
check for any flaws. If you are a web designer then following points will help
you and your client to organization your website properly.
1. Collect Information and Set Objective:
The first step in planning an effective web site is to collect

information. There are many things need to be taken into consideration
while site is created. The first thing you have to decide is what is the
objective your website? Ask questions such as - Is it for marketing of
your business? To show your talent or to give information of
something? Your objective should focus on the basic requirements of
your users and how your website will accomplish them. It’s very
important to discover your website’s objective. Secondly who is your
target audience? Just as well began is half done; you should figure out
how many visitors do you expect per day? How much revenue you
want to generate at the year end? Set measurable, precise goals for your
website those are in line with your advertising goals. It will help you for
your future modification or up gradation of the website.
2. Make financial planning for website:
Though you’re a reputable or a new in business, you have to always

establish a financial plan for your website payments. This will perhaps
contain capitals for web design, encoding, and web hosting .Study the
market by spending around and referring with experts. Don’t trade
yourself short by relating prices alone. What you save in money you
may later pay for with a boring site and lots of headaches. Always
choose experienced, understanding team members.
3. Give responsible roles to team members:
Gather the team of people who will be functioning on the website.

Your team may involve:
• Business investors ( such as vendor, promotion manager)

• Web designer
• Content writer and/or editor
• HTML/CSS expert
• Graphic designer
Let everyone in your team knows their role and what is expected of
them, and they should stay in touch of targets and new improvements.
4. Content of a site :

Management of content is a vital part of the website planning.
Well-formed content reflects the genuineness of any website. Content is
mainly anything that gives your visitors information. It should be
specific, logical, visitor’s need oriented and easy to understand by
layman visitor.
It is always better to conduct a thorough research before uploading

content on your website. Since content is such a vital feature of a
website, get assistance if you want it. Get help from an author who is
skilled with writing for the web, and spend some money for
professional looking images which will support you content.
5. Organization:
From the all collected information and the resolved content, finalize
the structure or sitemap of your website. How many webpages you’ll be
using and what topic each page will have. How will you move from one
page to another or how information flow of your website goes?
Organize all webpages and their subpages if needed. Interlink all
webpages in such a way that user must get required information in
minimum clicks. Make your navigation easy to understand and easy to
find. Research shows that most users expect website navigation to be
vertical and centered at the top of the page.
6. Create a Prototype:
Prototype of website or also known as a wireframe is essentially the

framework of your website. This is typically an image of what the final
website design will look like. A website designed for youths will be
much different than one meant for a commercial organization. As part
of the design phase, it is also important to combine elements such as the
logo or colors schemes to reinforce the identity of your company on the
website. Usually created in Photoshop or Fireworks, you don’t have to
put too much detail into your mock-up. Use placeholder text to fill
pages, and don’t worry about details. This is just to give everyone a hint
of what the website will look like.
7. Development:
A good website design includes both usability and aesthetics. An

unpleasant website will drive away visitors. The developmental stage is
the point where the web site itself is created. At this time, you will take
all of the individual graphic elements from the prototype and use them
to create the actual, well-designed site. Keep in mind some basic
concepts of usability as you go:
1. Use an easy-to-read font format for blocks of text. Choose

contrast background and text color.

2. Make sure your website fits the screen of any type of gadget.
Use responsive design to make your website one that adjusts to
all screen sizes.( e.g. mobile phones, tablets or computer screen)
3. Create the company logo and tag in such way that they will look
prominent on the page.
4. Content of the website should be light so that it loads quickly.
5. Keep styles and colors constant across the website.
6. Make copy clear and concise, and put important features above
the fold. (e.g. sign-up form, new arrivals, current headline)
Make notes about what to take in the style sheet as you design, as
you want to keep style document and function coding separate. This is
essential, to obey with web standards, as well as to make it easier to
make changes in the future if you need to. You should also design with
the future in mind. For instance, your website may only have
information about few products now, but what about when you have
hundreds?
8. Check compatibility:
Compatibility testing is important for sorting out bugs out and

gathering details that you might have missed initially. Ensure that your
website shows up the way you want it to in all major browsers,
including Firefox, Chrome, Internet Explorer, and mobile web browsers
like Safari and Opera Mini. Test it on various mobile phones and
tablets. Your site must display similar appearance no matter what
screen it shows up on. Make sure all of interlinks and navigation work,
images should display with proper size, and that you’ve replaced all of
the placeholders with actual text content. See to it that all of the forms
and other input fields with validations if any, button controls are
working properly.
9. Maintenance:
Once your website is launched, the work isn’t over. One way to
bring users again to your site is to provide new products or content
regularly. Keep track on your analytics software to see what the
performance of your website is, with the public. Keep an eye on metrics
like your number of unique users, bounce rate, and which pages are
most popular on your website. Other maintenance type may include
regular website backups, upgrades of any software, additional helpful
plugin installation, etc.

What is the use of transcript?
What is the use of keyboard?
Why organizing content is essential?
What is prototyping?
How to check compatibility of a website?

4.6 SUMMARY
• Website is a medium, which communicate some information to the user,
but there can be some issues while communicating the user
• To avoid poor website, you need to design it step by step fashion.
• Customization and personalization are two different entities. User can
customize webpage when he will have direct control on website while
Personalization means that website companies deliver personalized pages
designed according to the users’ precise needs.
• It is necessary that the Web be accessible in order to provide equal access
and equal opportunity to people with diverse abilities. To meet these
requirements you need to make website which will provide alt-text for
images, transcript of podcast, audio files, and mouse independent
webpages.
• Web usability is measured by 5 dimensions: learnability, efficiency,
memorability, errors occurred by users, how much are they satisfied with
the website.
• Download speed of a website should be minimized by using lighter images
and precise text on webpage.
• Website planning cycle consist of various phases.
4.7 QUESTIONS
1. Describe Web design cycle
2. List down the website design elements.
3. How can you make a website accessible?
4. How do you plan a good website?
5. List down web usability’s five dimensions.
6. Explain personalization with the help of example.
7. What is the role of usability in developing an effective website design?
8. Discuss web usability from a target audiences’ view.
9. What are the basic issues in website designing?
10. Describe Website planning in brief.

Elements of website design
a) Presentation
b) Navigation
c) Visual appeal
d) Interactivity

e) Personalization
Fixed layout has constant width regardless of the system and liquid
layout possesses flexible width.
CSS - cascading style sheets
Five dimensions of usability
1) Learnability
2) Efficiency
3) Memorability
4) Errors
5) Satisfaction
By using small or light background image in website

Transcript is useful for users who are deaf or hard of hearing any audio
file on web.
Keyboard is used by user who cannot use mouse because of limited
movement of their hands.
Well organized content shows the genuineness of any website
Creating an image of what the final website design will look like.
Checking a websites on different browsers and devices.
4.8 BIBLIOGRAPHY
• “9 Practical Steps For Planning a Website” by HostGator Blog
• www.wikipedia.com
• “6 Phases of the Web Site Design and Development Process” by
iDesign Studios
UNIT 5 THE BASICS OF NAVIGATION

Program Name : BSc(MGA)
Structure

5.0 Introduction
5.1 Unit Objectives
5.2 Types of Site Navigation
5.2.1 Internal Links with Anchor Tags
5.3 Styles of Site Navigation

5.4 Types of Navigation
5.4.1 Absolute and Relative Paths
5.4.2 Locking relative URLs with the BASE element
5.5 Net Objects
5.6 Tips for Website Navigation
5.7 Summary
5.8 Key Terms
5.10 Bibliography
5.0 INTRODUCTION
Once you fixed the design of your website, it needs to run through various
navigation styles and tips. Your website should ideally be user friendly and
should have ‘easy to navigate’ pages. This essentially means that the web
pages on your site should be properly linked with each other and also allows
easy navigation. Keep a track of the user, and let him know where he is so that
he may not get lost between the pages of the website.

Identify various kinds of site-navigation
Identify various styles of site-navigation
Identify the use of ‘Net Objects’ in navigation
5.2 TYPES OF SITE NAVIGATION

“Everything should be as simple as possible, but no simpler.” – Albert Einstein
The website navigation tools let a website's users to experience the site with the
most efficiency and the least incompetence. A website navigation system is
similar to a road map which enables webpage visitors to explore and discover
different areas and information contained within the website. There are many
different types of website navigation:

• Hierarchical website navigation
Hierarchical navigation is the most standard navigation model used on the web.
The structure of the website navigation is built from general to specific. This
provides a clear, simple path to all the web pages from anywhere on the
website. From the main page to the target pages that contain the real content,
the main options on each page are taken directly from the hierarchy as shown
in Figure 5.1. Sitemaps are the common example of hierarchical navigation
system.
Figure 5.1 Hierarchical Navigation

As noted earlier, the hierarchy is extremely important, but also rather limiting.
It is these restrictions that often require supplementary navigation systems.
• Global website navigation
Global website navigation illustrates the top level divisions/pages of the

website. It is available on each page and lists the main content divisions/pages
of the website. A global or site-wide navigation system often balances the
information hierarchy by supporting better vertical and horizontal movement
all over the entire site. At the core of most global navigation systems are some
standard rules that command the execution of the system at each level of the
site.
The simplest global navigation system may contain a graphical navigation bar
at the footer section of each page on the site. On the index/home page, the bar
might be redundant, since it would replicate the key options already listed on
that page. On second level pages, the bar might include a link back to the home
page and a link to lower pages as shown in Figure 5.2

Figure 5.2 Global Navigation
• Local website navigation
Local navigation would the links with the text of your web pages, linking to
other pages within the website as shown in Figure 5.3.
Figure 5.3 Local Navigation
For a more composite website, it may be essential to balance the global

navigation system with one or more local navigation systems. This integration
can be puzzling, particularly when the global and local navigation systems
provide too many options. Alone they may each be manageable, but together
on one page, the variety of options may overwhelm the user.
In navigation system pages are linked by hyperlinks. Basically hyperlinks are
of two types, external and internal. External links are used to create links to

internet websites other than your own. These also include external links to e-
mail servers, to FTP servers or to various other forums.
<a href="mailto:[email protected]"> Send a query</a>
Internal links are used to create links to different sections of a single webpage,
or links to other document and sections within a website. The following code
snippet will show you internal linking. Index page of a website will contain
anchor tag linked to the webpage contact_us.html, which is within a single
website.
<a href="contact_us.html">Contact Us</a>
5.2.1 Internal Links with Anchor Tags
Some informative webpages can be very lengthy. In these cases, it may be

useful to add internal page links that let user to jump from one part of a page to
another. Internal navigation links basically scroll the page up or down, gives a
more effective way of reaching sections of a longer page. It is compulsory to
provide a reciprocal link back to the top, so internal page navigation tends to
come in pairs of links.
Beyond the rapid access to content sections, internal links provide an

outline of page content, much like a table of contents. It may be very tough to
get a sense of what's included on a longer page simply by scrolling and reading
page headers. Sometimes a set of internal links may even appear to be part the
local navigation scheme. The following code shows an internal source link
with anchor tags.
<a href="index.html#contact">Contact</a>
Let us break down this line of code
<a></a>: Inline anchor tag contained within the block element. Within anchor
tag we have a fragment identifier.
• href: This is the attribute that specifies the location of a resource.

• Index.html: This is the guiding URL to a page on your website
• #contact: This is the fragment identifier. The section of the address marked by
hash ( # ), is used to go to a specified section of that document. The hash mark
can also be quiet useful when trying to reference a particular section in another
document.
• Contact: this is the text of the link representing the link destination.
The fragment identifier can be addressed by any name. You must,

however use the same fragment identifier for the ID attribute in the destination
anchor. That is how source and destination uniquely identify each other. In this
instance, the browser would go to section named or whose ID attribute is
contact on the destination page.

The following code defines a destination anchor
<a id="contact">Contact</a>
Let us break down this line of code
Id: the id attribute holds the value you give to the link. It can be any text you
choose. In this example, the attribute is assigned the id contact as the identifier
for the destination anchor. That is why we put #contact in the hypertext link to
the source anchor (so the source would know what destination to link to). It
should be apparent that each id within a document must be unique. If you had
more than one contact, the source anchor would not know which one to link to.
The destination anchor is not highlighted as a link.
On the webpage, the destination anchor would be rendered with the

word ‘Contact’ simply. Note that when you view the anchor on the web
browser, you will see that the subheading ‘Contact’ is not interactive in any
way, since it is the destination of the link. It is not clickable either.
On browser you will notice that the source anchor is underlined as a
link, while the destination anchor is not visually changed. There is more than
one way to refer to destination links. You may also use the name attribute in
place of id attribute. Let us think of name attribute of an anchor tag.
The name attribute must be used within anchor tags to give the element
a unique value, as shown below
<a name="contact">Contact</a>
However the id attribute can be used within any other element to give it a
unique id. The id attribute is case insensitive – Contact and CONTACT would
be seen as the same thing

Describe types of site navigation
Why id attribute should be unique?
How would you link external webpages in your website?
Differentiate between global and local navigation.
How to link external links to e-mail servers, give one example.
5.3 STYLE OF SITE NAVIGATION

Web navigations differ in styles among different website as well as within a
certain site. The accessibility of different navigational styles lets the
information in the website to be conveyed simply and directly. This also
separates between sections and the sites themselves to indicate what the
important information is and to enable the user access to more information and
details discussed within the website. Across the world, different cultures prefer
certain styles for web navigations, allowing for a more pleasant and useful

experience as navigational styles expand and differentiate. Few of them listed
below:
1) Named anchor: An anchor element is called an anchor because web

designers can use it to anchor a URL to some text on a web page. When
users view the web page in a browser, they can click the text to trigger the
link and visit the page whose URL is in the link.
2) Sitemap: A site maps is a map of all the different pages of your website.
They lets your site's users to get a preview of the general structure of your
site, and quickly go anywhere they want, even if the page they need is deep
within your page hierarchy. Site map can be as shown in Figure 5.5
Figure 5.5 Sitemap example
3) Text links: The link label, anchor text, link text or link title is the visible an
user can click text in a hyperlink. As shown in Figure 5.6 , underlined text
navigates us to the external webpage on internet.
Figure 5.6 Text Links example
4) Breadcrumbs: Breadcrumbs or breadcrumb trail is a navigation aid used in

user interfaces. It lets the users to keep track of their positions within
documents as shown in Figure 5.7
Figure 5.7 Breadcrumb example

5) Navigation bar: A navigation bar or navigation system is a part of a website
or online page offered to help users in travelling through the virtual
document. Figure 5.8 shows example of navigation bar.
Figure 5.8 shows example of navigation bar.
6) Dropdown menu: In dividing with graphical user interfaces, a dropdown

menu or drop-down list is a user interface control GUI element ("widget" or
"control"), similar to a list box, which lets the user to select one value from a
list. As shown in Figure 5.9, on mouseover event ‘contact me’ menu shows
further sub menus by dropdown window.
Figure 5.9 Dropdown Menu example
7) Flyout menu: In computing with graphical user interfaces, a menu that flies
out (either down or to the side) when you click or mouse over some GUI
element. As shown in Figure 5.10 when user scrolls till contact menu, a
social media flyout menu pops up from left side of the webpage.

Figure 5.10 Flyout example
8) Pagination: It is essential when you have to deal with a long way to

navigate through large documents divided into separate pages. You'll find
pagination in large image archives or search result pages, for example
Google or Yahoo search. Pagination is different from other types of
navigation because it does normally link back to the same document, but
results in more options or further information being displayed. A common
example of pagination is shown below in Figure 5.11.
Figure 5.11 Pagination example
5.4 TYPES OF NAVIGATION

5.4.1 Absolute and Relative path
Relative: Relative links provide the location of a file in relation to its position
with another file. Linking to an internal page is very similar to linking to an
external site. The only difference is that you use the relative URL of the page
you want to link to:
• Absolute- Absolute links provide the exact address of the location, the
URL, which would include the domain and the root directory as part of
its path.
<a href="http://www.bbc.co.uk">BBC news</a>

• Relative- Relative links provide the location of a file in relation to its
position with another (reference) file.
<a href="aboutme.html">About me</a>
In this example, the file we are linking to (aboutme.html) is in the same

folder as the file we are writing to.
A path is relative to its working directory (that is, present location of where
you are in a file system) while an absolute path does not change, irrespective of
which directory you are in. it normally points to the root directory. If you move
the files, the root directory changes and the URLs are, absolutely speaking no
longer valid. Howervr if a file is two levels up relative to one file, or one level
up relative to another, that will always be true( unless the whole directory
structure is changed ) even when you move to different computer. Paths are
used extensively in computer science to represent the directory / file
relationship common in modern operating systems and are vital in the
constructions of URLs.
Look at Figure 5.12, which shows an absolute path of ‘path folder’ in
the directory tree would be :
‘C:\ Users/Public/Music/Sample Music/paths’.
A relative version from Sample Music would be : .. /Sample Music/paths
Figure 5.12 Examples of Relative and Absolute directory structures
5.4.2 Locking Relative URLs with the Base element

When you link webpages related to the same website, then each time it is not
compulsory to provide a complete URL for every link. You can avoid it by
using <base> tag in your HTML document head section. This tag is used to
provide a base path for all the links. So your browser will concatenate given
relative path to this base path and will make a complete URL for navigation.
Example
Following example makes use of <base> tag to show the base URL and later
we can use relative path to all the links as a replacement of giving complete
URL for every link.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href=" http://www.ycmou.com">
</head>
<body>
Click following link
<a href="/mod/url/view.php?id=41"
target="_blank">Soft Skill Course</a>
</body>
</html>
Now given URL href="/mod/url/view.php?id=41" is being

considered as http://www.ycmou.com/mod/url/view.php?id=41
5.5 NETOBJECTS
Components are pre-built mini-applications that add interactivity to your site without custom
programming or scripting. Publish components and Page components are available in
NetObjects Fusion Essentials. The component’s type dictates where it appears within
NetObjects Fusion.
NetObjects Fusion components are installed when you install NetObjects Fusion. You can also
download third-party components from third-party vendors. If you are a software developer
and want to create your own NetObjects Fusion Components, sometimes called NFXes, you
can use the NetObjects Component Development Kit (CDK). For information, visit
www.netobjects.com.

Figure 5.13 NetObject Components
As shown in Figure 5.13 NetObjects components are available for you to speed
up your web development process. Few components are listed below:
Next-Previous Button Component :
By using this ‘add on’ (Layout Component) you can easily link between
successor and predecessor of current page. Some websites may use from
navigation capability provided by previous page - next page links that exist on
every page. This is exclusively useful for sites that are organized like a book
where content has a fixed order. Teaching sites, directories, presentation sites
are good examples of this type.
Auto Contents List :
This Layout component automatically makes a ‘table of contents’ for your

site. When you change page names, titles locations, you will not have to inform
your table of contents anymore. This component will ensure that your table of
contents page displays current updated information at all times.
BcImageDir :
This layout component is similar to Auto Contents List; where it automatically

creates a ‘table of image links’ for a manual. When you place the component
on your page, you will pick a directory to publish images from. This
component will ensure that your table of image links page displays updated
information at all times.
BcAutoNameAppComp :

This NetObjects Fusion Site Wizard component helps you to copy one name
attribute of a page to another name attribute of the same page for all pages in a
web site automatically.
BcAutoTextAppComp :
This is also a NetObjects Fusion Site Wizard component that automatically

copies a given value to an attribute of the same page for all pages in a web site
based on a condition.
5.6 TIPS FOR WEBSITE NAVIGATION

1. Easy to Find:
Navigation should be a noticeable element of your design. Since it will often

take lesser space than other elements, it should stand out enough so it doesn’t
get lost amongst a sea of content. The most common location of a button bar is
across the top of the page; as users should not have to scroll down to navigate
further into your site. Remember that Web visitors are impatient, and they're
not will not surf your site very long if they can't find their way around.
2. Consistent:
Site navigation should appear in the fixed position on every page of a site. It
should also retain the same style, type and colors. This will enable visitors to
get friendly with a site and feel easy browsing it. Visitors may get frustrated, if
navigation were to jump from the top to some other position, disappear, or
change fonts or colors from section to section.
3. Clear Section Names:
The section names of a site, particularly as labeled in the navigation, should

clearly state what the notion behind them is. Perhaps avoid using ambiguous,
common words like ‘resources’ and ‘tools’ as they only lead to users clicking
on multiple buttons before finding what they are looking for. Switch to
understandable button names such as ‘news’ and ‘podcasts’ to avoid confusion.
4. Less is Good
More navigation buttons may just leave a user with too many choices. A long
list of options holds onto the visitor from getting into the most key content
areas of your site. Instead, consider drop-down menus that break down top-
level buttons into sub-levels. Also be alert about too many separate navigation
bars for separate contents. It is common to have up to three options for

member-based content-driven sites. However, if they aren’t clearly defined the
user won’t know where to look, or click.
5. Track the User
Once a user clicks into a site section, it’s useful to let them know where they
are. Use a constant method to highlight the section a visitor is in or the label of
the section, such as a changed color or text style. If the site has more than one
page per section, be sure to leave the button clickable so users can use it to get
back to the main page of that area.

How many ways are there to navigate a webpage?
What are internal links?
List down other styles of site navigation.
What is the URL?
How can you lock a relative URL using a base tag?
Describe difference between absolute and relative paths.
5.7 SUMMARY
• There are three type of basic navigation hierarchical, global and local
• ‘User friendly’ is the immediate word which should come to the person who
visits your website. The navigation should be simple and supported by well
guided links and clear directives ensuring that a user does not get confuse at
any point of time.
• Base tags work to uniform links on a webpage. If there are sub links
belonging to one website, they need to have something common which
makes them similar. Here the base element works to make this happen.
• NetObjects are those functions which allow you access third party
components to improve the efficiency of your website.
5.8 KEY TERMS

• Absolute Links: Absolute links provide the exact address of the location, the
URL, which would include the domain and the root directory as part of its
path.

• Relative Link: Relative links provide the location of a file in relation to its
position with another (reference) file.
• External Links: Links from other Internet websites.
• Internal Links: Links within the same website.
• Source code: A form in which a computer program is written by the
programmer.
• Source anchor: Guides the source to the destination link.
5.9 END QUESTIONS

1. What are the different types of site navigation?
2. Write a short note on destination anchor.
3. Describe minimum 5 styles of navigation.
4. Discuss the use of NetObjects in Navigation.
5. Describe fragment identifier and its use.
6. Write a code to move to beginning and end of a webpage.
7. Explain locking Relative URLs with the Base element.
8. Note on ‘tips for website navigation’.
9. Note on types of navigation.
10. Explain Internal Links with Anchor Tags.

Hierarchical, global and local website navigation
Id should be unique, so that linked anchor will navigate properly.
By writing external webpage URL in anchor tag
In global navigation, links include external webpage whereas in local
navigation, links are connected to the pages within a website.
<a href="mailto:[email protected]"> Send a query</a>

Two types of navigation: by Relative path and Absolute path
Links within a website or same document is called internal link
Text links. Breadcrumbs, flyout menu, pagination etc.
Uniform Resource Locator
By using <base> tag you can lock it
Relative links provide the location of a file in relation to its position with
another file and Absolute links provide the exact address of the location.
5.10 BIBLIOGRAPHY
1. O'Reilly Designing Web Navigation.

2. Web Content Accessibility Guidelines (WCAG) by W3C.
3. www.wikipedia.com
Sub points such as Type Weight, Type Width, and Type Posture are
merged under its main bullet.
Previous Section 6.4 didn’t make any sense with its content, so bullet is
replaced as per the content.

UNIT 6 WEB TYPE
Program Name: B.Sc. (M.G.A.)
Written by: Sonal Ramrao Dalvi.
SRAJAN Institute, Pune
Structure:
6.0 Introduction
6.1 Unit Objectives
6.2 Type Matters
6.2.1 Font and their Types
6.2.2 Customizing Text with Character Styles
6.2.3 Italicizing Text
6.2.4 Bolding Text
6.2.5 Preformatting Text
6.3 Type on the Web
6.3.1 Adding Superscripts and Subscripts Using HTML and CSS
6.3.2 Using the Font and Basefont Elements
6.3.3 Scalability and Absolute Measurement
6.3.4 Inline Style
6.3.5 Using the Relative Size in Standard HTML Coding
6.3.6 Comparing Font Size with Heading Size

6.3.7 Overriding Default Font Faces
6.3.8 Aligning and Indenting Text
6.3.9 Dealing with Deprecation
6.3.10 Indenting with BLOCKQUOTE
6.3.11 Type Form
6.3.12 Other Typographic Considerations
6.3.13 Anti-Aligning and Font Smoothing
6.3.14 Combining Type
6.4 Type Classification
6.5 Facing Fonts
6.6 Graphics Text
6.7 Sending Fonts with Your Web Page
6.7.1 Approaching Web Typography
6.8 Line-Lengths
6.9 Special Character and Entities
6.10 Installing AND using Web Fonts
6.10.1 To Add a New Font
6.10.2 To Remove a Font
6.11 Summary
6.12 Key Terms
6.14 Bibliography
6.0 INTRODUCTION
Many people, including designers, think that typography involves of only
selecting a typeface, choosing a font size, its color and whether it should be
regular, narrow or bold. For most people it ends there. But there is much more
to achieving good typography and it’s in the details that designers often
neglect.
These details give the designer total control, allowing them to create
beautiful and consistent typography in their designs. While these details can be
applied across different types of media, in this unit we’re going to emphasis on
how to apply them to web design. As a designer, the objective is to learn how
to use such elements together to create designs that have a lasting impact. What
is represented symbolically is filled with the emotion off, its creators and in
turn, evokes emotion from those that are exposed to the symbol. Type is no
exception; as an extension of this intimate, evolutionary dynamic known as
language, it, too, is complicated, emotional and frequently beautiful.

Type is an aspect of design that, like color, shape and space, carries its
own significance. Type is made up of letters which are the symbolic
representation of a complex communication system. Typography has
fascinated many designers so much that they have spent their entire life
studying, creating and admiring type. Philosophers have argued whether type is
an extension of language, or of individual characters (known as letter forms).
Letter forms within an alphabet carry no significance of their own unless
attached with an extension of a language. Designers debate issues regarding
design and readability. Those who are conservative insist that nothing should
ever interfere with readability, while others, more adventurous ones suggest
that type has, in itself, become an art form. Despite the ongoing discussions
regarding what type means to humankind, all of us are likely to agree that type
impacts us personally and emotionally as well as within the world of graphic
art. Essential to humanity and profoundly important to design, the complexity
of type is easy to misunderstand and is therefore misused.
One of the more confusing things about typography, especially for new
designers, is the difference between typefaces and fonts, there's a very distinct
difference between these two terms. Typefaces are like families. And, in every
family, there are several family members, and in this case, family members are
the fonts. So, if we look at it in a visual representation, we have here the
Helvetica family. You got Mrs. Helvetica Regular, Mr. Helvetica Bold. You
got the little girl, Helvetica Light, and then the baby, Helvetica Oblique.
Together, they make up the Helvetica family, or typeface. However, separately,
they each have individual attributes that make them a font. That means when
you see terms like Arial, Courier, Garamond, Times New Roman, or Verdana,
you're actually referring typefaces. It's only when you're adding in size and
style attributes, like ‘Arial Narrow’ or ‘Arial Unicode MS’, that you can call
something a font. In short it is defined as ‘typeface + style + size = font’.
Web designers who have no formal training in typography are at a
distinct disadvantage because they do not know that adding type to a design is
as essential as adding elements of color, shape and space.

Identify a type and various types on the Web
Identify free fonts for the screen
Identify facing and graphics fonts
Define the process to send fonts through a web page
Identify the types of special characters
Identify how to install and use web fonts
6.2 TYPE MATTERS

Web designers are quite restricted in terms of what can be done with type.
Designers wishing to use typographic style must rely heavily on graphics to
deliver that style and impact of emotion they carry fortunately, these
restrictions are beginning to change with the introduction of cascading style
sheets and other web-based type technologies.
6.2.1 Fonts and their Types
If you look at your formatting toolbar in a word processing software and click
on the drop-down list of fonts, you will see dozens of specific fonts .You can
choose from the five generic types:
1. Serif:
This category includes all type families and faces whose letterforms
have little strokes, referred to as serifs.
2. Sans serif:
Type in this category tends to be more rounded, with clean lines and no
flourish strokes. (Sans is a Latin term which means `without').
3. Monospace:
Remember the typewriter? This ancient piece of machinery outputs
type in which each letter and space was the same size. This means that the
letter "I," which is slim, and the letter "W," which is wide, take up the same
amount of space.
4. Script:
Anything that resembles handwriting is referred to as script.
5. Decorative:
Artistic type can really add spice to a page. Decorative type is any type
that has been made interesting by the type designer's addition of shapes or
designs to the individual letters.
For most normal text output, either serif or san-serif fonts are to be used. It
is easier to read large blocks of text on (and even off) screen using serif fonts,
while headings and subheadings are better with san-serif types of fonts. You
will come to know the difference between serif and sans serif fonts as you take
a look at the Figure 6.1. The Century Old Style font has a series of small lines
called serifs. A serif is a flare at the end of a letter terminal which is absent in
Futura Book font.
Fig. 6.1 Difference between Serif and Sans-Serif

Many font artists believe that this helps the human eye catch and identify a
letter more effectively.
Table 6.1 shows fonts both with and without serifs.
Serif Sans Serif
Times New Roman Arial

Bookman Old Style Century Gothic
Elephant Tahoma
Lucida Fax Verdana
Table 6.1 Sans-Serif Fonts do not have Small Lines at the End of Letters
You can use uncommon font designs in an effort to be different and
original. No matter how different it is, your website should not fail on browsers
that may not be able to render nonstandard fonts. This will defeat the very
purpose of creating a website. (You will learn more about font families in
subsection 6.4).
6.2.2 Customizing Text with Character Styles:
‘Character styles’ are HTML elements that transform the appearance of the text
which is enclosed in them. These elements are inline, which means that they do
not create a new line because they are intended to be included in the middle of
sentences. Character styles are most commonly used to add bold or italic styles
to words. Although the World Wide Web Consortium (W3C), the official
standards body for the Web, has tried to phase out character styling elements in
favor of Cascading Style Sheets (CSS), character styling elements are still in
wide use. The reason for this is simple they are easier to learn and more
intuitive to use than CSS. CSS, on the other hand, rewards a little bit of study
by giving you much richer style control capabilities.
6.2.3 Italicizing Text:
Italics are used to place emphasis on particular words for various purposes.
Words from a foreign language that have not been assimilated into our native
language are also usually italicized. Thus, an English speaker would italicize
‘Namaskar’ and ‘Hardik Shubhechha’ (which means ‘Greeting’ and
‘Blessings’), but would not italicize ‘Maharaja, Sanskrit, Yoga, Chakra’. This
is because these words have become assimilated into English through common
usage, even though they are from Marathi language. To add italics to text in
HTML, you enclose the text in and tags, as shown in this example.
Figure 6.2 shows output.
The word Hello is italicized. 
The word Hello is italicized.
Fig. 6.2 Italicized Texts
6.2.4 Bolding Text:

Just like italics, bold print is also used for emphasis. The most important use of
bold print is to create heading. However they can also make a word or phrase
in a sentence stand out from others. In HTML, heading elements are
automatically converted to bold unless overridden in style sheets. To make text
bold, enclose it between and or and tags as shown this
example. Figure 6.3 shows output.
The word bold is in bold print. 
The word bold is in bold print.
Fig. 6.3 Bold Print also Emphasizes Text
6.2.5 Preformatting Text:

The basic text on a web page is in a proportionally spaced font, i.e., the amount
of space taken up by a given number of characters depends on the letters used.
The word ‘ion’ does not take up the same space as the word ‘won’, because ‘w’
is wider than ‘i’. However with preformatted text, each character takes up the
same amount of space, regardless of its size. This is because it uses a
‘monospace’ font — one space for each character.
Other important differences occur when using preformatted text. For
starters, preformatted text maintains all white space as it exists, without trying
to condense it. For example, if the text contains ten space characters in a row in
normal HTML, all but one of them is eliminated by the web browser. In
preformatted text, however, all space characters are left intact.
Figure 6.4(a) shows text without preformatting tag and 6.4 (b) shows
preformatted text with its effect on white space on a web page.
Fig.6.4 (a) Text without Preformatting

To set text as preformatted, place it between <pre> and </pre> tags as
shown in this example:
<pre>
function add()
{
var a=5;
var b=14;
var c = no1 + no2;
alert ("Addition is : " + c);

}
</pre>
Fig.6.4 (b) Preformatted text
6.3 TYPES ON THE WEB

6.3.1 Adding Superscripts and Subscripts Using HTML and CSS
Generally, all characters occupy the same level on a line, However if you must
add something such as the mathematical formula E=mc2 or designate water
H2O, you'll need to format the ‘2’ as a superscript to raise it above the line, or
as a subscript to drop it down a notch. You can use a few special characters for
terms such as squared or cubed, but it is better in most cases to go with a
generic solution that is applicable to all your needs for superscripting and
subscripting of characters.
A common problem on the Web till some time back was that the trademark
symbol was not well-supported. If you added the symbol to your page, then
there was no guarantee that it would actually show up in a web browser. The
solution this problem was simple and straightforward just superscript the letters
TM .You could superscript characters by putting them between the and
 tags and subscript it by putting them in between and .
Following code is an example of superscript and subscript. Output is shown in
Figure 6.5.
This is Superscript and this is
Subscript
Fig 6.5 Example of Superscript and subscript
Another way to do superscripts and subscript is by changing the size value

relative to surrounding test using style. For example, in addition to the
superscript/ subscript syntax, you may use the style based vertical-align
attribute to precisely define how high (or low) you would wish the selected text
to be in relation to the baseline.
The following command would set the selected text 50 per cent higher
than the surrounding text or 50 per cent lower than the surrounding text. Figure
6.6 shows output on web browser.

This is Vertically Up
 by 50% and this is 
Vertically down by 50 %
Fig 6.6 Text using Vertical align attribute

Unlike the subscript/superscript attribute of traditional HTML shown
previously, by using this CSS method, you have a very fine degree of control in
placement of the text. You can scroll up or down as much as you desire. You
even use decimal increments, thus providing a theoretically unlimited range of
values you may use for text adjustment.
The and < div> tag:
Notice the tag in the code for Figure 6.6. The tag is used to
define a portion of text within an inline element. When you use the tag,
it selects a section of text for special treatment. This example uses
superscripting and subscripting by applying the vertical-align attribute. It
shows scalability of your web page by using the text-size style to increase the
heading size. If you want to select an entire block of text, you would use the
<div> tag. <div> is a block level element.
6.3.2 Using the Font and Base font Elements:
The Font element can be used to specify size, font face and color of the text it
encloses. The Basefont Element serves an identical function but for all the text
on an entire web page. Figure 6.7 shows how the output of the following code
will get displayed on the webpage and Figure 6.7 shows Font Sizes Vary from
1 to 7.
This text is of font Size=5
Fig. 6.7 Font Sizes 5
Fig. 6.7 Font Sizes Vary from 1 to 7

The basefont element works exactly the same way, except that it hit no end
tag, such thing as </basefont> and which has to be enclosed in the Head section
of the web page. To set the global basefont size for the web page to size 5, you
would use the following snippet of code.
</head>
<basefont size="5" />
</head>

• Font size options and Inline styles:
Let us take a look at the ‘ins’ and ‘outs’ of setting font size using inline styles.
These might seem redundant but each of these styles provides enhanced
flexibility and very fine control compared to that exerted while using HTML.
Styles extend the reach and degree of control over the design available to the
programmer. Using inline styles, the format of font sizing is as given in code
snippet.
The length can he expressed an absolute units or relative units. Absolute
measurements would be mm (millimeter), cm (centimeter), in (inches), pt
(points) and pc (picas). Relative measurements would be via ‘em’ or ‘ex’
(which are discussed later in this unit 6.3.3)
There are four ways to change font sizes using the length style: size can be
expressed as
1. A percentage.
2. A unit of measurement such as cm, px or em.
3. Size may be indicated by using keywords such as xx-small, small,
medium, large, x-large, or xx-large.
4. Size may be indicated by keywords relative to the size(s) of the
containing element. For example, you could use the keyword larger or
smaller.
The following code produces the result shown in Figure 6.8:
Default Font Size Example
Font Size Example- font-size:120%
Font Size Example- font-size:1cm
Font Size Example- font-size:24px
Font Size Example- font-size:1.75em
Font Size Example- font-size:larger
Font Size Example- font-size:xx-
large
Fig.6.8 Font Size examples

Notice that when you express size as a unit of measurement, you do not
insert a space before it (in the previous example, this would be em). This is true
of all length declarations pica, point, pixel, or whatever. However, since pixel
is the default, if you fail to specify the type of length, the value will be
calculated in terms of pixels.

6.3.3 Scalability and Absolute Measurement:
‘Scalability’ means the browser renders the content on the web in the same
format irrespective of screen resolution. In other words, your webpage will
appear readable in a variety of screen resolutions. You need to keep the
following in mind when producing scalability:
• The ex-keyword refers to the height of the letter 'x' in lowercase.
• The keyword em refers to the width of the uppercase letter ‘M’.
For example, if you would want a heading to appear 20 per cent larger than
the surrounding text, you would set the size value as follows:
font-size:1.2em;
An ‘absolute measurement’ is one that does not scale to the size of the
screen on which the font is being rendered. For example, if you were to insert
text 10 cm high, it would be visible on most screens used today. But someone
with web access via a mobile phone with a 6 cm screen would not be able to
read the text clearly.
6.3.4 Inline Style:

An inline style simply means that the attribute style is being used inside a tag.
The following example selects a sans serif font type to render the encapsulated
phrase, ‘attribute my style’:
<hl style="font-family: Arial, Tahoma, Verdana,sans serif ">
attribute my style</h1>
The following example turns the font color of the encapsulated text yellow:
This is yellow
 
6.3.5 Using Relative Size in Standard HTML Coding:
Font size can also be set relative to the default font size (or to the basefont size,
if one exists). To make the affected characters one size larger than the default,
use following code and it output is as shown in Figure 6.9.
This text is of font Size=+1
To make the characters two sizes smaller than the default, use a minus sign
instead, following code will generate output as shown in Figure 6.9
This text is of font Size= -1

Fig. 6.9 Font-size +1 example
Remember that there are only seven font sizes possible in HTML. You
cannot make anything smaller than size 1 or larger than size 7. So, if you had a
default font size of 3 and used the following code, you'd still have only a size 7
font as a result.
This text is of font Size= +6
There is no way to get to a size 9 font, because it doesn't exist.
6.3.6 Comparing Font Size with Heading Size:

Heading sizes 1 through 6 and font sizes 1 through 7 depict keen sense of
proportionality. If there was an H0, then headings would fall into a perfect
inverse ratio. In the normal scenario, an H1 heading is font size 6, an H2
heading is font size 5 and so on, all the way down to where an H6 heading is
font size 1. The only difference is that the heading text is automatically bold.
Figure 6.10 show this relationship.
Fig. 6.10 Heading Sizes and Font Sizes are Inversely Proportional
6.3.7 Overriding Default Font Faces:
By using the face attribute, you can override the default fonts used on web
pages. For example, the normal font used when you display a web page on
Windows systems is Times New Roman. However, it is customary for
headings to be in a sans serif font such as Arial. But on web pages, headings
and text are both in the same font. The way to change this is to set a particular
element on the web page to a different font face. A font face is the way the
lettering look. For example as you learned in the beginning of this unit, the
serif font, Times New Roman has a series of small lines, while a sans serif font
such as Arial, does not.
To change a particular element so that it has a different font face, use the
following code and output will be as shown in Figure 6.11
<h1>Arial Heading
Font face</h1>

Fig. 6.11 Arial Font face example
It is customary to specify more than one font face because not everyone
using the World Wide Web is on the same computer System. The most popular
sans serif font is called Arial on Windows computers. The same font is called
Helvetica on Macintosh systems. To take things one step further, both Arial
and Helvetica are in the same sans serif family. Thus to cover all the bases, you
would need to specify the font faces as code snippet given below, which will
result as shown in Figure 6.12.
<h1>Arial
Heading Font face with options</h1>
Fig. 6.12 Example of Arial Font face with option

By doing the above the latitude of choosing a display font is maximized for
your site visitors. If Arial is not available, the system tries for Helvetica. If
neither is available, a different font from the sans serif family is used instead.
This approach ensures the likelihood that a visitor sees things the way you
intend them to be seen.
This can be set globally for the entire web page by using the basefont
element as follows:
<basefont face="Arial, Helvetica, sans-serif" />
There are ways to adjust the space between letters, words and lines of
paragraph. ‘Kerning’ is the adjustment of space between letters whereas
‘Tracking’ is the adjustment of space between words and ‘Leading’ is the
adjustment of space between lines of a paragraph.
• Kerning: You can effect kerning by using letters-spacing similar to the
following example:
<h1 style="letter-spacing: 25px">Kerning with 25px</h1>
The result of this code is as shown in Figure 6.13:

Fig. 6.13 Example of Letter-spacing
• Tracking: You can affect tracking by using word- spacing similar to the
following example which results as shown in Figure 6.14.
<h1 style="word-spacing: 25px">Tracking with 25px</h1>
Fig. 6.14 Example of Word-spacing
• Leading: Typography also concerns itself with the space between lines
also referral to ‘line height’. The readability is tremendously influenced by
the distance between the lines. Figure 6.15 shows result of following code
snippet.
 Example of leading 50px :

Typography also concerns itself with the space between lines
also referral to 'line height'. The readability is
tremendously influenced by the distance between the lines.

Fig. 6.15 Example of Leading

6.3.8 Aligning and Indenting Text:
The (paragraph) element has four possible alignments: Left, center,
right and Justify.
The same is true for the six heading elements (H1 through H6 sometimes
described collectively as the Hx elements, where x stands for the number). If

you want to align a paragraph to the right, you can do it as in the example
given below:
Paragraph text goes here. 
An H1 element can be centered with this code:
<h1 align="center">Heading text goes here. </h1>
For justified text, simply use the word ‘justify’ instead of ‘right’ or
‘center’. Because left alignment is the default alignment, you don't have to
specify it explicitly.
Figure 6.16 shows some paragraphs and headings with various alignments.
This Paragraph is with a LEFT alignment. This is a standard format for

most paragraphs, reports, forms, letters, and so on.
This Paragraph is with a CENTER alignment. It will be aligned between

the two margins. Most people tend to use center alignments for report titles. It
can also be used in tables to center a title at the top of the table.
This Paragraph is with a RIGHT alignment. It will be flush against the

right side of the screen. Although not used as often as the other three types,
people do use this to put titles at the right side of their screen when those
kinds of titles are called for.
Paragraphs can also have FULL alignment, otherwise known as JUSTIFY

alignment. In these paragraphs, the text is actually stretched so that it is
flushed against both the left and right margins, eliminating the sharp edge
commonplace in many paragraphs. You will find this style most often in
books or letters using a block style of writing.
Fig. 6.16 Different Alignment Values Create Different Results

You can also work with indent the first line of text in an (X) HTML
element using the ‘text-indent’ style, where the value can he positive (to create
a regular indent) or negative (to create a hanging indent). Possible values can
be in length or percentage. This style can be used inside a list element. For
example, to create a hanging indent in the paragraph of left alignment as shown
in Figure 6.17, you would use following code:
This Paragraph is with default
alignment and positive ( 50px ) text-indent. 
This Paragraph is with default
alignment and negative ( -50px ) text-indent. 

Fig. 6.17 Different Alignment Values Create Different Results
Figure 6.17 uses a negative value for the text-indent, thereby producing an
interesting result. You can also create interesting effects in the header by
manipulating the space between the lines, using the ‘line-height’ attribute as
shown in Figure 6.18. Line-height property values can be given in normal,
number, length or percentage.
This Paragraph is with default
alignment and positive ( 50px ) line-height. 
Fig. 6.18 Different Line-height examples

6.3.9 Dealing with Deprecation:
The deprecated CENTER element is a simple and easy way of aligning
text, but it is not supported by W3C (World Wide Web Council), which
suggests doing it in a more complicated and potentially confusing manner.
According to the HTML standard, ‘a deprecated element or attribute is the
one that has been outdated by newer constructs’. This would not have
happened if the definition had worked effectively. In many cases it has been
applied to elements and attributes for which there is no better alternative
available.
The W3C's reasoning relies on some old arguments about whether or
not HTML should include elements and attributes that define how things look,
or whether or not elements and attributes should describe the informational
content of web pages. Of course, these elements and attributes already- exist
and are already in use across the world.
The HTML standard states that browsers should continue to support
deprecated elements and attributes. All of this means that these deprecated
methods are still fully functional, much easier than any alternative yet
presented and will be around for a long time to come.

Let us run through a few examples to show just what we mean. Let us
say that you want to center some text. We have already discussed how to do it
for and Hx elements. Here’s another way to go about it:
<center>Text to be centered goes here. </ center >
This is a simple, elegant and easy way to do it. And you can put just about
anything between the < center > and </center > tags, including images. It has
the same effect as writing following code.
 Text to be centered goes here. 
6.3.10 Indenting with BLOCKQUOTE:

When you want to quote a passage from another source, you should put it in
between <blockquote>...</blockquote> tags.
Text inside a <blockquote> element is usually indented equally from the
left and right edges of the surrounding text, and sometimes uses an italicized
font to highlight the content between it. Following code will generate output on
web as shown in Figure 6.19.
<blockquote>This Paragraph is an example of blockquote. Text
inside a blockquote element is usually indented from the left
and right edges of the surrounding text, and sometimes uses an
italicized font.</blockquote>
Fig 6.19 Blockquote example

6.3.11 Type Form:
Typefaces can have ‘form’. Form includes weight, width and posture. Form
specifically relates to the shape and direction in which a given typeface is
presented.
• Type Weight:
The weight of a particular font is the thickness of the character outlines
relative to their height. A typeface may come in fonts of many weights,
from ultra-light to extra-bold or black; four to six weights are not unusual,
and a few typefaces have as many as a dozen. Many typefaces for office,
web and non-professional use come with just a normal and a bold weight
which are linked together. If no bold weight is provided, many renderers
(browsers, word processors, graphic and DTP programs) support faking a
bolder font by rendering the outline a second time at an offset, or just
smearing it slightly at a diagonal angle.
The base weight differs among typefaces; that means one normal font
may appear bolder than some other normal font. For example, fonts

intended to be used in posters are often quite bold by default while fonts for
long runs of text are rather light. Therefore, weight designations in font
names may differ in regard to the actual absolute stroke weight or density
of glyphs in the font.
The TrueType font format introduced a scale from 100 through 900,
which is also used in CSS and OpenType. You can also use the words
"normal" (the same as 400), "bold" (same as 700), "bolder" (a relative
statement meaning to make the text bolder than the surrounding element),
or "lighter" (make the text lighter than the surrounding element). Because
few fonts have nine shades of boldness, in most fonts 100 to 500 are the
same, 600 to 800 are the same, and 900 is boldest. One of the ramifications
of this is that although "normal" is 400, 100 is not really any lighter. There
is no practical way to present text with less-than-normal weight.
Example of Font-weight =

100
Example of Font-weight =
lighter
Example of Font-weight =
900
Example of Font-weight =
bolder
Fig 6.20 Font Weight example
• Type width: font-stretch

Some typefaces include fonts that vary the width of the characters (stretch),
although this feature is usually rarer than weight or stroke.
Narrower fonts are usually labeled compressed, condensed or narrow.
Wider fonts may be called wide, extended or expanded. Both can be further
classified by prepending extra, ultra or the like. Figure 6.21 shows width
variations of Bodoni typeface.
Bodoni MT
Bodoni MT Black
Bodoni MT Poster Compressed
Bodoni MT Condensed
Fig. 6.21 Serif Typefaces

These separate fonts have to be distinguished from techniques that alter
the letter-spacing to achieve narrower or smaller words, especially for
justified text alignment.
The width of a font will depend on its intended use. Times New Roman
was designed with the goal of having small width, to fit more text into a
newspaper. On the other hand, Palatino has large width to increase
readability.
• Type Posture:
Type posture is the angle at which a given typeface is set. There are two
types of postures; Italic posture serves to emphasize text and Oblique
posture is much like italic but is more rigid and is typically found in sans
serif faces.
• Type direction:
The direction type flows can help create a feeling about the design.
Horizontal type is straightforward and conservative, whereas vertical type
can be used for impact.
6.3.12 Other Typographic Considerations:

Other considerations regarding type include size and proportion of the type
in relation to another and to an entire page.
• Size and Proportion:
When working with typefaces it is important to consider their size and
proportion to one another and to other elements on a page. Type is
measured in variety of ways, including points or pixels. Point measurement
is based on print measurement, whereas pixel measurement uses a
computer’s pixel-based technology to interpret point sizes. Generally
speaking, it is wisest to stick to the point system when setting type. The 12
point type is thought be most readable and suitable for body text. Smaller
type can be used for footer and secondary information and larger type can
be used in header.
The size and proportion of a typeface is important to style and design. Size
can help indicate what role the typeface is playing on the page larger type is
used for headers, medium sizes for body text, small sizes for notes and less-
emphasized information such as copyright notices.
Varying type size on a page is important but just as important is keeping
that variation consistent. You are looking for the visual interest and
practical results than having different sizes of fonts on a page. However, try
and avoid getting your visitor too overwhelmed with contrast or complete
chaos,
• Font Color:
Adding color to fonts can help give distinction to a page. As with size and
face, a light touch is important visitors can get confused with ten different
colors on a page. In fact, sticking to two static colors one for headers and

secondary text and other for body text is a very safe way to get a bit of
color into your design. Color is also important to type design. The use of
different colors influences the way a word is perceived in relation to
another.
Contrast is the name of the game when it comes to color design and type.
Colors can be differentiated in terms of warmth and coolness. According to
most designers, contrasting warm and cool colors can bring attention to
certain words, while detracting emphasis from others. On the Web, you can
use color for text, text-based headers, links, visited links and active links.
This gives you a lot of opportunity to apply color to text, but again, be
subtle.
Even when you are limited to black and white, you can use contrast to gain
a sense of color.
6.3.13 Anti-Aliasing and Font Smoothing:

Fonts are normally bitmapped which means that they are made up of squares of
information. We shall see what happens on the computer when you want to
mimic the smooth, rounded letters of a favorite typeface. How we can
smoothen, jagged/ ragged edges and sloppy-looking type. In order to address
this issue, designers use a technique known as anti-aliasing. This is the
smoothing of those jagged edges by blurring and lightening certain pixels to
make the results appear even as shown in Figure 6.22.
Fig. 6.22 Anti-aliasing example

6.3.14 Combining Type:
Mixing font faces can not only make interesting and professional looking sites,
but it can also be fun to work with! The problem is that many beginning
designers try too hard not realizing that less is often more when mixing fonts. It
is not right when designers tend to use more than five different fonts without
ever considering what they were doing, or why. The effects of this can be
disastrous. Typefaces, like families, have relationships with one another. You
can have a harmonious, long-term relationship or a discordant, disruptive
relationship. You can also find a nice balance between the peaceful and the
passionate type, creating a contrasting relationship. In type, harmonious
relationships are built on similarities. While opposites might attract, it is the
analogous that endure. It is safer to use one type family rather than go for
variations. If you are not a skilled graphic; designer with a typographic
background, be careful when combining type. The following tips should help
you in mixing fonts.

• Avoid mixing fonts from the same family. For example, do not mix
Garamond and Times as they are both serif fonts. Fonts from the same
family are often too similar to create contrast which you want and too
dissimilar to allow for continuity and legibility which is necessary.
• One way of combining type on a page without running into problems is to
choose one sans serif and one serif face. Use the sans serif for headers and
the serif for the body text.
• When in doubt, leave it out! If you think it looks cool but you are not sure,
avoid it until you have more experience. This is especially true if you are
creating a commercial page don't tread on uncharted territory without
knowing where you want to end up. Success starts with a sense of
confidence and chances are that if you are unsure, your end design will
reflect that lack of confidence.
Check your Progress 1

In short describe what makes a font?
What are the Character styles?
Difference between and <div>
What is the difference between FONT and BASEFONT elements?
How does scalability improve the web content?
How to override the default font face?
List down four possible alignments.
What is anti-aliasing?
6.4 TYPE CLASSIFICATION:

A face contains within it characteristics and attributes of the corresponding
family. These similarities are what demonstrate familial origins, differences
and also individuality. Type is created and classified in the same way.
‘Families’ share similar qualities and attributes, but individual 'face' is just that
individual. A type family might have many individual faces within it, some
with great variation, but there are certain common qualities that make the
individual face part of the greater whole.
Technically speaking, typefaces add visual interest, identity and style to a
page. They are often a significant element in the emotional relationship a
designer creates by combining type with other design elements. There are
many families of type and we will look at a number of those along with a
variety of faces. There are two types of names used to categorize fonts: family-
names and generic families. The two terms are explained below.
Family-name:
Examples of a family-name (often known as "font") can e.g. be "Arial",
"Times New Roman" or "Tahoma".
Generic family:

Generic families can best be described as groups of family-names with
uniformed appearances. An example is sans-serif, which is a collection of fonts
without "feet".
It is important to remember that there are two dominant generic families of
typefaces. These are the serif and sans serif families. These families have the
largest number of typefaces. It might surprise you to know that in total, there
are thousands of typefaces in existence. Furthermore, within each given family
there are variations based on weight and style that make certain families
especially large. Other type families, including monospace, script and
decorative, are introduced in the following sections to help give you a feel for
how type families and faces work together.
1) Serif:
Serif type is considered to be about 500 years old. Serif characters are
readily identified by the strokes that appear on individual letters. They are
often elegant and generally believed to be good for body text due to readability
issues. It is possible that the serif strokes create a line for the eye to follow,
thereby acting as a visual guide as shown in Figure 6.23. While serif fonts are
typically a browser's default body font, you will find that there is a growing
interest in the use of sans serif type for body text on the Web these days.
Serif type is considered to be about 500 years

old. Serif characters are readily identified by the strokes
that appear on individual letters. They are often elegant
and generally believed to be good for body text due to
readability issues.
Fig. 6.23 Serif Typefaces

As in Figure 6.24, a line has been created along the bottom and top of each
row of text. This is thought to enhance readability. There are three main sub-
sets of typefaces under the serif family. They include ‘oldstyle’, ‘modern’ and
‘slab serif’.
• Oldstyle:
It is believed that this group of serif fonts was derived from the pen-and-ink
hand lettering of ancient scribes. The angled serif stroke of oldstyle
typefaces is thought to have resulted from the scribe's hand lifting from the
paper before moving on to the next letter section. Two common oldstyle
typefaces include Bookman Old style and Garamond, as shown in Figure
6.24.
Bookman Old style Garamond
Fig 6.24 Oldstyle Type

Times is perhaps the most recognizable of all typefaces. Most faces in
this sub-category are referred to as invisible faces due to the fact that the
reader is so used to seeing this typeface that the relationship to it is an
invisible one. Oldstyle serifs are considered to be the most readable
typefaces.
• Modern:
Typefaces in this sub-category all have serifs, but there has been a general
flattening of the serif itself. ‘Modern’ typeface is also known as ‘Didone’.
Instead of emulating the natural slant of a scribe’s careful handicraft,
modern typefaces emulate the industrial age. They are angular, linear and
evoke a sense of order. Common to this style are the well-known and often-
used Bodoni and Elephant typeface, as shown in Figure 6.25.
Bodoni Elephant
Fig 6.25 Modern Type
• Slab-serif:
As the name suggests, these serif fonts have stab-like serifs which are very
thick and solid. They are sometimes called as ‘Egyptian’. The actual letters,
being less slab-like, create a contrast. This contrast is said to influence the
readability factor, making slab-serifs good choices for large sections of
body text. A good example of a slab-serif typeface is the popular New
Century Schoolbook, as shown in Figure 6.26.
Century Schoolbook
Fig 6.26 Slab-serif Type
2) Sans serif:
The sans serif family of typefaces doesn’t have strokes and are blockier. In
fact, sans serif letters are rounded and smooth. They are easy on the eye and
have been traditionally useful for headers rather than body text. Their use as
body text it the web environment is causing a shift in this tradition. One reason
for this trend might be that the rules of reading on a computer screen are
different from that of reading print. First, readers probably don’t stay as long at
the computer screen as they would reading a book, since a computer screen is
harder to read due to physical comfort issues (you can sit, stand, or even lie
down with a book).

Reading on a computer is also sure to tire one's eyes faster. Light and heat
dry out the eyes fast and people reading on a computer tend to blink less
overall than those reading books or magazines. Sans serif styles tend to be
readable in terms of shorter sections of text. Paragraphs on the Web should be
shorter than those in print. This too, has some bearing on why sans serif can be
effective for body text on the Web. Arial, Verdana, Futura are some of famous
typefaces as shown in Figure 6.27. Typefaces have less contrast and variation
in stroke width, and are typically used in headlines.
Arial Verdana Futura

Fig 6.27 Sans serif Type
3) Monospace:
The typefaces we have discussed so far can be categorized as ‘proportional
fonts’. This means that each letter takes up the amount of space necessary for
that letter. A single ‘I’ and ‘M’ will take up distinctly different amounts of
space. Monospace fonts are those type faces where each individual character
takes up the same amount of horizontal space as another character. A single
‘M’ is different than ‘I’ in width, but in a monospace font, width is adjusted to
be equal for every character in that font. This typeface is similar to a manual
typewriter, and is often used to set samples of computer code. Monospace faces
are used for both body and header text. A common monospace font is Courier,
as shown in Figure 6.28.
Courier Lucida Sans Typewriter
Fig 6.28 Monospace Type

4) Script:
Script resembles script-style handwriting and calligraphic hand lettering. It is

also called as cursive typeface and cursive fonts generally use a more informal
script style. Script faces are poor choices for body text, but as with decorative
faces, can make wonderful enhancements to headers and areas where text is
used as a design element. Embassy, Vladimir Script and Palace Script MT as
shown in Figure 6.29 are examples of script. Note the readability differences in
these typefaces, there is no problem when used as larger header, but you can
imagine that body text would be quite difficult to read.
Embassy Vladimir Script Palace Script MT

Fig 6.29 Script Type
5) Decorative fonts:
Decorative fonts have added features such as unusual strokes, calligraphic
influences, variations in dimension and unique shapes. Decorative type is also
known as ‘Fantasy’. It tends to be used best just as the name expresses, for
decoration and enhancement. They rarely, if ever make good body text.
Decorative fonts can make good headers, particularly if they are readable
or the header information is short. They are also very popular fonts to use on
advertisements, such as banner ads. Curlz MT, Comic Sans MS and Jokerman
are few examples of decorative font as shown in Figure 6.30.
Curlz MT Comic Sans MS Jokerman
Fig 6.30 Sans serif Type
6.5 FACING FONTS
Families and Faces:

Being able to use type families and faces can totally empower web designers
because they can use those faces to fully express the emotion within the design
being created. Limitations aside, we'll look at how typefaces and families can
be used with graphics.
Typefaces and Graphics:
The most important thing to remember is selecting the typefaces you want to
use for your body and header text before sitting down to set your type. Once
you have firmed what typefaces you'll be using and you know the literal
content of the graphic to be designed, the issue boils down to the tool you're
going to use to set the type. Graphics software such as Photoshop and
Illustrator has powerful typesetting features. Most designers agree that to work
with them. Illustrator allows a lot of control over the type you are setting,
including kerning, which is not available in Photoshop as you can see in Figure
6.31. Once you have set your type in Illustrator, you can then add your effects
in Photoshop. In Figure 6.31, you can see the character panel of Photoshop and
Illustrator. As shown in Figure 6.31, Font is Arial having Font-style Regular,
Font-size 14pt, leading 10pt, kerning disabled in Photoshop and 0pt in
Illustrator and tracking 5pt.

Figure 6.31 Character Panels of Photoshop and Illustrator
6.6 GRAPHICS TEXT

In many ways, putting type on a website as a graphic is currently the most
stable method of ensuring that your type design will be seen. Visitors do not
have to have the font installed- they see the font as part of a graphic. This gives
you lots of control because not only can you select from any typeface you own,
but you can also color it according to your taste and add special effects, too. Of
course, the drawback is the time that graphics take to download. Where you
use graphics to handle the majority of your type, you will need to take care to
balance the typographic elements with the graphics necessary for your
individual pages. Here are a few tips to help you when working with type as a
graphic:
• Select flat colors from the browser-safe palette to ensure the smallest file
size even if you're using large type.
• Save flat-color, simple, graphic-based, typeset files as GIFs as shown in
Figure 6.32(a).
• If you add special effects such as shadows, gradient, fills, and metallic
color if you use 3-D type as shown in Figure 6.32 (b), you should try
saving your tiles as GIFs and JPEGs.
(a) (b)
Fig 6.32 Graphics Texts
In order to compare the results you might find that certain instances JPEGs
will serve you better, whereas in other cases you will get smaller files and a
terrific look from Gifs.

• In most cases, you will want to anti- alias your fonts as you set the type on
the graphic. However anti–aliasing can become problematic when you want
to set small type. It is especially wise to avoid anti- aliasing on any type
that is less than 12 pts., although you should experiment with both in order
to get the best look.
Type-based graphics should be treated as any other graphic when coding.
This means to be sure to use the appropriate tag and attributes including width,
height, alt and any relevant alignment tags.
Wherever possible, it is also a good idea to combine graphic based type
with that you create on the page. This way you lean less on the graphics to get
your typographic point across.
6.7 SENDING FONTS WITH YOUR WEBPAGE:

Web typography challenges the best of designers, no matter how skilled at
type. The reason is simple: support for type is truly limited. There are only
three basic alternatives that designers have when designing for type on the
Web. These include using graphics, to handle desired typographic elements,
coding type with the HTML tag, or using cascading style sheets. Three
options do not sound limited, but here is the catch: With HTML and style
sheets if a specific typeface does not exist on the machine used by your website
visitor, then that visitor will not see your beautiful type.
A further headache is the often-referred-to browser problem. Microsoft's
Internet Explorer 3.0 and above versions has good style sheet support.
Netscape introduced support for style sheets with the 4.0 version. Font tags
were introduced in many 2.0 browser versions, but sometimes caused problems
with compatibility. The future holds great hope. However, with Microsoft's
embedded fonts and the Open Type initiatives there are new technologies on
the horizon that will bring type within easy reach to designers.
Embedded fonts allow designers to embed the font information for a
specific page into the code of that page. The necessary fonts are then silently
downloaded by the visitor’s browser, allowing the fonts on that page to be
seen. The Open Type initiative is a cooperative effort between Microsoft and
Adobe companies that have been at odds historically. But in order to solve
some of the typographic problems born of the Web environment, the two
companies have put aside their differences and are working on fonts that will
be instantly accessible to Web visitors. Recently, Adobe developed 11 original
typefaces just for the Web. These typefaces include two serifs, a sans serif, a
script and two decorative faces.
Adobe's site has terrific information on general and Web type as well as
typographic tools for PC and Macintosh platforms, located at http.
www.adobe.com.
6.7.1 Approaching Web Typography:
Web typography refers to the use of fonts on the World Wide Web. When
HTML was first created, font faces and styles were controlled exclusively by
the settings of each Web browser. There was no mechanism for individual Web

pages to control font display until Netscape introduced the tag in 1995,
which was then standardized in the HTML 3.2 specification. However, the font
specified by the tag had to be installed on the user's computer or a fallback
font, such as a browser's default sans-serif or monospace font, would be used.
The first Cascading Style Sheets specification was published in 1996 and
provided the same capabilities.
Internet Explorer added support for the font downloading feature in version
4.0, released in 1997. Font downloading was later included in the CSS3 fonts
module, and has since been implemented in Safari 3.1, Opera 10 and Mozilla
Firefox 3.5. This has subsequently increased interest in Web typography, as
well as the usage of font downloading.
Web-safe fonts are fonts likely to be present on a wide range of computer
systems, and used by Web content authors to increase the likelihood that
content displays in their chosen font. If a visitor to a Web site does not have the
specified font, their browser tries to select a similar alternative, based on the
author-specified fallback fonts and generic families or it uses font substitution
defined in the visitor's operating system.
By using a specific CSS @font-face embedding technique it is possible to
embed fonts such that they work with IE4+, Firefox 3.5+, Safari 3.1+, Opera
10+ and Chrome 4.0+. This allows the vast majority of Web users to access
this functionality. Some commercial foundries object to the redistribution of
their fonts.
You can see how to embed custom font and use embedded fonts by using
CSS in following snippet.
@font-face {
font-family: “Custom_Tahoma”;
src: url(Tahoma.otf);
}
@font-face {
font-family: “Custom_Tahoma”;
src: url (Tahoma.eot);
}
h1 {
font-family: Custom_Tahoma;
font-size: 200%
}
To embed and use fonts, you must create a subdirectory in the local root
directory of the site for e.g. called as ‘fonts’.
6.8 LINE-LENGTHS
In Typography ‘line-length’ is the distance between left and right edges of
a text block. In other way it is the width occupied by a block of typeset text,
measured in inches, picas and points. A block of text or paragraph has a
maximum line-length that fits a determined design. Line-length is determined
by typographic parameters based on a formal grid and template with several
goals in mind. Goals are like to balance and function for fit on screen and
readability with sensitivity to aesthetic style in typography.

Ideal Paragraph ( 45-70 characters ) Short
Paragraph
In Typography ‘line-length’ is the distance between left

( <40 characters )
and right edges of a text block. In other way it is the width In Typography
occupied by a block of typeset text, measured in inches, picas ‘line-length’ is the
and points In Typography ‘line-length’ is the distance between distance between left
left and right edges of a text block. In other way it is the width and right edges of a
occupied by a block of typeset text, measured in inches, picas text block. In other
and points. Goals are like to balance and function for fit on way it is the width
screen and readability with sensitivity to aesthetic style in occupied by a block of
typography. typeset text, measured
in inches, picas and
points.
Long Paragraph ( >70 characters )
In Typography ‘line-length’ is the distance between left and right edges of a text block.
In other way it is the width occupied by a block of typeset text, measured in inches, picas and
points. In Typography ‘line-length’ is the distance between left and right edges of a text block.
In other way it is the width occupied by a block of typeset text, measured in inches, picas and
points.
Table 6.2 Line-length example
Table 6.2 shows left flushed ideal, short and long paragraphs.The basic
guideline says that ideal line-length lies in between 40 to 75 characters
including spaces. While reading too long lines, reader’s eyes may get tired or
too short lines may leads him to distraction. Typographers adjust line-length to
aid legibility or copy fit. Text can be flush left (or ragged right i.e. uneven right
side of a paragraph), flush right (or ragged left), center or justified where all
lines are of equal length. In a ragged right setting line -lengths vary to create a
ragged right edge of lines varying in length. Sometimes this can be visually
satisfying. For justified and ragged right settings, typographers can adjust line-
length to avoid unwanted hyphens; rivers of white space ate orphaned words
characters at the end of lines (e.g. ‘The’, ‘I’, ‘He’ and ‘You’).
6.7 SPECIAL CHARACTERS AND ENTITIES

You may need to use certain characters from time to time that are not
found on your keyboard. For example, how would you type a non-breaking
space? How would a web designer in India type a dollar or yen sign?
There are two methods for adding these types of characters.
1. By character code number
2. By character entity.
Whey special character standards were first created, they were simply
numbered by their order in the list. Thus, character number 160 was followed
by character number 161, character number 162 and so forth. Each special
character was aided to a web page by typing a numeric value into the HTML

code. For example for character number 160 (all special character
codes begin with an ampersand and end with a semicolon). The problem with
this approach is that it is a bit difficult for everyone to remember that character
number 160 is a non-breaking space, while character number 8226 is a solid
bullet.
That is where character entities come into the picture. A vast majority of
character entities are simply shortened forms of the character you want to use.
It is much easier to remember that you need to type ‘&nbsp’, for a non-
breaking space or ‘&bull’ for a bullet than it is to memorize the numerical
position of every character in the listing. Figure 6.33 shows how some special
characters look on web page.
Fig.33 Special characters and their code
6.10 INSTALLING AND USING WEB FONTS
6.10.1 To Add a New Font:

Note:
• To reinstall standard Windows fonts, go to the ‘To reinstall the standard
fonts included with Windows’ section.
• To install fonts, you must have them on a CD, pen drive or your hard
disk.

To install a font, follow these steps:
1. Click on Start and then click on Run.
2. Type the following command and then click on OK: %windir%\fonts
3. On the File menu, click on Install New Font.
4. In the Drives box, click on the drive that contains the font that you want
to add.
Note: The CD drive is typically drive D. The pen drive or external hard-
disc is typically drive H or drive I.
5. In the Folders box, click on the folder that contains the font that you
want to add and then click on OK.
6. In the List of font’s box, click on the font that you want to add. To select
more than one font at a time, press and hold the CTRL key while you
select each font.
7. Click to select the Copy Fonts to Fonts Folder check box. The new font
is saved in the Windows\fonts folder.
8. Click on OK option.
6.10.2 To Remove a Font

To remove a font from the hard disk, follow these steps:
1. Click on Start and then click on Run.
2. Type the knowing command and then click on OK: %windir%\fonts.
3. Click on the font that you warn to remove. To select more than one font
it a time, press and hold the CTRL key while you select each font.
4. on the File menu, click on Date
5. When you receive the ‘Are you sure you want to delete these fonts?’
prompt box, click on Yes button.
CHECK YOUR PROGRESS 2

What are the subsets of the serif typeface?
Which software are there with great typesetting features?
Why font-face is used?
What is line-length?
What is basic ideal line length?
What are the methods to add special characters?
6.11 SUMMARY

• Web designers feel very skeptical while experimenting with various types.
They rely basically on graphics to provide the desired effects. Variation in
font size and type can create the required impact or even change it.
• It is the web designer's preference as to whether he prefers to be upfront
and simple or adventurous and colorful with his style. This is fine as long
as it does not hamper the message or purpose of creating the website.
• FONTS or BASEFONT elements are specified by the per cent size of the
font used in any text. This is specifically clear as far as usage is concerned,
when we work with subscripts and superscripts. A subscript or superscript
is a number, figure, symbol, or indicator that appears smaller than the
normal line of type and is set slightly below or above it — subscripts
appear at or below the baseline, while superscripts are above.
• An absolute measurement is one that does not scale to the size of the screen
on which the font is being rendered. An absolute measurement does not
rely on calibration of the instrument. It allows a generic clarity on all
screens and browsers globally, in terms of the readability of text.
• Font sizes can be adjusted as heading and normal as per their usage.
• There are ways to adjust the space between letters and that between words
Kerning is the adjustment of space between letters. Whereas, Tracking is
the adjustment of space between words.
• Leading is the adjustment of space between lines.
• The deprecated CENTER element is a simple and easy way of aligning
text, but it is not supported by W3C (World Wide Web Council), which
suggests doing it in a more complicated and potentially confusing manner.
• The BLOCKQUOTE element is used specifically to mark long sections of
material quoted from another source. However, as an interesting side effect,
this causes all the text contained within it to be indented equally from both
sides of the screen.
• Anti-aliasing is a collective term used for the techniques designed to reduce
or eliminate (where diagonal and skewed lines show as a series of lines
with jagged edges) this effect, by shading the pixels along the borders of
graphical elements. This effect when practiced on fonts is known as `Font
Smoothing'
• There are innumerable fonts available which can be used as per the
requirement. They cause a difference when one talks about comparing
Internet with paper newsprint in terms of easy readability and the desired
effect. For example, if an invitation is to be designed, we can choose
decorative fonts. Though decorative fonts are not that appealing to the
naked eye for daily reading, but invitations do not come often. So a
pleasant change is welcome occasionally.
• Graphics are the special effects created for interpreting many types of data
for better understanding. The visuals are mind-blowing with the only
disadvantage being the time graphics take to download.
• Web typography enables designers with many features to use when sending
fonts with their web page. Web designers need to be constantly updated
with the latest technologies for moving with the times, in terms of
typographic application.
• In Typography, ‘Line-length’ is the width occupied by a block of typeset
text, measured in inches, picas and points.

6.12 KEY TERMS
• Inline style: The attribute style used inside a tag.
• Superscripts: Appear above the baseline.
• Subscripts: Appear at or below the baseline.
• Spacing: The horizontal space between letters outside the font.
• Kerning: The adjustment of space between letters.
• Tracking: The adjustment of space between words.
• Leading: The adjustment of space between lines.
• Line-length: The distance between left and right edges of a text block.
6.13 END QUESTIONS

1. Explain how to customize text with character styles?
2. What is the process of adding superscripts and subscripts using HTML
and CSS?
3. Why are FONT and BASEFONT elements used?
4. Describe how to override the default font with an example code snippet.
5. Note on: Kerning, Leading, And Tracking.
6. Describe different ways of Aligning and Indenting Text.
7. What are the forms of a type? Explain it.
8. What are the other typographic considerations involved in web
designing?
9. What are the tips for combining the type?
10. Give a short note on Font Classification.
11. Write a note on Serif Typeface.
12. Explain any two generic font families in detail.
13. Trace the significance of graphics text.
14. What is the process of sending fonts with your web page by using CSS?
15. What do you understand by web typography?
16. Note on: Line-length.
17. Explain the use of special characters and their entities.
18. How to install a font?
19. How to remove a font?

Check your progress -1:

Font = typeface + style + size
Bold and italics.
Span is a inline element and div is a entire block element
The Font element can be used to specify size, font face and color of
the text it encloses. The Basefont Element serves an identical
function but for all the text on an entire web page.
Scalability causes readability of your webpage in a variety
of screen resolutions.
By using the face attribute, you can override the default fonts used
on web pages
Four possible alignments: Left, center, right and Justify.
The technique used to smoothen the ragged edges and sloppy-
looking type is called as anti-aliasing.

The sub-sets of the serif typefaces are ‘oldstyle’, ‘modern’ and ‘slab
serif’.
Photoshop and Illustrator have great typesetting features.
By using a specific CSS @font-face embedding technique it is
possible to embed fonts on client’s machine.
‘line-length’ is the distance between left and right edges of a text
block
Ideal line-length lies in between 40 to 75 characters including
spaces.
There are two methods for adding these types of characters.
− By character code number
− By character entity.
6.14 BIBLIOGRAPHY
http://www.desktoppublishing.com
http://www.microsoft.com
http://www.acdcon.com/webtyp.html
http://america.pink.html
www.pelfind.net
http://imwillryan.com/typefun01/
UNIT 7 CLIENT- SERVER ARCHITECTURE

Program Name: B.Sc (M. G. A.)
Written by: Miss Sonal Ramrao Dalvi,

Structure:
7.0 Introduction
7.1 Unit Objectives
7.2 Characteristics
7.2.1 Hitting the Wall
7.2.2 The Processor
7.2.3 The Application
7.2.4 What is a Server?
7.2.5 Elements of an Architecture Design
7.3 Architectural Components
7.3.1 Server-based Architectures
7.3.2 Client-based Architectures
7.4 Comparison with Client-Queue-Client Architecture
7.5 Comparison with Peer-to-Peer Architecture
7.5.1 P2P Networks: Characteristics and a Three-Level Model
7.5.2 Examples of P2P Clients
7.5.3 Legal Issues about P2P (IPR)
7.6 Client-Server Architectures
7.6.1 Client-Server Tiers
7.7 Advantages and Disadvantages of Architecture Options
7.7.1 Cost of Infrastructure
7.7.2 Cost of Development
7.7.3 Difficulty of Development
7.7.4 Interface Capabilities
7.7.5 Control and Security
7.7.6 Scalability
7.8 Summary
7.9 Key Terms
7.10 Exercises and Questions
7.11 Further Reading
1.0 INTRODUCTION
As the PC population grew, so did the networking movement. Use of

networking products from organizations and governments grew tremendously.

It became possible to share data encapsulated in files on Local Area Networks
(LANs). LANs allow users to share files, e-mails and data as if the information
was local to the client, but it was restricted to few meters of distance. So it was
further expanded to Wide Area Networks (WAN). A WAN is a
telecommunications network or computer network that extends over a large
geographical distance as shown in Figure 7.1.
Fig. 7.1 LAN and WAN connections
Single-user Data Base Management System (DBMS) s soon found that

LANs offered a new way to share database information by allowing several
users to access database files at the same time. These types of databases are
called as file oriented databases. Unlike single-user oriented DBMSs, these
multi-user versions could provide concurrency control or the ability for a
DBMS to control simultaneous access to tables and records making sure not to
damage the data with a concurrent write-access. However, this architecture had
severe limitations. You will learn about these in this unit.
As competition increased along with technical capabilities the cost of
networking devices and Personal Computers dropped sharply over the years.
New handy devices are immerged besides PC such as laptops, tablets, smart
phones. Apparently overnight, these devices found themselves connected to
some sort of network. So to provide information to user and maintain huge data
storage without any hassle new networking strategies get planned. In this unit
you will learn how these limitations have resolved and basic terms of it such as
Application and Servers.
In this unit you will learn the various architectural components and types of
architectures based it. You will also learn to identify basic differences between
peer- to- peer and client-queue-client architectures. In the end you will see
client-server architecture in detail and its advantages and disadvantages.

Define what architecture is
Identify various types of architectures

Identify the characteristics of different types of architectures
Identify the differences between pea-to-peer architecture client
architecture
7.2 CHARACTERISTICS:
7.2.1 Hitting the Wall:
This is a way to control the power of the PC for information processing
through the use of file oriented DBMSs, as well as the ability to share data
among users. However, there are limitations to the file oriented architecture.
These limitations include performance, security and scalability.
While using a file oriented database almost all the database processing
must occur at the client system, using a local database engine which leads to
performance problem. The file server only play a role to serves up the file, it
ever performs independent database processing on behalf of the client. Let us
understand this by looking at this example; when searching a large product
database for a particular product details, the file oriented database must
download the entire database file one chunk at a time to find a single product
record. File oriented databases have to load and unload data files across the
network each time. This result in highly inefficient method of processing
centralized database requests. It leads to performance problems as many users
hit the database files at the same time, as shown in Figure 7.2.
Fig. 7.2 File Oriented Databases

Moreover, since the database engines that reside on the client are
elementary, there are usually no additional security features such as 'rollback',
`rollforward' recovery, or logging. Because of this developers don’t have any
option to automatically recover the transaction when an error occurs.
With performance issues, scalability is another issue of the file oriented
architecture. As the number of approaching users increases, many file servers
simply cannot serve all the client requests for information relating to the files.
Thus, the response time is extremely delayed and slow for the users to manage.
In this situation worst case scenario could be a breakdown in the concurrency

control mechanism. This can damage the file(s), resulting in loss of massive
data.
7.2.2 The Processor:

When using client-server architecture, you divide the load of processing the
application between the client and the server. The processor allows the client to
perform its share of the application processing activity. All layers interact with
the processor in one form or the other. The type and speed of the processor you
use is dependent on your client's platform of choice. PC uses Intel processors
such as Core i5 and Core i7.
7.2.3 The Application:

‘Application’ is the software that the user interacts with. Application
provides all required business functions such as collecting data, data processing
and mining, calculations and printing. The application can be located in at the
client end or the server end of a system, but with the client-server model it
usually resides at both. For instance, consider an application written in
PowerBuilder using an Oracle database server, running remotely.
PowerBuilder lets the developer to create objects that run on the client end.
This is done by gathering user input, processing information and requesting
data as required from the Oracle database server.
The developer on the other end can also create objects that run on the
server, using built in stored procedures and trigger mechanisms that most
relational DBMSs provide. In simple language, stored procedures and triggers
are small procedural programs that exist and execute on the database server.
Developers may use stored procedures and triggers as a way to place some of
the application processing load on the server. This is usually done by using the
traditional two-tier client-server model. This only covers application
distribution capabilities in the two-tier client-server environment. There are
many other ways to distribute the load using the three-tier and multi-tier client-
server architectures. We will look at those in more detail in the following
section.
7.2.4 What is a Server?

A server is any machine or process that generally provides service to
another process. Typically, servers are computers that exist on a network
configured to provide a particular resource, such as files, data, the Web, or
application processing services.
In the world of client-server systems, you will see several scenarios in
which a server is used:
• File server:
It is a system on which data files for applications are stored. It shares files
and folder, storage space to hold files and folders, or both, over a network.

• Application Server:
It is also known as a type of middleware, it occupies a substantial amount
of computing region between database servers and the end user, and is
commonly used to connect the two. Hosts web apps (computer programs
that run inside a web browser) allowing users in the network to run and use
them, without having to install a copy on their own computers. Unlike what
the name might imply, these servers need not be part of the World Wide
Web; any local network would do.
• Database Server:
It maintains and shares any form of database (organized collection of data
with predefined properties that may be displayed in a table) over a network.
• Web Server:
It provides static content to a web browser by loading a file from a disk and
transferring it across the network to the user's web browser. This exchange
is intermediated by the browser and the server, communicating using
HTTP.
• Proxy server:
It acts as an intermediary between a client and a server, accepting incoming
traffic from the client and sending it to the server. The reasons for doing so
includes content control and filtering, improving traffic performance,
preventing unauthorized network access or simply routing the traffic over a
large and complex network.
• Communications server:
It maintains an environment needed for one communication endpoint (user
or devices) to find other endpoints and communicate with them. It may or
may not include a directory of communication endpoints and a presence
detection service, depending on the openness and security parameters of the
network.
7.2.5 Elements of an architectural Design:

The objective of architecture design is to determine which parts of the
application software will be assigned to which hardware. Hardware may be any
node in a network, such as printer, scanner. In this section, we will initially
discuss the major architectural elements of the software to understand how the
software can be divided into different parts.
Then we will briefly discuss the major types of hardware which can
carry respective software. Although there are numerous ways in which

software components can be placed on the corresponding hardware
components. There are three principal application architectures in use today:
server-based architectures, client-based architectures and client-server
architectures. In this unit, we focus on the most common architecture, i.e., the
client-server architecture.
What is file server?

How does the processor help the client?
What is an application?
List few types of server on the basis of scenario.
What is the objective of the architecture design?
7.3 ARCHITECTURAL COMPONENTS:
The main architectural components of any system are the software and the
hardware. Further the key software components of the system being developed
have to be recognized and then allocated to various hardware components on
which the system will operate as per the requirement. Each of the software
components can be combined in a variety of different ways.
All software systems can be divided as per four basic functions. They are
as follow:
1. Data storage:
For the processing of any request most information system requires data to
be stored and retrieved. Whether it is small file, such as a report summary
produced by word processor, or a large database, such as one store a
company’s inventory system records, retrieval is an important aspect.
These are the data entities documented in ERDs (Enterprise Resource
Diagrams)
2. Data Access Logic:

It is the processing required to access data from the database, which often
means database queries in SQL (Structured Query Language). This logic
shows how data from the database is fetched as per command.
3. Application Logic:
It is the logic documented in DFDs (Data Flow Diagram), Use Cases and
Functional Requirements. It shows how retrieved data will manipulate to
produce the output.

4. Presentation Logic:
It is the transmission of information to the user and the reception of the
user's commands (the user interface).
These four basic functions (data storage, data access logic, application
logic and presentation logic) are the basic foundation blocks of any information
system. The three primary hardware components of a system are client
computer, server and the network that connects them. Client computers are the
input - output devices employed by the user and are usually desktop or laptop
computers, but can also be handheld devices, cell phones, tablets, special
purpose terminals and so on. Servers are typically huge computers used to store
both, software and data that can be accessed by anyone who has authorization
for it. The purpose of a server is to share data as well as to share resources and
distribute work. Servers can come in several configurations: mainframes (very
large. powerful computers usually costing crores of rupees), minicomputers
(large computers costing lacs of rupees) and microcomputers (small desktop
computers like the one you use to ones costing few thousands rupees). The
network that connects computers can vary in speed from slow cell phones or
modem connections that must be dialed to broadband connections such as
cable modem, DSL and high speed Ethernet.
7.3.1 Server-based Architectures:

The very first computing architectures were server-based, with the server
(usually a central mainframe computer) performing all four application
functions. The client (usually terminals) enabled users to send and receive
message to and from a server computer. The client simply captured keystrokes
and sent them to the server for processing, accepting instructions from the
server on what to display as shown in figure 7.3
Fig. 7.3 Server -Based Architecture

This very simple architecture often works very well. Application software
developed and stored on one computer along with all the data. There is one
point of control because all messages flow through one central server. The
fundamental problem with server based networks is that the server must
process all messages. As the demand for more and more applications grows

many servers become overloaded and are unable to quickly process all the
users' demands. Response time becomes slower and network managers are
required to spend increasingly more money to upgrade the server computer.
Unfortunately, upgrades come in large increments and are expensive; it is
difficult to upgrade 'just a little’.
7.3.2 Client-based Architectures:

With client-based architectures, the clients are microcomputers on a local
area network and the server computer is a server on the same network. The
application software on client computers is responsible for the presentation
logic, the application logic and the data access logic. The server simply stores
the data, as shown in Figure 7.4.
Fig. 7.4 Client-Based Architecture

This simple architecture often works very well. However as the demand for
more and more network applications grow, network circuits can get
overloaded. The fundamental problem in client-based networks is that all data
on the server must travel to the client for processing. For example, suppose the
user wishes to display a list of all employees with company life insurance. All
the data in the database must travel from the server, where the database is
stored, over the network to the client. The client then examines each record to
see whether it matches the data requested by the user. This can overload both
the network and the power of the client computers.
7.4 COMPARISON WITH CLIENT-QUEUE-

CLIENT ARCHITECTURE
In Client-Queue-Client architecture, all end terminals including the servers
are simple clients. In this architecture the server is located on the external
software. Client-Queue-Client architecture is also referred to as passive queue
architecture. This model was developed to grow traditional client-server
architecture. It has been developed for trying to make one client as a server for
different clients, thereby multiplying the potential usage for clients.
Client-Queue-Client architecture uses a passive queue that allows client
instances to communicate directly with each other and refine their request from
servers. Servers act as passive queues that can be, for example, a relational
database, that is also central to traditional client-server networks.

A passive queue thus allows one software instance to pass one query to
another software instance. The last instance then communicates the query to
the passive queue (database) and retrieves the response data in a scheduled
manner. This response is then transmitted to the server which then transmits it
back to the original client instance to answer the client response. This
architecture was developed to simplify repeated software implementations.
Although it has evolved into a Peer-to-Peer architecture is practically obsolete
today.
7.5 COMPARISON WITH PEER-TO-PEER

ARCHITECTURE:
In Information technology Peer-to-Peer (P2P) has become one of the most

widely discussed terms. Peers are equally privileged, equipotent contributors in
the application. Peers make a part of their resources, such as processing power,
database storage or network bandwidth, directly accessible to other network
members, without any need for central organization by servers or stable hosts
as shown in Figure 7.5. The architecture was popularized by the file sharing
system Napster, originally released in 1999.
Fig. 7.5 P2P Architecture

In contrast to client-server networks, P2P networks promise improved
scalability, lower cost of ownership, self- organized and decentralized
coordination of previously underused or limited resources, greater tolerance to
faults and better support for building ad-hoc networks. In addition, P2P
networks provide opportunities for new user scenarios that could barely be
implemented using customary approach.
7.5.1 P2P Networks: Characteristics and a Three-Level Model

The mutual provision of distributed resources and services, decentralization
and autonomy are the basic characteristics of P2P networks. A few details
about these characteristics have been discussed as follows:

1. Sharing of distributed resources and services:
In a P2P network each node can provide client as well as server
functionality. That means, it can act as both a supplier and a consumer of
services or resources, such as information, files, bandwidth, storage and
processor cycles. Occasionally, these network nodes are referred to as
servants-derived from the terms client and server.
2. Decentralization:
Decentralization means there is no central managing authority for
organization of the network or the usage of resources and communication
between peers in the network .This relates in particular to the point that no
node has central control over the other. In this respect, peers can
communicate directly. Frequently a distinction is made between pure and
hybrid P2P networks. Due to the fact that all components share equal rights
and equivalent functions, pure P2P networks represent the reference type of
P2P design. Within these structures there is no entity that has a global view
of the network. In hybrid P2P networks, selected functions, such as
indexing or authentication, are allocated to a subset of nodes that as a
result, assume the role of a coordinating entity. This type of network
architecture combines P2P and client-server principles.
3. Autonomy:
In a P2P network each node can separately control when and to what extent
it makes its resources available to other entities.
P2P can be understood as one of the oldest architectures in the world of

telecommunication on the basis of these characteristics. In this sense, the
Usenet, with its discussion groups and the early Internet, or ARPANET, can be
classified as P2P networks.
The three level model presented in Figure 7.6 below which consists of P2P
infrastructures, P2P applications and P2P communities which will elaborate the
terminology of P2P networks.
As shown in figure 7.6, level 1 represents P2P infrastructures. P2P
infrastructures are situated above existing telecommunication networks, which
act as a foundation block for all levels. P2P infrastructures provide
communication, integration and translation functions between the components
of the IT infrastructure. They provide services that support in detecting and
communicating with peers in the network and recognizing, using and
exchanging resources as well as initiating security processes, such as
authentication and authorization.
Level 2 consists of P2P applications that usage the services of P2P
infrastructures. They are geared to assist communication and collaboration of
entities in the absence of a centrally controlled unit.
Level 3 focuses on the phenomenon of social interaction, in particular, the
formation of communities and the dynamics within them. In contrast to Levels

1 and 2, where the term peer essentially refers to technical entities, in Level 3
the significance of the term peer is not interpreted in a technical sense.
Fig.7.6 Levels of P2P Networks
7.5.2 Examples of P2P Clients
BitTorrent: BitTorrent is one of the most popular peer-to-peer file

sharing protocols used on the Internet. This is one of finest,
fastest, secure and commonly used p2p program.
Performance of BitTorrent is way better than any other
available P2P programs. It provides good quality of Films,
videos, audio, television and computer application. Most of
the users download films and videos which are from public
domain. It causes a major amount of traffic on the Internet.
Ares Galaxy: Ares Galaxy is a robust P2P sharing application,

which is not only powerful but also very user friendly. It can
be used for sharing anything from audio and video, to
applications and documents. It uses its own decentralized
network for better performance, and includes a powerful
built-in search functionality that you can be used to find the
content that you’re looking for in seconds. Once found, you
can simply download it.
Ares Galaxy also consists of built-in chat
functionality, audio & video player controls that can be used
to preview downloaded media files.
DistriBrute: DistriBrute is peer-to-peer (P2P) desktop deployment

product exclusively developed for business use, the world’s
first of its kind. Using the P2P protocol, DistriBrute enhances
the speed of the network and removes the need and expense

of decentralized distribution servers. It provides a secure
centralized, well-organized, very scalable deployment
environment. It is possible to transfer thousands of desktops
to a new Operating System and quickly install new
applications and drivers by using DistriBrute at once. The
time requires for DistriBrute to do the entire job is few
minutes!
Pando: Pando is a personal P2P program, much similar to

BitTorrent but focused toward for those looking for a simple
and safe means of file transfer. By using it users may email,
IM, or post to their website a file with .pando extension.
When the intended receiver downloads the .pando file, the
Pando software contacts a secure Pando server (much like the
“tracker” in the BitTorrent system) and permits the sender to
start a direct P2P transfer to the recipient.
Shareaza: It is a powerhouse application which makes quick

work of downloading files of all types and sizes over P2P
networks. At a time it can connect to up to four P2P
networks, which not only provides access to a much larger
user base, but also results in super-fast file transfers.
Shareaza has great functionality, it comes with a
powerful file hashing system, which automatically detects
the corrupted files and fixes them, before the download even
finish. The well-organized global search helps you to find the
content that you’re looking for in seconds. You can also
refine the search can by specifying advanced parameters like
the file type, size, and the networks to be searched.
uTorrent: uTorrent is the most popular torrent client in the world

with good reason. It is lightweight and fast. It has many
features like RSS downloader; Multiple simultaneous
downloads downloading, Bandwidth configuration and IPv6
support. It also allows you to legally download music or
videos from artists around the world.
7.5.3 Legal Issues about P2P (IPR)

Due to the large scale amount of file sharing there are various legal and
copyright implications related to P2P file sharing. As well as the increasing
number of P2P users has further lead to a sharp rise in copyright and legal
complications. The following are the most dominant legal and copyright issues
concerning P2P tile sharing:
You must be familiar with the concept of copyrights. Copyright can be
defined as the legal right of a creative artist or publisher to control the use and

reproduction of their original works. When using someone's original content it
is compulsory to pursue the approval of the person holding the copyrights, the
failure of which would lead to legal consequences. Most of the times obtaining
copyright permission involve payment and legally binding terms and
conditions. Copyright concerns of P2P tile sharing are mostly troublesome for
music and movie tiles that are shared on the P2P file sharing networks. Music
and videos shared online are bound to violate certain copyright laws as they
belong to the musicians, production companies or other creative artists who
own the copyrights Thus, sharing and receiving of files without approval
violate these laws and this is an illegal crime under the Copyright Act, 1957.
Further legal issues concerning P2P file sharing above and beyond
copyright include identity theft, pornography and other illegal files. Identity
theft is gradually on a rise and is budding as a major hurdle to P2P file sharing.
Identity theft can be avoided by making use of firewalls and other safety
features to protect personal files. There have been cases in which personal
information stored in individual systems has been used to hack into credit
accounts.
Another legal concern linked with P2P files sharing is downloading illegal
files including pornography. Sometimes illegal pornography may get attached
to some other file without the use being aware of it which can lead to legal
difficulties.
Thus, it is essential to safeguard against various legal permissions and
copyright concerns related to P2P file sharing. For this, seeking copyright not
sharing files that have copyright issues is recommended. Further, the use of
firewalls and other safety precautions available on most P2P file sharing sites is
advisable.

What are the major architectural components of any system?
What are the four basic functions of a software system?
What are the three primary hardware components?
What are the three levels of a peer-to-peer architecture?
What is copyright term?
7.6 CLIENTS-SERVER ARCHITECTURES:

Client-Server Architecture, which is the prototype for communication over
Internet, separates client programs from server programs. These endpoints
communicate through a network and are also known as called nodes, which are
any device, connected by a network. Today most organizations are moving to
client-server architecture which attempt to balance the processing between the
client and the server. In this architecture, the client is responsible for the
presentation logic, whereas the server is responsible for the data access logic
and the storage of data. The application logic may reside on the client, or on
the server, or be split between both, as shown in Figure 7.7.

Fig 7.7 Client-Server Architecture
If the client shown in Figure 7.7 contains all or most of the application logic, it
is referred to as a thick or fat client as shown in Figure 7.8 (a). Generally fat
clients are devices/programs that are dominant enough and operate with limited
dependency on their corresponding server.
Currently, thin clients as shown in Figure 7.8(b), containing just a small
portion of the application logic are popular because of lower overhead and
easier maintenance but on the other hand they are heavily dependent on their
server. For example, many web based systems are designed with presentations
which perform web browser functions. However, only minimal application
logic uses programming languages such as JavaScript, while the web server has
most of the application logic along with all of the data access logic and all of
the data storage.
(a)
(b)
Fig. 7.8 Fat and Thin client
Client-server architectures have four important benefits:

1. Scalable:
They have ability to scale; this means it is easy to increase or decrease the
storage and processing capabilities of these servers. If one server becomes

overloaded, you simply add another server so that many servers are used to
perform the tasks of application logic, data access logic, or data storage.
The cost to upgrade is much more gradual and you can upgrade in smaller
steps rather than spending hundreds of thousands to upgrade a mainframe
server. Client-Server architecture can support many different types of
clients and servers. It is possible to connect computers that use different
operating system so that users can decide the type of computer they prefer
(e.g., they can combine both Windows computers and Apple Macintoshes
on the same network). You are not limited to one vendor, as is often the
case with server based networks.
2. Use of Middleware:
Middleware is a type of system software designed to translate between

different vendors' software. In order to couple the server and client parts
from heterogeneous environments in an efficient way, the basic client
server architecture is extended by a new component. Middleware is
installed on both the client computer and the server computer.
It performs the following main activities:
- Translation between the different protocols
- Optimization of the load-balancing
- Security control
- Management of the connections
Fig. 7.9 Middleware

The middleware may contain several components. The components
may reside on the server node, on the client node or on a new middleware
node.
3. Easy partitioning of basic functions:
For thin client-server architectures that use Internet standards, it is simple

to separate the presentation logic, the application logic and the data access
logic. For example, the presentation logic can be designed in HTML or
XML to specify how the page will appear on the screen. (E.g. the colors,

fonts, order of items, specific words used, command buttons, type of
selection list and so on). Simple program statements are used to link parts
of the interface to module of the specific application logic that performs
various functions. These HTML or XML files defining the interface can be
changed without affecting the application logic. Likewise, it is possible to
change the application logic without changing the presentation logic or the
data, which are stored in databases and accessed by SQL commands.
4. Reliable Network:
Because no single server computer supports all application, the network is

generally more reliable. There is no central point of failure that will halt the
entire network if it fails, as there is with server- based architecture. If any
one server fails in client-server architecture, only the application requiring
that server will fail; the network will continue to function with all other
servers.
Client-server architectures also have some critical limitations, the most
important of which is their complexity. All applications in client-server
computing have two parts, the software on the client and the software on the
server. Writing this software is more complicated than writing the traditional
all-in-one software used in server-based architectures. Updating the network
with a new version of the software is more complicated, too. In server-based
architectures, there is one place in which application software is stored; to
update the software you simply replace it there. With client-server
architectures, you must update all clients and all savers.
The factor of cost has been the root of the debate, in terms of server-based
and client-server architectures. Certainly, the decrease in dramatic cost and
increase in performance of microcomputers over the last two decades have
made them an important element of today's computer architectures. The total
cost of ownership, however, comprises factors beyond just the hardware and
software costs. For example many cost comparisons overlook the increased
complain associated with developing application software for client-server
networks. Most experts believe that it costs four to five times more to develop
and maintain application software for a client-server environment than it does
for a server based one.
7.6.1 Client-Server Tiers

On the basis of distribution of the functionality over the client and server,
different types of architectures are defined.
One-tier client-server architecture:

It is used to define systems in which all of the processing is done on a
single host or node. Users can access such systems through display terminals
but what is displayed and how it appears is organized by the mainframe.

Further the Application logic can be partitioned in many ways between the
client and the server. In this case the server is responsible for the data and the
client is responsible for the application and presentation. This is called two-tier
architecture because it uses only two sets of computers- client and server.
Two-tier client-server architecture:

The simplest and common way to connect clients and servers is two-tier
architecture as shown in Figure 7.10. In two-tier architecture, any client can get
service from any server by initiating a request over the network. With two tier
client-server architectures, the user interface is usually located in the user’s
desktop and the services are usually supported by a server that is a powerful
machine that can service many clients. Processing is split between the user
interface and the database management server. There are a number of software
vendors who provide tools to simplify development of applications for the two-
tier client-server architecture.
Fig. 7.10 Two-Tier Architecture

Three-tier architecture uses three sets of computers, as shown in Figure
7.11. In this case, the software on the client computer is responsible for
presentation logic, an application server is responsible for application logic and
a separate database server is responsible for the data access logic / data storage.
Fig. 7.11 Three-Tier Architecture

An n-tiered architecture distributes the work of the application among multiple
layers of more dedicated server computers. This type of architecture is
common in today's web-based e-commerce systems, as shown in Figure 7.12.
The most general occurrence of a n-tier or multi-tier architecture is a three-tier
architecture consisting of a data management tier (mostly including one or

several database servers), an application tier (business logic) and a client tier
(interface functionality).
Fig. 7.12 n-Tiered Client-Server architecture
A component in one of the middle tiers is client to the next lower tier and at the
same time acts as server to the next higher tier. The main benefit of multi-tier
applications over a two-tiered architecture is that each tier can be installed on
different heterogeneous and distributed platforms. Load balancing within tiers,
particularly for the application tier, is maintained by distributing requests
across the different application server instances. To put it across in a more
simple way, an n-tier architecture is more scalable. The configuration as shown
in Figure 7.12 provides more power than that provided if we had used a two-
tiered architecture with only one server. If you discover that the application
server is too heavily loaded, you can simply replace it with a more powerful
server or just put in several more application servers. Conversely, if you
discover that the database server is underused, you could store data from
another application on it.
There are two crucial disadvantages to an n-tiered architecture compared
with a two-tiered architecture (or a three-tiered with a two-tiered).
1. The configuration sets a greater load on the network. If you compare

Figures 7.10, 7.11 and 7.12 you will see that the n-tiered model requires
more communication among the servers; it generates more network traffic,
so you need a higher-capacity network.
2. It is much more difficult to program and test software in n-tiered
architecture than in two-tiered architecture, because more devices have to
communicate to complete the users’ transaction.
7.7 ADVANTAGES AND DISADVANTAGES OF

ARCHITECTURE OPTION:
Today to support the fast growing technology many organizations now
have a large range of infrastructures in use or are actively looking for

experimental projects to test new architectures and infrastructures. This allows
the project team to select architecture on the basis of the important factors.
Each of the architectures discussed in this unit has its strengths and
weaknesses. Not one architecture is fundamentally better than others. Thus, it
is important to realize the strengths and weaknesses of various computing
architectures and when to use each. Table 7.1 presents a summary of important
characteristics of each of the architectural options.
Table 7.1 Characteristics of Computing Architecture.
Server-based Client-based Client-Server
Cost of Infrastructure Very high Medium Low
Cost of Development Medium Low High
Difficulty of
High Low Low-Medium
Development
Interface Capabilities Low High High
Control and Security High Low Medium
Scalability Low Medium High
7.7.1 Cost of Infrastructure:

Client- Server architectures are strongly preferred on the basis of the cost
of infrastructure (the hardware, software and networks that will support the
application system). Ever since the personal computer of today has remarkable
performance capabilities and low cost, the cost of client-server architecture is
low compared to server- based architectures that depend on the mainframes.
Client- server architectures are also cheaper than client-based architecture,
because they place less loads on networks while communication and thus
requires less network capacity for efficient data transmission.
7.7.2 Cost of Development:

Developing applications for client-based architectures is a low cost thing,
due to the availability of many Graphical User Interface (GUI) development
tools for this environment (e.g., Raptool, CodeLite and MySQL). On the other
hand, most experts believe that due to their high complexity, developing and
maintaining client-server applications is four to five times more expensive than
server-based applications. This cost difference may change as more companies
gain experience with client-server applications. Once new client-server
products are developed and advanced, client-server standards will mature.
Given the inherent complexity of client-server software and the need to

manage the interaction of software on different computers, a difference in the
cost of development is likely to remain.
7.7.3 Difficulty of Development:

Among all systems Server-based systems are difficult to develop, because
the tools used to create server-based systems are often not very user-friendly
and therefore require expert skills that are difficult to acquire. In contrast to
this, GUI development tools used to create applications for the client-based and
client-server architectures can be intuitive and easy to use. The development of
applications for these architectures can be fast and simple. An important point
here to be kept in mind is that client-server architectures do involve the added
complexity of several layers of hardware (e.g., database servers, web servers,
client workstations) that must communicate effectively with each other. Project
teams often miscalculate the difficulty associated with creating secure, efficient
client-server applications.
7.7.4 Interface Capabilities:

In Server-based applications user interface is typically presented in a plain,
character-based format. This interface can be quite great for the skilled user but
requires the average user to have significant training in order to use the
numerous commands and codes that are needed to navigate through the system.
Today, general system users expect a GUI or a web based interface integrating
mouse-driven commands and graphical objects (buttons, icons, etc.). GUI and
web development tools are used to create client-based or client-server
applications. Rarely can server-based environments support these types of
applications.
7.7.5 Control and Security:

The server-based architecture was initially developed to control and secure
data and has a major advantage of having all data stored in a single location. In
contrast, the tools available for security in client-based systems are nominal.
The client-server architecture requires a high degree of coordination among
many components and so the chance for security holes or problems is fairly
high. The hardware and software environment used in client-based and client-
server systems is still maturing in terms of security. When an organization has
a system that absolutely must be secure (e.g. an application used by the
government’s Department of Defense), then the project team is more likely to
accomplish this goal with the server-based architecture option.
7.7.6 Scalability:
The term Scalability refers to the ability of increasing or decreasing the
capacity of the computing infrastructure in response to the varying capacity

needs. Client-server is the most scalable architecture, because servers can be
added to (or removed from) the infrastructure, when processing needs change.
The types of hardware that are used in client-server architecture (e.g.
minicomputers) typically can be upgraded at a pace that most closely matches
the growth of applications. In contrast, server-based architectures depend on
primarily on mainframe hardware that must be scaled up in large and expensive
increments. Client-based architectures have a limit beyond which the
application cannot grow, because increase in use and data can result in an
unacceptable increase in network traffic.

What is one critical limitation that client-server architectures have?
What is the primary advantage of n-tier architecture?
What can we do if the application server is too heavily loaded?
Describe any one disadvantage server-based architecture has over
client-server architecture
Why are client-server architectures cheaper than client-based
architectures?
Which is the most scalable architecture and why?
7.8 SUMMARY
• The number of computer users consistently keeps on increasing along with
the density of the network. Both being directly proportional, it results in a
rapid loading and unloading of data files across the network. Speed is
mainly impacted due to simultaneous use of the architecture system by
many people across the network.
• As the technical advancement grows, so do negations like security threat,
the worries of a system breakdown or failure or control mechanism also
appear.
• We see several types of architectures like the server-based, client-based,
client-server, client-queue-client and peer-to-peer. Application is that
software which is the backbone of any architecture and is an interface
between the system and the network.
• In server-based architecture, server and clients form parts of the
architectural network. Servers and clients are related in a way that clients
access files from servers. We can rather say that servers work to serve
clients. Servers are mainly categorized into: file, application, web and
database servers.

• In client-queue-client architecture, all endpoints that also include the
servers are simple clients. The server is located in the external software.
• Peer-to-peer architecture is a type of network wherein every workstation is
equipped with equivalent capabilities and responsibilities.
• A network architecture in which each computer or process on the network
is either a client or a server. Clients rely on servers for resources, such as
files, devices, and even processing power.
• Two-tier architecture uses two sets computers, i.e. Clients and servers.
Three-tier architecture differs such that it uses three sets of computers in
such a way that the client computer is responsible for the presentation
logic, the application server holds responsibility for the application logic
and a separate database server is responsible for the data access logic and
data storage functions. Then, we have the n-tiered architecture which is
associated with e-commerce, where work is distributed among many
specialized computer systems.
• Each architecture system has its positive and negative traits. It depends on
the kind of requirement of an organization depending on which key traits it
can compromise on and which ones are simply mandatory to be accurate.
• Scalability is very important for a growing organization. Scalability is that
feature which simplifies alteration or introduction of changes to an
architectural network without any major transitions. The higher the
scalability, the more preferred the network will be.
7.8 KEY TERMS

• Application: Software that the user interacts with and which provides all
required business functions such as gathering data, data processing,
calculations and printing.
• File servers: Provide files to clients as needed
• Application semen: Specialized computer that exist on a network and
perform all sort of application processing services.
• Database servers: Computers that exist on a network and provide database
processing services upon request from the client
• Peer-to-peer: The Concept that in network of equal (peer) using
appropriate information and communication system, two or more
individuals are able to spontaneously collaborate without necessarily
needing central coordination.

• Scalability: Property of a system that can accommodate changes in
transaction volume without major changes to the system.
• Microcomputer: This term includes desktop, portable computers and
Tablet PCs.
7.10 END QUESTIONS:

1. Define a client-server architectural model.
2. Describe an application, processor and servers in brief.
3. What are servers? Define and explain the basic forms of servers.
4. How software systems can be divided by basic functions?
5. Describe different architectural systems based on distribution of
software functionality?
6. What is P2P architecture? Explain it briefly.
7. List 5 examples of P2P architecture.
8. What are the benefits of a client-server model?
9. Write a note on Fat and thin client, middleware.
10. What are the different tier architectures? Explain any two of them.
11. What are the two primary disadvantages that an n-tiers architecture
has compared to a two-tier architecture.
12. Discuss advantages and disadvantages of each type of architecture
on the basis of common parameters.

File server is a system on which data files for applications are stored. It
shares files and folder, storage space to hold files and folders, or both,
over a network.
The processor allows the client to perform its share of the application
processing activity in architecture.
Application is the software that the user interacts with.
Database servers, Web servers, File servers.
The objective of architecture design is to determine which parts of the
application software will be assigned to which hardware.

Major architectural components of any system are the software and the
hardware.

Data storage, Data Access Logic, Application Logic and Presentation
Logic.
The three primary hardware components of a system are client
computer, server and the network that connects them.
Level 1 represents P2P infrastructures,
Level 2 consists of P2P applications,
Level 3 focuses on communities.
Copyright can be defined as the legal right of a creative artist or
publisher to control the use and reproduction of their original works.
Client-server architecture’s most important critical limitation is its

complexity.
The main advantage of multi-tier applications is that each tier can be
installed on different heterogeneous and distributed platforms. Which
means it is more scalable.
If the application server is too heavily loaded, you can simply replace it
with a more powerful server or just put in several more application
servers.
Server-based systems are difficult to develop over client-server system.
Client- server architectures are cheaper than client-based architecture,
because they place less loads on networks while communication and
thus requires less network capacity for efficient data transmission.
Client-server is the most scalable architecture, because servers can be
added to (or removed from) the infrastructure, when processing needs
change.
7.11 BIBLIOGRAPHY:
• www.wifinotes.com/computer-networks/server-types.html
• www.blogsdna.com
• www.careerbless.com
• what-when-how.com
• http://utopia.duth.gr/rdunayts/
Note: Previous version of Unit 8 was taken as it is from the

books mentioned below in irrelevant manner. As topics and

descriptions were not in sync with the current scenario I have
changed some bullets and added new information description in
today’s point of view for E-Commerce.
////https://books.google.co.in/books?id=qAMtUzo00BMC&pg=PA187&lpg=P
A187&dq=early+attempts+of+reference+model+for+e-
business&source=bl&ots=-
RrcbOyuO0&sig=K62wyyCTjfhV6g_tdC73s5qGvp4&hl=en&sa=X&sqi=2&v
ed=0ahUKEwiIjcPa1OXLAhWDVo4KHQ21CHEQ6AEIHTAB#v=onepage&
q&f=true
https://books.google.co.in/books?id=Hw0pbYlFA14C&pg=PA333&lpg=P
A333&dq=early+attempts+of+reference+model+for+e-
business&source=bl&ots=z4bK-
zh10F&sig=Vn83LK7AM2H36RSb2SPEZ2T2ReQ&hl=en&sa=X&sqi=2&ve
d=0ahUKEwiIjcPa1OXLAhWDVo4KHQ21CHEQ6AEIGzAA#v=onepage&q
=early%20attempts%20of%20reference%20model%20for%20e-
business&f=false
UNIT 8 INRODUCTION TO E-COMMERCE

Program Name: B. Sc. (M.G.A.)
Written by: Miss Sonal Ramrao Dalvi,
Structure:
8.0 Introduction
8.1 Unit Objectives
8.2 Business Strategy – An Introduction
8.3 Building on Existing Pre-Internet Models
8.4 Online Businesses
8.5 Types of E-Business
8.5.1 The Advantages of E-commerce
8.6 E-Commerce Infrastructure
8.7 Future of the E-Business
8.7.1 Future Trends
Summary
Key Terms
End Questions
Bibliography
8.0 INTRODUCTION
In the past few years, enterprises across the globe have experienced
major changes in their business information system. Huge investments were
made in enterprise resource planning system implementations but still they
struggle to get timely information that is needed to make effective business
decision and to ensure continuous growth of enterprises.
The emergence of the Internet throughout the world has been
contributing such a variety medium in doing business as well as people
lifestyle. In fact, Internet is the important prerequisite for the existence of E-
commerce. Electronic commerce or E-Commerce has been defined as the
capability to perform transactions involving the exchange of merchandises or
services between two or more parties using electronic tools and procedure. You
will learn few basic models which are inherited from traditional business to
enhance techniques used in the E-Commerce. The explosion of E-Commerce
has created new phenomena in our lifestyle especially in shopping activities.
Consumers can easily purchase products starting from the pen drive to home
theatre and services from food delivery to airlines tickets via Internet.

E-Commerce is buying and selling goods and services over the
Internet. Ecommerce is part of online business. You will see types of online
business by which you can generate revenue. These types of businesses include
generating demands for products and services, proposing sales support and
customer service, or assisting communications between business partners.
There are various types of E-Commerce depending upon the parties involved in
business. You will learn different types of scenarios in E-Commerce.
An Electronic business, having a good infrastructure can result in
better transactions, wide market coverage by offering the advantages such as
speed, convenience, cost effectiveness it has a bright future. You will learn few
incoming trends for tech savvy consumers which E-Commerce will lead in
near future.

Describe e-business strategies
Explain business models which are built on Pre-Internet business
models
Start different types of online businesses
Identify the importance of E-Commerce infrastructure
Explain future aspects of the E-Commerce
8.2 BUSINESS STRATEGY –

AN INTRODUCTION:
8.1 E-Business strategy
Strategic management is about defining the purpose and aims of an
organization, choosing the most appropriate courses of action towards
achieving those aims, and fulfilling the aims over a set period of time. The
framework has four fundamental stages as shown Figure 8.1
1. Initiation:
Organization collects and analyses the information about business or
company and organizes its vision, mission and purpose.
Chandler (1962) describes strategy as ‘the determination of the basic long-
term goals and objectives of an enterprise, and the adoption of courses of
action and the allocation of resources necessary to carry out those goals’.
The first part of Chandler’s definition relates to objectives setting. This
includes:

• The mission statement: It communicates the prime purpose of the
organization.
• The vision: Managers have to be able to communicate a vision of what

the organization is all about and where it wants to be in the future; it
describes the goals of the organization.
• Objectives: It communicates the specific outcomes that need to be

achieved such as sales, turnover, market share, rates of growth, etc.
Figure 8.1 Business Strategy
2. Formulation of strategy:
It involves high-level analysis that may make use of management tools

such as Porter's Five Forces, SWOT, PEST and other analyses. It can be
viewed as a series of decisions and actions that are taken to achieve stated
aims and objectives. These decisions and actions are based on analysis of
key elements of the strategic process. For example the analytical part of the
strategic planning comprises internal (strengths and weaknesses) and
external analysis (opportunities and threats) which is called as a SWOT
analysis tool. This analysis helps to identify the key strategic issues. The

key strategic issues are the ones considered most important that require
attention and are given a high priority rating.
Once the strategic issues have been identified the next stage involves
the evaluation of the options available and the selection of strategy. In this
phase Strategic objectives are translated into practical project designs and
plans. Electronic technology capabilities are matched with the objectives.
Evaluation of each option is undertaken using the criteria of:
• Suitability: the option is only suitable if it empowers the organization

to achieve its objectives.
• Feasibility: the option has to be possible within the skills, experiences

and resources available to the organization.
• Acceptability: the option must be acceptable to investors. The level of

power and influence held by different stakeholder groups (directors,
shareholders, managers, consumers, etc.) and their inclination to use
that influence and power will determine the acceptability of options.
Mostly, it is executives in private organizations who have the most
influence and power and who determine the choice of options.
• Scope for gaining a competitive advantage: the option must result in

higher performance leading to a competitive advantage over
competitors.
Strategy is decided at corporate level and communicated to business

level managers. The practical implementation of strategy is usually carried
out at the business or functional level of management in organizations.
3. Implementation:
Once a strategy has been formulated, the next phase is implementation.
Strategic implementation is the practical actions taken to execute a strategic
choice. However, in order to implement a strategy successfully, firms need
to put in place effective strategic controls that link strategy with
performance. Two key elements form the strategic control process
Informational control and behavioral control.
• Informational control focuses on monitoring the effectiveness of linking

what actions have been decided upon with those that are actually

carried out. It helps managers determine the strategic fit between the
firm’s objectives and the chosen strategies.
• Behavioral control focuses on the amount to which the actions
undertaken are correct and meet set performance standards.
4. Evaluation:
The project needs to be evaluated against the original project plans for
specification, time and budget compliance. Most importantly, you must
measure the business performance of the strategic initiative in action. The
evaluation should reveal whether or not the organization’s strategy is
achieving the stated objectives. The most common feature of evaluation is
comparing set targets with performance achieved. This is likely to include
quantitative measures on sales, profit, and turnover and market share. Firms
in e-business and E-Commerce evaluate the performance of the website in
attracting consumers and transforming ‘hits’ into sales (conversion rate).
The strategy evaluation should expose whether or not change is
necessary. If change is necessary then the evaluation should also point to
the extent to which change should be implemented. Change can range from
minor variations to the business model or the way the internal functions are
carried out, to fundamental change management or even a paradigm shift in
thinking about what the business is all about. Redesigning strategy is likely
to prove risky, expensive and time-consuming.
Check Your Progress 1

What is E-Commerce?
What is the important prerequisite for the existence of E-

commerce?
List four fundamental stages of business strategy.
What is SWOT?
What are the criteria used for Evaluation of each option?
Explain ‘Behavioral control’

8.3 BUILDING ON EXISTING PRE-INTERNET
MODELS:
The global business environment is moving faster than ever before.
Increased competition at home and abroad means quality as well as
profitability must be preserved by corporate houses. This pressure has directed
to a reassessment of the accepted existing pre-Internet business practice in the
search for better outcome. Following are few models described which are
derived from pre-Internet models.
• Internet Open Trading Protocol (IOTP)
Internet Open Trading Protocol (IOTP) is a set of interoperable

standards that makes all electronic purchase transactions consistent for
consumers, merchants, and other involved parties, irrespective of payment
system. IOTP accommodates a wide range of payment systems such as
Secure Electronic Transaction, e-checks, digital cash, and debit cards.
Payment system data is encapsulated within IOTP messages. IOTP is
designed to handle a transaction that contains a number of different parties:
the customer, merchant, credit checker and certifier, bank, and delivery
handler. Important characteristic of IOTP uses the Extensible Markup
Language (XML) to define data that encompasses everything that may be
needed in a transaction.
In today’s world, while thinking of buying anything you can negotiate

certain factors. These factors consist of choosing who you conduct business
with, whether it will be conducted in person or by phone, the mode of
payment, the provision of a payment receipt, and the delivery of the
product. In the virtual world, IOTP is designed to guarantee that all of these
factors will perform successfully and securely.
Companies contributing to the development of IOTP include Hewlett

Packard, IBM, JCP, MasterCard International, Smart Card Integrations,
Sun Microsystems, and Wells Fargo Bank.
• Secure Electronic Marketplace for Europe (SEMPER)
This is a project sponsored by the European Commission. SEMPER

model of electronic commerce assumes that any business situation is made
up of a number of standard business processes, which may be further
decomposed into a sequence of unidirectional and/or bidirectional
exchanges of business items. SEMPER documentation uses the terms
'transfers' and 'fair exchange’ respectively, In that respect, the model

appears to be a well thought out blend of business and technology
orientation.
The SEMPER model has another very exciting feature. Namely, it is a

based on the integrated model of `business items' including payments,
credentials and documents or statements. Each business situation is in fact a
sequence of exchanges of business items of different types-payments,
credentials and or documents, each of which is managed by a separate
service in the exchange management layer. Thus, (multiple) existing
implementations can be integrated into a unified service framework. For
example, the payment manager can provide basic services for handling
account and cash-style payments, together with the negotiation of the
means of payment. In this way, different payment systems may be
simultaneously installed and any of them can be used in an actual
transaction. This can be done while the appropriate negotiation may be
entirely transparent to the user.
• Open Buying on the Internet (OBI)
It is a suggested standard for business-to-business (B2B) purchasing on

the Internet, aimed particularly at high-volume, low-cost-per-item
transactions. You will learn in detail about B2B in next topic. OBI makes
use of a number of security technologies such as the digital certificate to
allow product orders to be placed and filled securely. On average, 80% of
company purchasing is for non-production supplies such as office supplies,
cleaning products, and computer equipment. In the fall of 1996, a group of
Fortune 500 buying organizations and their suppliers met to develop an
open standard for business-to-business E-Commerce. The outcome is OBI.
It is proposed to remove redundant work in purchasing, reduce the errors,
and minimize labor and transaction costs.
There are four entities involved in an OBI transaction:
1. Requisitioner: It is the person who places the order for the product/
service and must have a digital certificate for authentication.
2. Buying Organization: It maintains an OBI server that receives OBI
order requests and approves them. The buying organization also
conveys and maintains contracts with selling organizations.
3. Selling Organization: It is the responsibility of the selling organization
to provide a personalized catalog to each department in each company,
maintain products and cost based on contracts with the buying
organization.

4. Payment Authority: It authorizes payments with the appropriate
Selling Organization.
8.4 ONLINE BUSINESSES:
If you are looking for gaining some income from online resources, then
first you need to understand what type of online business model you would like
to create for yourself.
There are various types of ideas for online business opportunities, few of
them are listed below.
• E-Commerce Stores:
E-Commerce sites are the center for selling and buying goods through
the electronic medium like Amazon or flipkart etc. These sites can produce
massive amounts of profits once properly started and is therefore currently
the most profitable online business. Although they require a devoted staff
to manage and maintain the business but a quick start can even be initiated
from a home. Don’t forget big companies like Google, Amazon was started
from a single room.
Storage, distribution and supplying, product refunds and a whole list of

other responsibilities come under running an E-Commerce site.
A proper communication with buyers and sellers is important and

gaining traffic and converting prospects into consumers also plays a major
role in this E-Commerce based store.
• Blog / Magazine Publishing:

Blogs are websites designed for social interaction. This is one of the
easiest types of online home businesses. Typically a blog is a way of
communicating with a visitor of your blog about any and everything
from gadgets, technology, DIY, cooking recipes, and daily activities, to
health exercises, yoga and the trending news.
All you need is to create your own blog and start writing and publishing
content for it. In online business blogs are usually generated to build an
audience and educate them in a way that helps them improve a certain
aspect of their lives. Blogs generally allow individuals to comment, share
ideas, and communicate with the creator of the site or that sites team
directly through comments and email.

Content can be shared on a blog using any media such as text, video,
and audio. These types of websites can also use social media such as
Facebook, Twitter, and YouTube to share and spread their content.
Blogs have the ability to make income through software products,

affiliate links, e-books, educational material and other forms.
• Affiliate Marketing:
An online affiliate marketing is actually endorsing someone else
products and services on social media platforms or portals or either at your
own blogs and producing huge charges in return. Most of the top brands
usually pay between 10% - 30% commissions to their affiliates. All you
need is to find that hot product and make others buy it or click it. You can
choose your own brand depending upon your place.
• Review Websites:
Review sites are websites that post reviews about products or services
to allow visitors to make better buying decisions for whatever they are
trying to purchase. It helps in converting prospects into consumers.
A review site generally reviews the new products and service of some
top companies and gets rewarded fixed return. It is optional whether you
write about its qualities or not, all you need to do is to write a good true
review. For a single review post, you can easily earn depending upon the
traffic of the website.
These sites offer complete information about each product or service

and list of pros and cons of each to help the consumers find out which
product or service fits best for them.
What makes these sites so appealing is that most people looking at

review sites are ready to make a purchase and are looking for the best
product for their situation.
• Community Membership Websites:

A community membership website can be started anywhere and for
anyone. It could be for your local reader community or may be for the
global adventurers’ community or may be City community where you help
fellow newbies. This can be very interesting as a business model because
you aren’t selling a one-time product but creating a continuous revenue
stream which requires far fewer people to maintain a good source of
income.

Earnings are usually made by either advertisements campaigns or by
membership accounts which pay monthly subscriptions that allow the
person purchasing the membership to become part of a community, gain
valuable information on a topic that they consider important, learn valuable
skills through multimedia such as video, text, and images, and gain
exclusive offers from advertisements and promotions.
• Designing and Developing Websites

Few years ago website designing and developing was considered
roughly challenging but now days even an average fellow can start his own
website designing company. You will need few designing skills and logic
for a good website. You can use readymade templates for webpages from
website builder tools such as WordPress.
8.5 TYPES OF E-COMMERCE

Generally when you think about E-Commerce, you will only think of an
online profit-making transaction between a supplier and a consumer. However
to be more specific E-Commerce has divided into major types, depending upon
its characteristics. Let’s see some of them as follows:-
• Business-to-Consumer (B2C)
In a Business-to-Consumer E-Commerce environment, businesses sell
their online products directly to consumers who are the end users. Usually a
consumer can view products list shown on the website of business
organization. B2C E-Commerce web shops have an open access for any
visitor and user. As shown in Figure 8.2 the consumer can select a product
and places the order for the same. Website will send a notification to the
business organization via email and organization will dispatch the product
to the consumer. Business selling to the common public typically through
catalog utilizing shopping card or software.
Figure 8.2 Business-to-Consumer E-Commerce

• Business-to-Business (B2B)
In a Business-to-Business E-Commerce environment, businesses sell
their online goods to other businesses without being engaged in sales
directly to the consumers. Website following B2B business model sells its
product to an intermediate buyer who then sells the product to the final
consumer as shown in Figure 8.3. You need to log-in most B2B E-
Commerce environments before entering the web shop. B2B web shop
usually contains customer-specific pricing, customer-specific collections
and customer-specific discounts.
Figure 8.3 Business-to-Business E-Commerce
• Consumer-to-Consumer (C2C)
In a Consumer-to-Consumer E-Commerce environment consumers directly
sell their online products/ services to other consumers. Website following
C2C business model helps consumer to sell their assets like furniture,
motorcycles, electronic gadgets etc. or rent them by publishing their
information on the website. Website may or may not charge the consumer
for its services. Another consumer may opt to purchase the product of the
first customer by viewing the post/advertisement on the website as shown
in Figure 8.4.
The Business logic encloses all of the business guidelines that define the
way data is stored, created, displayed, calculated and is being recreated
inside an ERP or CRM system. For example: different product discounts
are applied for different consumer accounts. Well-known examples are
Quicker, eBay, OLX.

Figure 8.4 Consumer-to-Consumer E-Commerce
• Consumer-to-Business (C2B)
In a Consumer-to-Business E-Commerce environment, consumers
usually post their products or services online on some portal with or
without estimated cost to which businesses can post their offers. A
consumer analyses the offers and selects the firm that meets his estimated
cost. The process is shown in figure 8.5.
This type of E-Commerce is very common in crowdsourcing based
projects. A large number of individuals make their products/ services
available for purchase for companies seeking precisely these types of
products/ services.
Figure 8.5 Consumer-to-Business E-Commerce
• Business - to - Government (B2G)
B2G model is an alternative of B2B model as shown in Figure 8.6 .

Such websites are used by government to trade and exchange information

with various business organizations. Such websites are endorsed by the
government and provide a medium to business organizations to submit
application forms or tender form to the government as per requirements.
Figure 8.6 Business - to - Government E-Commerce
• Government - to - Business (G2B)

Government uses G2B model website to approach business
organizations. Such websites support auctions, tenders and application
submission functionalities. Figure 8.7 shows Government - to - Business E-
Commerce structure.
Figure 8.7 Government - to - Business E-Commerce
• Government - to - Citizen (G2C)

Government uses G2C model website to approach citizen in general as
shown in Figure 8.8. Such websites support auctions of vehicles,
machinery or any other material. Such website also provides services like
registration for birth, marriage or death certificates. Main goals of G2C
website are to minimize average time for fulfilling people requests for
various government services and reduce manual paperwork.
Figure 8.8 Government – to- Citizen E-Commerce

As you have learnt different types of E-Commerce, which are generally
used by various global business organizations and consumers. As a user of fast
growing technology you must learn the advantages and disadvantages of it.
8.5.1 The Advantages of E-commerce:
• Cost Effectiveness:
The entire commercial transactions will ultimately convert electronic, so

sooner conversion is going to be lower on cost. It creates all transaction
through E-Commerce payment a lot low-cost.
• Greater Margin:
E-Commerce also enables you to move better with greater margin for more
business safety. Higher margin also means business with more control as
well as flexibility.
• Improved Productivity:
Productivity here means productivity for both businesses and consumers.

Consumers like to find choices on Internet because it is faster and cheaper,
and it costs a lot reasonable payment as well for the business.
• Fast Comparison:
E-Commerce also enables you to compare price of a same product among a

number of providers. In the end, it leads you to smart shopping. You can
save more money while you purchase the product.
• Economy Profit:
E-Commerce lets us to make transaction without any needs on stores,

infrastructure investment, and other common things we find. Companies’
only requirements are well-organized website and consumer’s service.
• 24 x 7 Availability:
Consumers can do transactions for the product or survey about any product
or services provided by a website anytime, anywhere from any location.
Here 24x7 refers to 24 hours of each seven days of a week.
Check Your Progress 2
What is IOTP?
What is the main purpose of creating a blog?

What is the use of Review sites?
Which four entities involved in an OBI transaction?
Give few examples of C2C E-Commerce?
8.6 E-COMMERCE INFRASTRUCTURE:
To support consumers and operations, every business requires an

infrastructure. This consists of services, equipment, and processes to support
all the functional areas of your business. To run business efficiently, you need
to select the correct infrastructure to match your business strategies.
Conversely, if an element of your infrastructure is out of synchronization with
your strategies, you will likely suffer loss in every aspect of your business.
There are seven key infrastructure decisions as follow that E-Commerce
businesses face.
1. Marketing:
In all the infrastructure elements, marketing may be the most important
feature. To succeed, your website must be found. Once visitors are on your
site, you need to keep them there and compel them to buy from you. That’s
the job of your marketing team. Whether its website design, social media,
search marketing, merchandising, email, or other forms of advertising, it’s
all about marketing.
To keep in-house marketing activities successfully running is very
challenging. That’s why most small E-Commerce businesses prefer to
outsource some element of marketing.
2. Facilities:
A key economic advantage that ecommerce businesses have over brick-
and-mortar stores is the investment in their physical offices and
warehouses. In many cases, you can host your business out of a home
office and even at your basement or garage. Even when you want to expand
your company or to have many employees, you can set up your offices in
whatever place you will get at your budget, as you don’t require a fancy
store or expensive rental shop in the right location.
A word of advice is to keep your options flexible. Try to discover an office
park that has a wide variety of spaces in different sizes. You may be able to
start in a smaller space and move up to a larger one without penalty, as
your needs change.

3. Information Technology Platform:
Choosing the precise ecommerce platform is one of the most important
decisions you will make in your business. You have to figure out whether
you want to build and host your own system, outsource the development
and then manage the system going forward, or use a hosted, SaaS (Software
as a Service) platform that is more turnkey and externally managed?
If you build and host your own system yourself, you may need more
cash up front and skilled administrators and developers on your staff. By
using a SaaS platform, you will not need to host or manage the system in-
house, but you may still need web developers on staff. By selecting to
outsource the development and hosting will reduce your staffing costs
once, but you will suffer higher costs for changes to your websites in future
enhancements.
There are pros and cons to every approach. Just be sure to think through
the impacts on both your staffing and your budget and bottom line before
you move forward.
4. Customer Service:
There are many options available for supplying high-quality customer
service. You can manage those activities in-house or outsource to a third
party. Basic customer service for sales and post-sales activities can be
handled using email or message, and by providing a toll free number for
more extensive phone support. A customer-management system will make
those activities easier, but for smaller companies it is not a requirement.
Live chat will impact your operations as someone needs to be available
during specified hours of operation or 24x7 bases. Be sure to estimate the
impact of that on your organization, if you decide to handle those activities
in house.
5. Fulfillment:
Another key decision is whether you will manage your own inventory
or outsource those activities to a fulfillment house or through drop shipping
arrangements with your suppliers.
Handling your own inventory will give you a high level of control, but
you will invest your money in inventory, warehouse space, and your own
fulfillment staff. In some industries like the jewelry supply industry
managing your own inventory was the most logical choice. You had no
alternative for drop shipping, and fulfillment to an outside service.
Select the best fulfillment option to meet your needs. Be sure to
understand the costs involved and analyze the other options before moving
forward.

6. Finance and Administration:
As with other business operations, you will need to decide if you want
to manage your finance and administration activities in-house, outsource,
or a hybrid of the two. If your E-Commerce platform is securely integrated
to your accounting system, you hardly need for an in-house bookkeeper. If
you use different isolated systems for your website, order management and
accounting, then you may need more help for data entry and making sure
that the information is properly entered and managed.
Many E-Commerce companies use third party services for vendor
expenditures, employees’ salaries, and other basic accounting activities.
They choose to concentrate on the sales, marketing, and customer service.
This allows them to keep a focus on developing their businesses, instead of
paying an internal accountant or doing that work by themselves as the
business owner.
On the administration side, you need a governance team and provide
direction to them. Whether you have 5 or 1000 employees, you should have
good communication with them. Be sure that everyone understands their
roles, as well as the overall business strategies. You may need to adjust
your approach as your business evolves.
7. Human Resources:
Many small-business owners avoid the human resources function.
Employing, setting up payment, maintaining agreement and other HR
activities are specialized and time consuming. You may choose to bring the
resources in-house to manage those activities, but also calculate
outsourcing them. There are many individuals and agencies out there which
are well prepared to take on your HR activities.
8.7 FUTURE OF THE E-BUSINESS:
The internet is now firmly established in the life of most people where
connectivity is available. The business community and consumers have been
through a learning experience in applying the internet to meet their detailed
needs. The ability of consumers to access and use the internet has been one of
the key reasons for the reinforcement of online shopping in recent years.
Likewise, managers have been able to use their internet experiences to learn
about the market characteristics in the internet economy, and to build effective
business models to take advantage of the opportunities that the rapidly
increasing online market presents.

Different organizations use different levels of the internet. Some are
internet ‘pure plays’ who are totally dependent on the internet for their
business. Others use the internet as a supplementary service for their
consumers. The vast majority of organizations use information technology as a
means of improving internal efficiency and communicating with suppliers,
partners and consumers. The internet, extranet and intranet all play a key role
in the internal and external processes of organizations.
In future, leaders will continue to discover new internet applications that

bring competitive advantage. To this end the internet helps to spread markets,
create new products and expand sources of revenue. Using past understanding
and current knowledge it is possible to make value judgments regarding the
future impact of the internet on key parts of the economy including:
• The improvement of new technologies
• The nature of industry changes
• The extension of markets
• The behavior of shoppers online
• New business applications of the internet
• Internal applications
• Security
The future trends of E-Commerce:

Today's consumer is tech savvy and more up-to-date than ever. With the
help of smartphone, which enables instant web access, barcode scanners and
shopping apps, consumer in your store might be comparing costs online,
calling your nearest competitor to find a better deal or leaving to complete the
purchase later on their laptop at home.
To stay competitive, retailers everywhere must rethink how their consumer
search and shop, combining new and effective strategies into their marketing
mix. To help you, here's a look at four important trends that are driving the
future of E-Commerce.
1. Mobile:
Definitely, one of the most ubiquitous visions today is the smartphone
or tablet user. It’s clear that retailers of all sizes must have a mobile-
enabled website. Backing this trend is a survey by Google, in which 67 per
cent of respondents stated that a mobile-friendly site would make them
more likely to buy a product or service, with nearly two in three showing
they would go to a competitor if they couldn't easily locate what they were
looking for on their smartphones.
So if you haven't created a mobile site yet, now is the time to do so.
Mobile sites are responsive designed to load faster and dynamically render

text and images to fit any size screen, greatly increasing your chances of
engaging the mobile customer.
According to study of Assocham mobile commerce (m-commerce) is

growing rapidly as a stable and secure supplement to the E-Commerce
industry. Shopping online through smartphones is proving to be a game
changer, and industry leaders believe that m-commerce could contribute up
to 70 per cent of their total revenues.
2. Building consumer loyalty:

Riding the wave of the mobile and social revolution is the trend towards
building customer loyalty through great consumers’ experiences. Savvy
businesses know that in today's super-connected and socially transparent
world, going the extra mile for consumers can earn big rewards in the form
of free word-of-mouth publicity and enthusiastic brand ambassadors the
web over.
As Tony Hsieh, CEO of American online shoe retailer Zappos, says in
his blog: "It's a very different world today. With the internet connecting
everyone together, companies are becoming more and more transparent
whether they like it or not. An unhappy customer or a disgruntled employee
can blog about bad experience with a company, and the story can spread
like wildfire by email or with tools like Twitter. The good news is that the
reverse is true as well. A great experience with a company can be read by
millions of people almost instantaneously as well."
Accordingly, E-Commerce businesses should concentrate on
developing brand-loyalty initiatives to enhance the customer experience.
For instance, businesses can raise loyalty and repeat purchases by offering
consumer free shipping both ways, online delivery tracking, no-hassle
returns and fast, friendly support across a variety of channels, including
social media. And don't forget your customer-loyalty rewards programs.
3. Quick Response:
As there are multiple options available over Internet, consumer will
likely go where he will meet his exact need in lesser time. You should be
more prepared for providing the product or services which consumers are
looking for in minimum time span. Your website navigation and search
methods should be more prominent for offering easy access to it within
fraction of second for more engagement of the visitors.
The more quick you provide service more consumers will attach to you
site and visit again for next time.

4. Holistic, 360-degree engagement:
Because consumers engage in multiscreening behavior across a variety
of devices throughout the day, E-Commerce websites should be designed
with an eye towards creating a consistent user experience across a variety
of platforms. Specifically, your E-Commerce website should feature in-
built navigation that offers consumers a clear purchase path across laptops,
tablets and smartphones - for example, by allowing consumers to save their
activities so they can pick up on one device where they left off on another.
If you're a brick-and-mortar store, you still have many ways to engage
mobile consumers. Some examples of this include offering free Wi-Fi,
downloadable offer coupons with in-store QR codes, SMS messaging with
special deals when consumers are in range and redeemable coupons at the
register through the use of NFC (near field communication) technology.
The secret is to engage consumers using the every technology they interact
with frequently throughout the day.
5. Personalization:
E-Commerce sites can increase sales by making personalized
recommendations to consumers in the same way that retail storekeeper can
help shoppers find the right item, based on their usual buying habits and
preferences.
Amazon is one of the best examples of a retailer that has understood the
strategy of personalization. Every time a visitor views an item, a collection
of similar products are displayed on the page, some bundled together for
single price, or as a row of alternative items based on what others have
purchased after looking at the same item. It's the perfect way to grow a
user's buying options without being disturbing. Indeed, many users will
appreciate the suggestions, especially if they are just browsing.
Additionally, just as stores offer consumers special deals throughout the
lanes, prompting spur-of-the-moment purchases, consider offering your
web consumers personalized deals as they browse, such as 10 per cent off
their entire order if they purchase in the next 24 hours or more that some
predefined amount of bill.
As consumers become increasingly classy in their buying strategies,
retailers must step up their marketing strategies to meet them. By using
technology to create more enjoyable and customer-centric shopping
experiences, retailers will not only stay ahead of the curve, but keep their
consumers happy too.

Which key elements marketing includes?
What is SaaS platform?
What is the key reason for the reinforcement of online
shopping?
Why businesses need a mobile-friendly site?
Why building consumer loyalty is important?
SUMMARY OF THE UNIT:

• Computers and the Internet are now a ubiquitous and necessary part of
our lives: we use them at work and at home to collect information, for
entertainment and, increasingly, to do business.
• E-Commerce has evolved as a significant and growing segment in the
economy. It recommends the fact that a successful website is important to
a company's success.
• The characteristics of a well-designed E-Commerce website include
functionality, security and privacy.
• Features like easy navigation, fast downloading, speed of transaction and
ease of submitting shopping items of the consumers' overall satisfaction
with online stores.
• There are multiple types of online businesses which any one can start
without investing money from anywhere.
KEY TERMS:
• E-Commerce: Electronic commerce; refers to any transaction done
electronically, usually via the Internet.
• B2B: Business to Business form of commercial market.
• B2C: Business to Consumer form of commercial market.
• C2B: Consumer to Business form of commercial market.
• C2C: Consumer to Consumer form of commercial market.
• IOTP: Internet Open Trading Protocol Standard • focuses on the problems
of business transactions.
• SaaS: Software as a Service
END QUESTIONS:
1. Explain in brief E-Business strategy.

2. Note on Formulation of strategy.
3. Note on IOTP and OBI.
4. Briefly note any 3 online businesses.
5. List types of E-Commerce.
6. Explain C2C and C2B E-Commerce environment.
7. What are the four B2B E-Business Implementation Approaches?
8. List down advantages of E-Commerce.
9. Explain infrastructure decisions that E-Commerce faces.
10. What are the future trends of E-Commerce?

Electronic commerce is the ability to perform transactions involving

the exchange of goods or services between two or more parties using
electronic tools and techniques.
Internet is the important prerequisite for the existence of E-
commerce.
Four fundamental stages of business strategy:
• Initiation
• Formulation
• Implementation
• Evaluation
SWOT: strengths, weaknesses, opportunities and threats
Evaluation of each option is undertaken using the criteria

• Suitability
• Feasibility
• Acceptability
• Scope for gaining a competitive advantage
Behavioral control focuses on the amount to which the actions

undertaken are correct and meet set performance standards.
IOTP: Internet Open Trading Protocol

In online business blogs are usually generated to build an audience and
educate them in a way that helps them improve a certain aspect of their
lives.
Review sites to allow visitors to make better buying decisions for

whatever they are looking for.
Four entities involved in an OBI transaction

• Requisitioner
• Buying organization
• Selling organization
• Payment authority
Examples of C2C E-Commerce Quicker, eBay, OLX.

Marketing contains website design, social media, search marketing,
merchandising, email, or other forms of advertising.
SaaS platform means Software as a Service platform.
The skill of consumers to access and use the internet has been one of
the key reasons for the reinforcement of online shopping.
Because Mobile-friendly site would make consumers more likely to
buy a product or service.
For a business building consumer loyalty is an important aspect cause,
today’s world is super-connected and socially transparent. Any
unsatisfied customer can write a negative review about a product which
is not good, and this review can spread globally which can hamper
overall market sell of that particular product. This can be seen vice-
versa as a good review can boost up the market sell of product too.
BIBLIOGRAPHY:
https://en.wikipedia.org/wiki/Types_of_e-commerce
https://techtarget.com
https://Practical Ecommerce.html
www.WebLoggerz.com
www.bloomidea.com

UNIT 9 WEB SERVICES
Program Name: B. Sc. (MGA)
Structure
9.0 Introduction
9.1 Unit Objective
9.2 Web Services Paradigm - Introduction
9.2.1 Service-Oriented Architecture
9.3 Advantages and Disadvantages of Web Services
9.4.1 Advantages
9.4.2 Disadvantages
9.4 Typical Web Services Invocation
9.5 Web Services Architecture
9.5.1 Global XML Web Service Architecture
9.6 Web Service Interoperability
Summary
Key Terms
Questions
Bibliography
9.0 INTRODUCTION
As you have learnt in the previous unit, the pressure on IT executives has
increased manifold over years. They have to constantly come up with ideas and
suggestions that are cost-efficient as well better customer services of the
business to be more competitive and which can respond quickly to the strategic
priorities of the business. There are two main reasons behind IT enterprises’
woes:
• A heterogeneous system
• Rapidly changing application background and market requirements
Most enterprise does not consider a single-vendor approach because the
commonly available applications are not sufficient and flexible, leading to
increased costs. Due to this factor, most enterprises consider heterogeneity as
the best practice. They also feel that the best-of-breed approach can be cost
effective as well as efficient. Interoperability is often considered the only way
to do away with such inconsistencies. It is also believed that interoperability
may even boost new IT investments.

Another issue prevalent in many enterprises is the increasing market
change. Businesses need to adopt themselves as quick as possible to the ever
changing competitive environment and the IT infrastructure must follow.
Several economic forces including globalization and e-business are gearing up
to keep pace with the changing environment. Adapting to the environment
which is persistently changing is an ongoing phenomenon in the IT world for
myriad reasons:
• Worldwide competitions causes shortening of product cycles, as
companies see this as an opportunity to gain advantage over their
completion.
• One could also observe that the clients’ need and requirement are more
prone to change. This change has come over due to this cycle of
competitive improvements in product and services.
• Lastly, there has been a dramatic improvement in technology at a rapid
speed to keep pace with the ever-changing demands and requirements
of the customers.
IT executives are in a constant state of innovation to look for solutions to
overcome today’s problems, such as:
• Challenge to overcome the shifting demands and requirements of
customers in a cost-effective manner
• Expensive, rigid integration technologies that cause undesirable threat
to the enterprise
• Mounting complication on IT environment
• Massive business applications that are in constant need of costly
customization and inadequate security
• Inability in managing automated business processes for management of
the line-of-business (LOB)
• Inability to work in value network due to complexity and inadequate
security
Several enterprises are apparently looking up to the IT sector to provide
quick resolution to such challenges. In this challenging environment,
enterprise appreciates a dynamic, standard-based architectural approach
which overcomes the entire problem listed above. IT executives have come
with one such approach which is called web services based architecture,
also known as Service-Oriented-Architecture (SOA).
9.1 UNIT OBJECTIVE

Get an overview of web services
Know the advantage and disadvantages of web services
Understand what ‘web service invocation’ is all about

Learn about the architecture of web services
9.2 WEB SERVICES PARADIGM -

INTRODUCTION
A Web Service is standards-based, platform independent software entity,
which accepts specially configured requests from other software entities on
local or remote machines via vendor and transport neutral communication
protocols, producing application specific responses. Web services are whole
and independent modular and autonomous applications. They may be installed
within an enterprise as an easier way of circulated computing or published,
located and invoked across the Internet. Web service released on the Web
(Software as a Service) can be used by any application whenever required.
Another unique feature of Web services is that its components can remain
consistent regardless of various deployments over machines.
Web services have the following characteristics:
XML-Based Document:
A program sends a request to a Web Service through the network by using a
XML-based message-form document, and receives some response. Web
services use XML at data representation and data transportation layers. Using
XML removes any networking, operating system, or platform binding. Web
services based applications are highly interoperable at their core level.
Loosely Coupled System:

A consumer of a web service is indirectly tied to that web service. The web
service interface can change over time without compromising the client's
ability to interact with the service. A tightly coupled system indicates that the
client and server logic are closely tied to one another, that means if one of the
interface changes, the other must be updated accordingly. Implementing a
loosely coupled architecture tends to make software systems more flexible,
manageable and allows simpler integration between different systems.
Coarse-Grained Service:
Object-oriented technologies such as Java interpret their services through
discrete methods. Building a Java program from scratch requires the creation of
several fine-grained methods that are then composed into a coarse-grained
service that is consumed by either a client or another service.
Businesses and the interfaces that they expose should be coarse-grained. Web
services technology provides a natural way of defining coarse-grained services
that access the right amount of business logic.
Facility to be Synchronous or Asynchronous:

Synchronous means to bind the consumer to the execution of the service
directly. In synchronous invocations, the consumer blocks the service and waits
for completion its operation before continuing to the next function.

Asynchronous operations permit a client to invoke a service and then execute
other functions meanwhile.
Asynchronous clients regain their result at a later point in time, while
synchronous clients receive their result when the service has completed. Thus
Asynchronous capability is a key factor in enabling loosely coupled systems.
Supports Remote Procedure Calls (RPCs) :

Web services allow clients to invoke objects, procedures, functions, and
methods on remote machine using an XML-based protocol. A web service
must support exposed input and output parameters of remote procedures, so a
web service provides services of its own, equivalent to those of a traditional
component which supports RPC, or by translating incoming invocations into an
invocation of an EJB or a .NET component.
Supports Document Exchange :

One of the key advantages of using XML is its standard way of representing
data as well as complex documents. These documents can be simple such as
representing a current address, or they can be complex such as representing
Request for Quotation (RFQ). Web services support the transparent exchange
of documents to enable business integration.
9.2.1 Service-Oriented Architecture:

Service Oriented Architecture is a system for connecting resources as per
demand. In this other members in the network can access resources as
independent services that are accessed in a standardized way. This offers more
flexible loose coupling of resources than in traditional systems architectures.
In the simplest Service Oriented Architecture system there are two participants
as shown in Figure 9.1:
1. Service provider:
The provider presents the interface and implementation of the service
2. A service consumer:
A service consumer requests and uses the Web service provided by
Service provider.
Bind
Figure 9.1 Simple SOA
In some complex SOA, it is built upon a three-role interaction; where Services

consumer connects the Service provider via a broker as shown in Figure 9.2
Let’s see them in details:

Figure 9.2 Complex SOA
• Service Provider:
This is the service’s vendor from the business perspective. From the
architectural approach, this is a service which will be accessed by the
Service Consumers. The service provider implements the service and
makes it available on the Internet. Service provider is responsible to make
its description in some standard format and publish its details in a central
registry
• Service Consumer:
It is an application that requests or initiates some communication with the
web service by sending a XML request. It could be a web browser or even
a non-user interface program such as another Web Service. With the use of
service description it’s possible to find and invoke the Web Services.
• Services Registry:
This is a logically central directory of services, where service providers
publish their service descriptions. Service consumer searches the Registries
for desired web service.
There are common processes used in that architecture, such as:
• Bind:
When a Service Consumer wants to access a service, this operation invokes
and initializes communication within them in runtime, using binding
information delivered by the service description to both locate and contact
it.
• Publish:
To access a service, it must be published in a Service Registry. The Service
Provider thus contacts the Service Registry to publish the services of it.

• Find:
A Service Consumer finds a description of the service or queries a Service
Registry for the essential service type. A Service Consumer can find a
service interface description in both; run time or development time. After
finding correct web service it invokes it for utilization.
Most enterprise does not consider a single-vendor approach?

Why Businesses need to adopt themselves?
What is Loosely Coupled System?
What is Synchronous invocation?
What is the use of Publish process?
9.3 ADVANTAGES AND DISADVANTAGES

OF WEB SERVICES
9.4.1 Advantages
As compare to other types of distributed computing architectures, Web
Services offer many Advantages
• Interoperability:
This is the most important advantage of Web Services. Web Services

typically work from outside for private networks, offering developers a
non-proprietary way to their solutions. Therefore Services established are
expected, to have a longer life-span, contributing better return on
investment of the developed service. Web Services also allow developers
use their favored programming languages. In addition, thanks to the use of
standards-based communications methods, Web Services are virtually
platform neutral.
• Deployability:
Web Services are installed over standard Internet technologies. This

enables to deploy Web Services even over the fire wall to servers running
on the Internet on the other side of the globe. Also thanks to the use of
proven community standards, underlying security (such as SSL) is already
built-in.
• Usability:
Web Services let the business logic of various different systems to be

visible over the Web. This gives your requests the freedom to pick the Web

Services that they need or feels most suitable. Instead of recreating the
controls for each client, you only need to include supplementary
application-specific business logic on the client-side. This gives you chance
to develop services or client-side code using the languages and tools that
you prefer.
• Reusability:
Web Services make available not a component-based model of

application development, but the closest thing possible to zero-coding
deployment of such services. This makes it easy to reuse Web Service
components as suitable for other services. It also makes it easy to deploy
legacy code as a Web Service.
9.4.2 Disadvantages
• Large Web service request:
While the easiness of Web services is an advantage in some respects, it

can also be a limitation sometimes. Web services use plain text protocols
that use a fairly wordy method to identify required data. This means that
Web service requests are larger than requests encoded with a binary
protocol. The additional size is really only an issue over low-speed
connections, or over very hectic connections.
• Short-term sessions:
Although HTTP and HTTPS (the core Web protocols) are simple, they
weren't actually intended for long-term sessions. Typically, a browser
makes an HTTP connection, requests a Web page and maybe some images
file, and then gets disconnected. On the other hand, typical CORBA or
RMI environment, a client connects to the server and might stay connected
for an extended period of time. The server may send data back to the client
from time to time. This kind of interaction is difficult with Web services,
and you need to do an additional work to make up for what HTTP doesn't
do for you.
• Stateless protocol:
The problem with HTTP and HTTPS when it comes to Web services is that
these protocols are "stateless"; the communication between the server and
client is typically brief and when there is no data being exchanged, the
server and client have no knowledge of each other. More precisely, if a
client makes a request to the server, receives some information, and then
immediately crashes due to a power outage, the server never knows that the
client is no longer active. The server should have a way to track down what
a client is doing and also to decide when a client is inactive.

• Redundant information:
Normally, a server sends some kind of session identification to the client

when the client first accesses the server. The client then uses this
identification when it makes further requests to the server. This enables the
server to recall any information it has about the client. A server has to
depend on a timeout mechanism to determine that a client is inactive. If a
server doesn't receive a request from a client after a predetermined amount
of time, it assumes that the client is inactive and gets rid of any client
information it has stored. This extra overhead means more work for Web
service developers.
9.4 TYPICAL WEB SERVICES INVOCATION

A Web service invocation can be stated as the actions that a client
application executes to use the Web service. Client applications can be written
using any technology: Java, Microsoft .NET, and so on which invoke Web
services.
There are basically two types of client applications:
• Stand-alone:
The simplest form of client applications is Stand-alone client application,

which is a Java program that has the Main public class that you invoke
with the java command. It executes completely by its own from WebLogic
Server.
• A Java EE component deployed to WebLogic Server:
In this type of client application, the Web Service invoke is part of the code
that implements an EJB, servlet, or another Web Service. So this type of
client application, therefore, executes inside a WebLogic Server container.
9.5 WEB SERVICES ARCHITECTURE

The Web Services Stack
To execute the three operations of publish, find and bind in an interoperable
manner, there must be a Web Services stack that holds standards at each level.
Figure 9.3 shows a theoretical Web Services stack.

Figure 9.3 The Theoretical Web Services Stack
The upper most layers build upon the skills provided by the lower layers. The
right side vertical towers represent necessities that must be addressed at every
single level of the stack. The text in the brackets represents standard
technologies that apply at that layer of the stack.
Network: The network is the foundation block of the Web Services stack. Web
Services must be network accessible to be invoked by a service consumer. Web
Services that are available in public on the
Internet use commonly deployed network protocols. Because of its
capacity to be everywhere HTTP is the default standard network protocol for
Internet-available Web Services. Other Internet protocols can be supported,
including FTP, SMTP, Message Queuing (MQ), and Remote Method
Invocation (RMI). The network protocol used in any given condition is
dependent on application requirements. Intranet domains can use reliable
messaging and call infrastructures like MQSeries, CORBA, and so on.
The bottom layers of this stack, representing the base Web Services
stack, are relatively mature and more standardized than the layers higher in the
stack.
XML-based messaging: It is the next layer, represents the use of XML as the
basis for the messaging protocol. SOAP is the chosen XML messaging
protocol for many reasons:
• SOAP is a simple and lightweight XML-based mechanism for

exchanging structured data between network applications.
• It is basically an HTTP POST with an XML envelope as payload.

• SOAP consists of three parts: an envelope that defines a framework for
describing what is in a message, a set of encoding rules for expressing
instances of application-defined data types, and a convention for
representing remote procedure calls (RPCs) and responses.
• SOAP messages support- publish, find and bind operations in the Web
Services architecture.
Service description: It is generally a stack of description documents. WSDL

is the default standard for XML-based service description. This is the minimum
standard service description necessary to support interoperable Web Services.
WSDL defines the interface and mechanics of service interaction. Additional
description is necessary to specify the business context, qualities of service and
service-to-service relationships. The WSDL document can be complemented
by other service description documents to describe these higher level aspects of
the Web service. For example, business context is described using UDDI data
structures in addition to the WSDL document. Service composition and flow
are described in a Web Services Flow Language (WSFL) document.
As Web service is defined as being network-accessible via SOAP and

represented by a service description, the first three basic layers of this stack are
essential to provide or use any Web service. The simplest stack would consist
of HTTP for the network layer, the SOAP protocol for the XML messaging
layer and WSDL for the service description layer. All inter-enterprise, or
public, Web Services must support this interoperable base stack.
Service Description
XML-Based Messaging
Network
Figure 9.4 layers responsible for interoperability
The stack depicted in Figure 9.4 provides for interoperability and

allows Web Services to control the existing Internet infrastructure. This creates
a cost efficient admission to a ubiquitous environment. Flexibility is not
negotiated by the interoperability requirement, because further support can be
provided for alternative and value-added technologies. Let us take one
example, SOAP over HTTP must be supported but at the same time SOAP
over FTP can be supported as well.
While the bottom three layers of the stack identify technologies for
compliance and interoperability, the next two layers service publication and
service discovery can be implemented with a range of solutions.

Service publication: It can be any action that makes a WSDL document
accessible to a service consumer, at any stage of the service consumer’s
lifecycle. The simplest, most static example at this layer is the service provider
sending a WSDL document directly to a service consumer.
This is called direct publication. Direct publication can be accomplished
using an e-mail attachment, an FTP site or even a CD-ROM distribution. Direct
publication is suitable for statically bound applications. Alternatively, the
service provider can publish the WSDL document describing the service to a
host local WSDL registry, private UDDI registry or the UDDI operator node.
Direct publish can take place after two business partners have contracted on
terms of doing e-business over the Web, or after subscriptions have been paid
by the service consumer for accessing the service. In this case, the service
consumer can maintain a local copy of the service description.
Service discovery: It can be any mechanism that lets the service consumer to
gain access to the service description and make it obtainable to the application
at runtime. Service discovery depends upon service publication, because a
Web service cannot be discovered if it has not been published. The simplest,
most static example at this layer is the service can be discovered at design time
or runtime using a local WSDL registry, a private UDDI registry or the UDDI
operator node.
Service flow: The topmost layer describes how service-to-service

communications, collaborations, and flows are performed. WSFL is used to
describe these interactions. It is natural to produce Web Services by composing
other Web Services because implementation of a Web service is a software
module and we can combine them as per requirement. A composition of Web
Services can play one of numerous roles. Intra-enterprise Web Services might
team up to present a single Web service interface to the public, or the Web
Services from diverse enterprises might cooperate to perform machine-to-
machine, business-to-business transactions. Alternatively, a workflow manager
might call each Web service as it participates in a business process.
For a Web Services application to fulfill the tough demands of today’s

e-businesses, enterprise-class; setup must be supplied, including security,
management and quality of service. These vertical towers must be taken into
consideration at each layer of the stack. The solutions at each layer can be
independent of each other. More of these vertical towers will emerge as the
Web Services paradigm is adopted and evolved.
Security:
In general, there are four basic security requirements that the Web Services
security layer must provide

• Privacy:
It is the property that information is made unavailable or not revealed to
illegal individuals or procedures, and promises that the contents of the
message are not disclosed to illegal individuals.
• Authorization:
It is the permitting of authority, which is consist of the granting of
access based on access rights and guarantees that the sender is
authorized to send a message.
• Data integrity:
It is the property that data has not been unnoticeably altered or
destroyed in an illegal way or by illegal users thereby assuring that the
message was not modified by accident or intentionally while in transfer.
• Proof of origin:
It is a confirmation for identifying the creator of a message or data. It
declares that the message was transmitted by a properly identified
sender and is not a replay of a previously transmitted message. This
requirement implies data integrity.
Systems and Application Management:

As Web Services become crucial to business operations, management of them
will be required. It must be possible to manage Web Services at all levels of the
theoretical Web Services stack and the Web Services model components.
Management in this case means that a management application, either custom
built for the application or obtained from a dealer, can realize the presence,
accessibility and condition of the Web Services infrastructure, Web Services,
service registries and Web service applications. Optimally, the management
system should also be able to control and configure the infrastructure and
components.
Quality of Service:
The Quality of Service vertical tower provides for the requirement of
information relevant to each of the layers of the Web Services theoretical stack.
For the network layer, this would imply being able to use networks of various
levels of quality of service. Quality of Service at the Web service level would
be used in service configuration and service flow. Estimated performance time,
timeout values and historical performance averages could all be input in
service selection for a flow or indicating a flow manager that it is time to
initiate recovery or alternative flows.

9.5.1 Global XML Web Service Architecture
The W3C led a Web Services Workshop In April 2001, which had agenda
of searching a way to standardize the developing Web services architecture.
One of its significant results was Global XML Web Services Architecture,
(GXA).
The Global XML Web Services Architecture (GXA) platform is a term that
includes a variety of proposed new standards in the area of Web services
interoperability. Microsoft, IBM and few other organizations are cooperating
for GXA.
The main objective of GXA is to describe the syntax and semantics of a

new family of Web-service-specific protocols that take the base capabilities of
SOAP and XML to the higher level of interoperability. This work contains
mostly of improving and specializing the way in which Web services cooperate
and interoperate.
As XML Web services develop and become more refined, XML Web
services require further capabilities that permit for the scenarios involving
multiple applications at multiple companies. The Global XML Web Services
Architecture defines principles that facilitate future terms to work well with
each other. There are four main principles as follow:
• Modular combinable:
The Global XML Web Services Architecture cooperates with the

extensibility feature of the SOAP specification to provide a set of modules
that can be added together and composed as per need to provide end-to-end
capabilities. If any new capabilities are required, then new modular
elements can be created.
• General purpose:
The Global XML Web Services Architecture is planned for a widespread

series of XML Web services situations, ranging from B2B and EAI
solutions to peer-to-peer applications and B2C services.
• Federated:
Another key feature of the Global XML Web Services Architecture is that,
it is entirely distributed and designed to support XML Web services which
are cross organizational and trust limitations and does not need centralized
servers or administrative functions.
• Standards based:

As with previous XML Web services specifications, The Global XML Web
Services Architecture protocols are submitted to suitable standards bodies
and Microsoft plans to work with interested members to complete their
standardization.
9.6 WEB SERVICE INTEROPERABILITY

Web Services Interoperability Organization (WS-I) is a project started by IBM
and Microsoft to develop the interoperability of web implementation to various
vendors. Web services specifications compose together to provide
interoperable protocols for Security, Reliable Messaging, and Transactions in
loosely coupled systems as shown in Figure 9.5.
Figure 9. 5 Interoparability Protocol
These specifications are in variable degrees of maturity and are conserved or

supported by several standards bodies and entities. These variations of
specifications are the basic web services framework established by first-
generation standards represented by SOAP, WSDL,XML and UDDI.
Specifications may compete, complement and overlap with each other.
Currently defined Standards
Web services standardization is a process that in continuously evolving.
Internet is a good resource to read actual information about web services
standard. Listed below are few web services standard and proposed
specification:
WS-Security:
Web Services Security states SOAP security extensions that offer privacy by
using XML Encryption and data integrity using XML Signature. WS-Security
also contains profiles that describe how to attach different types of binary and
XML security tokens in WS-Security headers for authentication and
authorization purposes.

WS-Policy:
A Web service supplier may describe conditions / policies under which a
service is to be delivered. The WS-Policy framework allows one to specify
policy material that can be managed by web services applications, such as
Oracle WSM.
WS-SecurityPolicy:
WS-SecurityPolicy is a package of security policy statements used in the
background of the WS-Policy framework. WS-SecurityPolicy statements
describe how messages are secured on a communication path.
WS-Addressing:
SOAP does not offer a standard way to describe where a message is going or
how responses or faults are returned. WS-Addressing delivers an XML
framework for recognizing web services endpoints and for securing end-to-end
endpoint identification in messages. This specification enables messaging
systems to support message transmission through networks that contain
processing nodes, in a natural manner.
WS-Trust:
WS-Trust describes extensions to WS-Security that offer a framework for
demanding and distributing security tokens, and to broker trust associations.
WS-Trust extensions provide methods for delivering, renewing, and
authorizing security tokens.
WS-ReliableMessaging:
WS-ReliableMessaging describes a framework for detecting and handling the
reliable distribution of messages between Web services endpoints.
WS-SecureConversation:
The Web Services Secure Conversation Language is built on top of the WS-
Security and WS-Policy models, which is used to deliver secure
communication between services. This specification defines methods for
creating and sharing security contexts, and deriving keys from security
contexts, to enable a secure conversation between Web services endpoints
WS-MetaDataExchange:
WS-MetaDataExchange is part of the WS-Federation roadmap; and is designed
to work in combination with WS-Addressing, WSDL and WS-Policy to let

recovery of metadata about a Web Services endpoint. It uses a SOAP message
to request metadata.
Business processes in a web services:
A business process defines the prospective implementation order of processes

from a set of web services, the mutual data between these web services, which
associates are involved and how they are involved in the business process, how
several services and organizations contribute and how joint exception handling
for collections of web services. This kind of implementation offers long- term
transactions between web services, which results into high consistency and
dependability web services application.
Business Process Execution Language (BPEL4WS or BPEL) permits

identifying business processes and how they relate to the web services. This
identifying consist of how a business process makes usage of web services to
achieve its objective, as well as specifying web services that are provided by a
business process. The concepts underlying the language are briefly explained:
establishing bilateral partnerships, correlating messages and processes,
defining the order of the activities of a business process, and handling
exceptions via long-running transactions. We'll also look at the resulting
programming model, and the usage of BPEL4WS in pure B2B scenarios.

Give types of Web service invocation application.
What are WSDL and WSFL?
List down four basic security requirements.
What is the main objective of GXA?
List any 3 currently defined Standards by WS-I.
9.7 SUMMARY
• Most of the organizations do not keep themselves restricted to one
service provider for web services, because the services provided are
very specific as per the requirement. If the requirement changes then
the services are not easy to match with the new changes.
• Web services are an architecture that includes of a distributed
computing environment. In an environment application call
functionality from other applications either locally or remotely over a
network.
• SOA explains a distributed application construction that has been a
standard of use for several years.

• The advantages of web services are:
− They offer the interoperability and integration capability
− They simplify the deployment of a new business process
− They give freedom to service consumer to pick the Web Services
that they need or feels most suitable.
− They make it possible to reuse business elements in network
• The disadvantages of web services are:
− Web services use plain text protocols, which makes web service
request large in size.
− Short session time.
− Lack of communication between server and client, as request
protocols are stateless
− Because of stateless protocol, redundant data gets loaded for some
time.
• A Web service exhibits the following defining characteristics:
− A Web service is a Web resource.
− A Web service provides an interface.
− A Web service is typically registered and can be located through a
Web service registry
− Web services support loosely coupled connections between systems
• Web Services stack consist of Network, XML-based messaging,
Service description, Service publication, Service discovery, Service
flow as stack elements with Security, management and Quality of
Service as a necessities that must be addressed at every single level of
the stack.
KEY TERMS
• RPCs: Remote Procedure Calls
• SOAP: Simple Object Access Protocol
• SOA: Service Oriented Architecture
• WSDL: Web Services Description Language
• UDDI: Universal Description, Discovery, and Integration
QUESTIONS
1. Describe characteristics of Web services.
2. Explain Service-Oriented Architecture

3. Note on Advantages and disadvantages of web services.
4. Explain in brief- The Web Services Stack with diagram.
5. Describe roles of vertical columns of the Web Services Stack.
6. Note on Global XML Web Service Architecture.
7. Brief Note on Web Services Interoperability.
8. Explain WS-Security, WS-Policy, WS-SecurityPolicy and Business
processes in a web services
9. Which interoperable base stack a Web Services must support?
10. Describe a complex SOA

Because the commonly available applications are not sufficient and
flexible, leading to increased costs.
For persistently changing market.
The web service interface can change over time without compromising
the client's ability to interact with the service.
Synchronous invocation means to bind the consumer to the execution of
the service directly.
To access a service, it must be published in a Service Registry.

1) Stand alone
2) Java EE component deployed to WebLogic Server.
WSDL -Web Services Description Language
WSFL- Web Services Flow Language
Privacy, Authorization, Data integrity and Proof of origin.
The main objective of GXA is to describe the syntax and semantics of a
new family of Web-service-specific protocols.
WS-Security, WS-Addressing and WS-Trust
BIBLIOGRAPHY
http://www-128.ibm.com/developerworks/webservices/standards/
http://msdn.microsoft.com

www.wikipedia.com
UNIT 10 WEB ADVERTISING

Structure
10.0 Introduction
10.1 Unit Objective
10.2 Web Advertising Strategies
10.2.1 Methods of Web Advertising
10.3 Web Advertising vs Traditional Advertising
10.4 Advantages and disadvantages of Web Advertising
10.5 Successful Web Design Guideline and Components
10.6 Effectiveness of Web Advertising
10.7 Summary
10.8 Key Terms
10.10 Bibliography
10.0 INTRODUCTION
The term ‘Advertising’ is resultant of the Latin word ‘advert’ which means
‘to turn, the attention’. In early 1700s advertisement appeared in the
newspapers, from England. With a beginning like that, in 21st century Indian
advertising has come a long way in today’s fast growing tech savvy world in
the advertisement .
India is one of the fastest growing countries in Asia, as well as in the
world. India, a land of more than one billion people and huge opportunities has
a exclusive personality. The personality of this country is depicted through its
art, culture, industries, etc. and here languages, culture, even cuisine changes
every 8-10 miles as one goes by.
Advertising is known as the activity of drawing public attention to a
product or commercial as by paid publication in the print, broadcast or
electronic media. Web advertising is a new way of marketing, in which
marketers increase sales and build brand awareness with the use of the Internet.
Most people prefer learning about the project before they commit to a
major business venture. It is like when one plan's for a party, one would look
up every detail such as guest list, food or music, before taking a decision on the

venue of the party. You would finalize your event, send invitations and enjoy
the party. Similarly, when you and your enterprise enter the market for the
World Wide Web, you will probably want more than a food and guest list. This
unit gives you an outline of the world of web advertising. You will find answer
for many of your queries before making it to the Internet business.
Before marking a web advertising strategy, you need to be clear about the
target of the marketing strategy. Many people confuse the terms world wide
web and Internet, not knowing the difference between the two. Internet is, as
the name suggests, a network of computers connected globally. Web uses the
Internet as a medium to access information .Any medium has a language of
communication, so does the Internet. Speaking or chatting on the Internet is
also known as Netspeak. To understand it better, it is the language of the
Internet which has evolved with terms which have been born only after the
Internet come to exist. These terms have also found their way into usual
dictionaries.
The Web has revolutionized the concept of advertising. A well designed
website nicely plays a dynamic role in Internet marketing strategies.
Traditional forms of media like print media and radio have a limited area of
reach and they do not touch every corner of the globe. This is where web
advertising scores. The Web also provides the advantage of a mechanism of
receiving customers’ feedback on advertisements. The website visitors can vote
or defeat your product or service depending on the quality of your website.
10.1 UNIT OBJECTIVE

Understand what are web advertising strategies
Know how internet differs from the web
Discuss conventional advertising design principles and navigation

tools
Understand the meaning of 'Company Hallmark'
Know the difference between web and traditional forms of

advertising
Learn about the advantages and disadvantages of web advertising
Know what are the successful web design guidelines and

components
Know how effective web advertising actually is and how to achieve

more effectiveness

10.2 WEB ADVERTISING STRATEGIES
Before learning about web advertising it is crucial to learn about the Web. In
most common term, the web is fast-paced Internet environment and people
browsing through it are called 'web surfers'. Ideally, web surfers make choices
as fast as lightening, to acquire the knowledge or information they want. The
web is truly a self-contained society in every sense; it has its own culture, own
people and even its own language its multicultural character is often said to be
the most important feature of the web society. The web is truly a multicultural
venue, where one can find web surfers from every part of the world.
Conventional Advertising Design Principles

The songwriter and humorist Tom Lehrer once claimed," The reason most folk
song are so awful is that that they were written by 'the people'". The same can
be said for web design. Poor website are poor, not because of the web
designers but because they were designed by 'the people'. When desktop
publishing programs first reached people’s homes, anyone with software
became an editor, typesetter and a graphic designer in no time. These overnight
publishers were 'publishing' crunch newsletters, PTA updates and so forth.
However, no one would want these overnight publishers to work on their
communication meant for advertising, or annual reports.
Like all other forms of publishing, one cannot create a properly
designed website with average tools and basic knowledge of the tool. Anyone
can design a PTA newsletter on his or her home PC. But to create a newsletter
or a web page that looks professional, they need to understand the underlying
technology and design principles. Just like traditional media designers, web
design also follows many of same design principles; attracting reader's
attention is still based on these enduring principles. Creating that right mix of
design cues, font selection, illustrations and photographs requires lot of
experience. However, the Web's technical base differs from traditional print
media, for displaying designed pages.
The display on the screen and the dynamic nature of interpreting
HTML to make designs for the Web is a whole new technical ball game that
can confuse even a traditional print designer.
Anyone intending to join the web community should have at least the basic
knowledge of Web design. Whether you are going to design it yourself or rent
someone to create your website, you should be aware of the following design
consideration:
• White spaces
• Attractive color combination
• Type manipulation
• Texture

• Eye movement
• Navigation
• Element unity
• Aesthetics
All of these elements must be considered when designing a successful website.
In further reading, you will come across the guidelines of a successful website
design.
The Difference between the Internet and the Web

The Internet and World Wide Web (WWW) are two different things. The
Internet, which is a linking from your computer to other computers around the
world, is a way of transporting content. Internet is the connectivity that
connects almost every communication possible. It communicates through
cables, switches and devices that allow one computer user to get connected
with another.
The Internet's network is at the core of the Web. The web is a protocol that
operates on the top of this connectivity. The Web or WWW is a bunch of
"pages" of information connected to each other around the globe interlinked by
hypertext links. Webpages and other web resources are identified by URLs.
Each page can be a combination of text, pictures, audio clips, video clips,
animations etc. Every web browser or web-based applications uses Internet to
access the webpage using its URL.
In this unit you will learn some common strategies to reach out your
potential customers via your online messages. You will learn how to use web
technology to make the most of these characteristics.
Netspeak
The internet has its own unique language with which all web surfers are
familiar. If you are a ‘newbie’ and you want to make a sustainable website over
internet then you should know some of the most used terms and their
definitions

• Newbie: People who are new to the online community.
• Elite: Someone who knows a lot about online community.
• Flamers: People who send negative or derogatory e-mails or news postings
• Netizens: Network Citizens. A person who uses the Web or the Internet.
• Surfing: Roaming from one website to another website by following
hyperlinks or spending time on the web.
Choosing Your Strategy

The company's web advertising strategies would mainly depend on what it
wants to accomplish with the project. A lot of money can be spent to build an
extraordinary site with tons of feature, but if the objective is to have an online
corporate presence then you are simply wasting your resources. On the other
hand, if you spend every cent building online catalog for direct Internet sales to
expand your company into new markets, you will probably be happy with the
results.
Some fundamental principles apply to every successful website,
irrespective of the extent of your commitment to advertise your company
online.
Putting Your Design to Work

Most people consider that web design is a just a matter of including a few clip-
art images and text into an HTML editor application. Although they will be
able to build web pages, the effectiveness of these pages will be missing. It is a
good practice to prepare in advance before starting development work. Start
web designing work by creating on overall site concept, determining which
sections and subsections are required and considering the function or purpose
each page. The designer should cautiously select elements that support that
concept. When selecting these elements, the designer must look at different
factors, including keeping a consistent look and feel, using uniform
navigational tools and employing the company hallmark.
Company Hallmark
Corporate website is created with the intention of increasing name recognition.
It is not necessary that your website should always contain product information
or provide online purchasing options. Your website can have just the
information of the company on the web to catch the attention of millions of
people across the globe. You just draw visitors and bombard them with the
company hallmark. In conventional advertising media, this method is known as
‘image advertising’. A hallmark can be your company logo, your company
name, an identifying image, or a copyright notice appearing on every web
page. These items are called ‘hallmarks' because they act as certificates of
authenticity. Placing a company hallmark on website is not much different
from the practice of including the company name and logo on products. When

buy Pepsi, you see the name and logo on every can. When you drink soda, you
are always reminded who the manufacturer is. All those around you know you
are drinking a Pepsi and can easily go to the store and look for the same name
and logo on the shelves. Figure 10.1 shows vary famous logo of TATA
industries.
Figure 10.1 TATA Logo
In a similar manner, you want to continuously remind visitors that they are
on your company's site. You want them to know which section to go for more
online information, or to make purchase. You want anyone who passes by your
visitor’s terminals to see that they are on your site. If these visitors plan to
checkout your site, you want to ensure that they see the same hallmark and
know right away that they have come to the right place. Visitors should get the
impression of your company from any page they visit on your site. Include
your hallmark strategically on every web page.
Let Your Media Do the Selling

The Web is the multimedia branch of the Internet. Sound, animation and video
form an integral facet of the Internet. As you and your company take up
residence in this lively neighborhood, make the most of the Web’s potential to
use different media to deliver your advertising message. In this section, you
will learn about several sites that incorporate these web features effectively in
their online advertising techniques. You will also learn about graphics features
that are specific to the covers.
What's New?
One tool that can prove handy is the 'What's New' page that contains
information on recent changes to your website, product line capabilities, or
general press releases. This page makes it convenient for the users to find out
new features quickly without looking through the entire site. Admittedly,

pushing users to surf the full site could be to the advertiser's advantage, but
very few web surfers have the time or inclination to do so. Companies whose
sites have a 'What's New' page soon find that it is the most visited page on the
site. Users will often set their bookmarks to this page and never visit the site’s
front page or home page. The advantage of this trend, try and include all the
information about a new product or service on the ‘What’s New’ page. Inform
the visitors about new arrivals or additions to your company, not just on site. If
you don’t update new upgrades regularly, then just use that space to post some
sort of reminder about an older or popular webpage.
10.2.1 Methods of Web Advertising

Web advertisement types are categorized according to their format. The format
of the advertisement simply refers to the manner in which it appears. Figure
10.2 shows various web advertisements.
Figure 10.2 Example of Web advertising
Following are the types of Web advertising:

Banner advertisement:
A web banner or banner ad is a form of advertising on the World Wide Web.
This form of online advertising entails embedding an advertisement into a web
page. It is intended to attract traffic to a website by linking them to the web site
of the advertiser.
Pop-up Advertisement:
A pop-up window is a new browser window launched or opened, either by the
user clicking a button/link, or automatically, when a webpage is first loaded.

Pop-under Advertisement:
A pop-under is first opened, and then moved behind the content window. The
new window is then only visible if the user systematically closes content
window before quitting/closing their browser, or if the content window do not
fill the screen.
Skyscraper Advertisement:
Skyscraper ads are tall with heights often ranging from 500 to 800 pixels and
widths often ranging from 120 to 160 pixels. Skyscraper ads are often called
skyscraper banners.
Search Engines:
Given the correct keyword, search engines such as Google or yahoo can
efficiently be used as a marketing tool.
For web advertising few technical aspects should take into consideration for an
effective result. The following technical parameters about the Web
advertisement are considered in this study
• Web Advertisement Size:

The effect of size on advertising effectiveness has been studied in
traditional media, especially print. The common rule is that size usually
improves memorization. Since large Web ad occupy more screen space,
they run better chances of grabbing attention and being seen and
remembered. The Internet Advertising Bureau (IAB) specifies eight
different banner sizes, according to pixel dimensions.
• Duration of Web Advertisement:

Duration of web ad is one of the aspects which are considered for Web ad
designing as well as for cost estimation.
• Position of Web Advertisement:

To seek the attention of the viewer, position plays an important role.
For Web ad generally used positions are as follows -
− Top of the page
− Bottom of the page
− Right side of the page

− Left side of the page
• Role of Images in Web Advertisement:

The presence of image can be considered as an integral part of message or
just a minor item. The memorization relies on the fact that graphics
information generates more mental codes than verbal information. Also it
can overcome language barrier.
• Role of Animation in Web Advertisement:

Customer will more likely notice an animated banner than a static one
which can raise a banner’s click through rate. Animation can also help to
convey an idea that would otherwise require more words.
• Usage of favorable keywords:

On the Web advertisement, a limited space is available, so text needs to be
clear and brief. Use of words such as “Click here to win” or “Free
Download” leads to call to action which is proven to increase click through
rates of Web advertisement. A call to action is a feature you can provide on
Web advertisement that gives the viewer a path of action. As shown in
Figure 10.3 user will tempt to click on the ‘Win’ button link.
Figure 10.3 Example of favorable keyword
• Software tools used for designing the Web Advertisement:

For Web ad design different software tools are used. In this research study,
the researcher has considered has considered following software tools:
− Photoshop
− Flash
− Dreamweaver

− Banner MaxPro6
− Wildform SWfx
10.3 WEB ADVERTISING VS TRADITIONAL

ADVERTISING
Advertising on television, radio, newspapers, billboards or direct mail is based
on large exposure and a particularly wide audience. Internet advertising, on the
other hand, is based on relatively few channels that coalesce to bring forth a
maximized target customer.
Print Media Advertising
Print media is a very usually used medium of advertising by manufacturer. It
includes advertising through newspaper, periodicals, journals, etc. and is also
called ‘press advertising’. Print advertising has proven to be quite effective for
several reasons. Such as, print advertising is not annoying. Let’s take a look in
brief.
Newspaper
Newspapers are of a number of types such as; daily, weekly, retail
advertising bulletin, morning/evening, special interest etc. It is also
classified as nationwide or local. Newspapers are published in English as
well as regional languages. It reaches near about 10 crores people as they
are said to be a part of routine life of a common literate man. An
advertisement ranges in size from full page to sixteenth of a page. Most of
publication house charges as per the size and color scheme of the
advertisement. The readers of daily newspapers spend few minutes on
headlines, current events, crossword puzzles, stock exchange listing, sports
and entertainment news and form opinions about social, political and
economic issues.
Advantages
• Newspapers normally have widespread circulation and a single
advertisement in the newspaper can quickly reach to a large number of
people.
• The advertising cost is comparatively low because of wide-ranging
publication.
• As newspapers are published daily. Thus, the same advertisement can
be repeated frequently and prompt reader every day.
• The advertising is quite flexible as, advertisement material can be given
at a very short notice. Even last minute changes in the content are also
possible.
• Newspapers are published from various regions and in various
languages.
Hence, they provide better options to advertisers to approach the
preferred market, region and readers through local or regional language
Disadvantages

• Reader reads a Newspaper usually once and stay in the house for just a
day.
• Sometimes the print quality of newspapers is poor, especially for
photographs.
• The page size of a newspaper is fairly large and small ads can look
little.
• Your ad has to compete with other ads to seek the reader's attention.
• You're not guaranteed that every person who gets the newspaper will
read your ad.
Periodicals
Periodicals are publications which come out on periodic time basis. These
may be published on a weekly, fortnightly, monthly, bimonthly, quarterly
or even yearly basis. Some periodicals have national or international
readership, so span of market goes to worldwide. For example we come
across a various magazines and journals such as India Reader’s digest,
Today, Forbes, Femina, Overdrive, TopGear etc. All these periodicals have
a large number of readers and thus, advertisements published in them reach
a number of people across the world. Magazine advertisements are largely
eye catching and full of colors.
Advantages:
• Periodicals have a much extensive life than newspapers. These are
preserved for a long period to be referred in future or read at leisure or
read again, whenever required.
• Periodicals have a particular readership and so advertisers can know
about their target consumers and accordingly selective advertisements
are given. For example, in a periodical like Femina or vogue, which are
magazines for women, advertisements related to products to be used
only by males are rarely published. However, manufacturers of
products and services to be used by females prefer to give
advertisement in this magazine.
Disadvantages
• Advertising in periodicals are much costlier than newspapers.
• The targeted people to whom the advertisements reach are small in
comparison to newspapers.
• The materials of advertisement are given much in advance; hence last
minute change is impossible. This decreases flexibility.
Radio
Radio advertising is also one of the medium of advertising. In radio there are
short breaks during transmission of any program which is filled by
advertisements of products and services. There are also popular program
sponsored by advertisers. FM channel also best suited in the beginning for
brand building with a specific target audience in mind. For agricultural
products like fertilizer, seeds tools etc. radio along with FM is an extremely
cost effective medium. Particularly for the rural area of India it is a leading

medium. Operation Research Group (ORG) study indicates that Radio is a
major medium, which has regional advantage too.
Advantages:
• It is extra effective as people hear it on a regular basis.
• It is also useful to illiterates, who cannot read and write.
• There are situations where newspapers reading may not possible, but you
can hear radio. For example, while doing your household work or travelling
to some other place; you can just tune a radio station.
Disadvantages:
• As compared to Television, Radio is less effective as it lacks visual impact.
• There may be some other disturbances that distort communication. So once
if you miss any message that any advertisement wants to communicate, you
may not have any option to hear it again immediately.
Television
With rapid growth of information technology and electronic media, television
has topped the list among the media of advertising. TV has the most effective
impact as it appeals to both eye and the ear. Products can be shown, their uses
can be demonstrated and their utilities can be told over television. Just like
radio, advertisements are shown in TV during short breaks and there are also
sponsored programs by advertisers. Television accounts for the majority of
world advertising expenditure.
Advantages:
• As it has an audio-visual impact, it is most effective medium.
• With memorable slogans, jingles and dance sequences, famous characters
presenting products, TV advertising has a lasting impact. For example, who
can forget jingle of Nirma washing powder or Amitabh Bachhan saying
“do boond jindagi ke” for pulse polio abhiyan.
• With varieties of channels and programs advertisers have a lot of choice to
select the channel and time to advertise.
• With regional channels coming up any person even illiterates can watch the
advertisements and understood it by seeing and hearing.
Disadvantages:
• TV advertisements are usually expensive to prepare as well as to telecast.
• With almost every manufacturer trying to communicate their message
through TV advertising the impact among the viewers is also reducing.
Now-a-days people are changing on channels whenever there is a
commercial break.
Outdoor media
Out-door-media is one of the medium of advertisement. It is the oldest kind of
advertisement. In the present time, advertisers are increasingly recognizing the
media value of outdoor. Basically the out-door-media is known as posters, bill
boards, hoardings, road side sign, highway advertising and transit advertising
etc. These are used for movies and consumer items like toothpaste and soaps.

Posters have begun to be used effectively inside and outside train and buses in
metro cities. Amul hoardings are an excellent example where copy and visual
are quickly changed.
Advantages:
• As it has visual appeal and can be changed frequently.
• It is noticed that hoardings contribute to the bulk of outdoor advertising.
• Cost efficient.
Disadvantages
• Outdoor advertising is a glance medium. At best, it only draws 2-3 seconds
of a reader's time.
• Messages must be brief to fit in that 2-3 second time frame.
• The nature of the way you buy outdoor advertising (usually a three-month
commitment) is not helpful to it very short, week-long campaign.

What is the term ‘hallmark’?
What is Web Advertising?
What are Netizen and Newbies?
Why Newspaper is most easy medium for advertisement?
Why Television advertisements have most effective impact on user?
10.4 ADVANTAGES AND DISADVANTAGES

OF WEB ADVERTISING
As Web advertising is a well-established technology now days, it also has
some advantages over traditional medium of advertising and disadvantages as
compared to them.
Advantages:
• Target more clients: The awareness of your company can be increased by

Web advertising. It can also include a completely new set of prospective
clients. Those who never arrived at your retail shops may be enthusiastic
online shoppers who would enjoy shopping from your website. You can
also engage more clients by offering online discount coupons to encourage
them to visit your website, resulting in additional sales. Using an effective
pay per click campaign or organic search methods, your company website
can draw visitors from around the globe. Even if users do not click on your
ads, the advertisements can create and increase brand awareness.
• Cost Effectiveness: If your business has a limited marketing budget, web

advertising offers several free or low-cost means of marketing. Pay per
click advertising with search engines, for example, can be relatively cheap.

You can establish a pre-set limit and you only pay when someone clicks on
your advertisement. For search engine advertising to be effective, however,
must have a exciting landing page that gets the results you want, whether
your goal is for visitors to make them buy a product, call you, or sign up for
your newsletter. If you need help, you can search online for a web designer
and writer to help you create eye-catching and motivating web pages.
Search for free online business directories or online classified advertising
sites where you can place a listing.
• Personalization: Even though the internet can occasionally seems like a
very impersonal place, it can also give chances for developing a more
personal relationship with your current and new potential customers. When
customers go online to enquire about a product or service they are seeing,
your website can suggest them a great deal about your company. You can
ask your satisfied customers for their testimonials and make use of those to
create Our Product/ Services page that allows visitors to get to know a little
about it. You can also use your website or email newsletter to inform
buyers about your products and services. Real images of your products and
videos of your company's services in action can be very useful. Giving your
visitors exciting and helpful content can help build assurance in your
company. As shown in Figure 10.4, new user can refer experience of
previous user.
Figure 10.4 Guest Experience

Disadvantage
• Piracy: One disadvantage of advertising on the Internet is that your
marketing materials are easily available for anyone in the world to copy,
irrespective of the legal ramifications. Company Logos, images and
trademarks can be copied and used for further money-making purposes, or
sometimes even to insult or mock your company to break client’s trust.
With television and magazine advertising, this is not the case.
• Frustration of Customer: Another disadvantage is the fact that the
Internet-advertising has begun to introduce advertisement confusion to the
Web. Web users are so flooded with popup / banner ads and spam email
that they are getting frustrated and have started to avoid internet advertising
just as much as advertisements on traditional media.

• Some Costly Methods: Some methods of web advertising are costly in
terms of time and budget. Organic search engine marketing, for example,
can easily consume hours of your time researching keywords and building
backlinks. Social media is free but may not lead much traffic to your site.
Paid advertising, such as banner ads and pop-ups, can be costly, and may
be more suited to larger companies, such as national banking chains and
vehicle manufacturers. Another drawback to this type of advertising is that
web surfers often find it irritating and click away or simply ignore it. You
should be alert that your advertisement does not push away your potential
customers.
• Require high end technology: Some web Advertisements requires
consumers to use newer and communication technologies rather than the
older and traditional media. The lower speed Internet cannot load
advertisement properly. If you build heavy or confused websites,
consumers connected to the Internet via dial-up connections or through
mobiles data connection may experience massive delays in delivery of the
content.
Table 10 Advantages and Disadvantages of Selected Advertising Methods
Advertising quality WWW Newspaper Periodicals Television Radio Direct

Mail
Huge National clients Yes Maybe Maybe Maybe Maybe Yes
International exposure Yes No Maybe Yes No Yes
Specific client oriented Yes No Yes No No Yes
Visiting members can Yes Yes Yes No No Yes

refer ad as per their
convenience
Relative expense Low Medium High High Medium High
Instant client Yes No No No No No

interaction
10. SUCCESSFUL WEB DESIGN GUIDELINE

AND COMPONENTS
Internet is the world's most dominant medium of advertising because of two
main reasons: First, almost every home has continuous access to the Internet.
Second, the Internet has a daily audience that is greater than the sum of the
entire historical audience of traditional media. The possibility of reaching a

predefined target audience leverages the brand, brings the effectiveness of the
website’s sales, and the transfer of information to consumers.
The accurate advertising channels and proper advertising promotion is one
of success elements of the business in the competitive environment of
information technology age. The suitable use of these techniques together with
a good website can help companies to pull the web traffic as well as achieve
internet marketing objectives they have set up.
Here are some design guidelines you need to follow for a successful
website, which will be rich in user experience and decrease your bounce rate.
Always remember – ‘First Impression is the Last Impression’
Your website characterizes who you are and what do you offer. When user
comes across your site for the first time, there are few basic questions running
into his mind:
• Is this site trustworthy?
• Does it look professional?
• Where can I find what I want or need?
• Does this site make me feel welcome?
• Am I in the right place?
So you need to take into consideration all these questions while designing your
website. Sometimes, design may not be the most significant factor in a website
overall, and most of the times people put too much importance on how a site
looks instead of how it works in user friendly way, but it does play an
important role in making a good first impression.
Use best colors combinations:

Select the right colors for your users to draw attention to select elements. Don’t
try to make everything jump out. Avoid a messy mix of colors on your website,
and instead, pick two to four colors for your template and marketing materials.
As shown in Figure 10.5, minimal colors can give rich look.
Figure 10.5 Example of 4 color combination website

Animations, Gadgets, and Media:
Avoid anything redundant. Usage of Flash animations just because they look
cool is the wrong strategy. It may be frustrating. In most cases, it’s best not to
use animated backgrounds or background music. Only use media and
animations to help support content and information. Give access to its control
to the users. So that users can play it as per their convenience and won’t get
annoyed.
Layout:
Create a flawless navigation structure, and organize page elements in a grid
fashion (as opposed to randomly scattered). Also, make use of white space, and
avoid chaos! As shown in Figure 10.6 you can see well organized web
elements in grids.
Figure 10.6 Example of Layout

Typography:
Make sure your website is readable. Always go for fonts, font sizes, and font
colors that are easy to read and pleasant in looks. For easier page scanning, use
bullet lists, section headers, and divide content into short paragraphs. If your
site is English language-based, make sure information flows from left to right
and top to bottom.
While design is an important factor, don’t forget that great content is what
your visitors finally look for. A well-designed website might convince visitors
to take a closer look, but they won't look twice if the content isn't useful and
well organized. After all, you never get a second chance to make a great first
impression. Figure 10.7 shows an example of typography.

Figure 10.7 Example of Typography
Keep it Familiar:
It’s best to keep elements on your site fairly consistent from page to page.
Elements include colors, sizes, layout, and placement of those elements. Your
site needs to have a good navigation menu to flow from page to page. This
means colors are primarily the same as well as fonts and layout structure.
Navigation should remain in the same location of your layout throughout your
website. A consistent brand on the web matters! As shown in Figure 10.8
There is consistency in look of Home page and About us page.
Figure 10.8 Example consistent webpages
A picture is worth a thousand words

While designing a website, images are the important factors of the website, as
it gives the aesthetic look for website. Images are added to a page to grasp
attention. Mostly images are used to convey important information and for
better understanding of webpage as shown in Figure 10.9

Figure 10.9 Recycling image conveys the messages of the website
Marketing Experiments executed a test comparing the use of stock

photography versus real imagery on a website, and each of their effects on lead
generation. What they found was that photos of real people out-performed the
stock photos by 95%. The reason is because stock images are likely to be
irrelevant of the content point of view.
As a result, take care to place meaningful images on your site. Every image
is conveying a hidden message to your audience, and sometimes the result is
different from what you might expect.
Create a Solid Navigation System:

Perhaps one of the biggest factors to keep visitors on your website is having a
good, solid navigation system that supports all search preferences. In fact, a
recent study say the most important element in website design is ease of
finding information. If people can’t find what they're looking for, they will
give up and leave.
Key aspects for a Site’s Navigation:
• Keep the organization of your primary navigation simple (and mostly
near the top of your page).
• To let users know where they are use breadcrumbs on every page, so
they will be aware of their navigation trail.
• Include a search box near the top of your site so that users can quickly
search whatever they are looking for by keywords.
• Don't offer too many navigation options on a page.
• Don't dig too deep. In most cases, it’s best to keep your navigation to
no more than three levels deep.
• Include links within your page copy, and make it clear where those
links lead to. This is also great for SEO!

The overall rule with a proper navigation structure is simple: don’t require
visitors to think about where they need to go and how to get there. Make it easy
for them to browse through. Figure 10.10Shows a simple navigation bar.
Figure 10.10 Example of Simple Navigation bar
Avoid use of Flashy Animation:

Sometimes Animations are generally seen as source of frustration on web
pages because these make it difficult for the users to focus on the primary
content of the web page. In some severe cases animations are more than just
irritation.
If you want to add some animation showing assembling or procedure of a
product use, try to use videos with enabling user control to start or stop it.
Check for compatibility:

Make sure that anyone visiting your website can view it irrespective of what
browser or application they're using. In order to achieve major traffic, your site
needs to be compatible with multiple browsers and devices. With growth in
mobile phones and tablet devices, people are surfing the internet more than
ever before. Make sure to get some of those views by allowing everyone to
view your site, no matter what kind of system they run or which browser they
use. As shown in figure 10.2 , your website should be responsive to any
browser or device.

Figure 10.10 Example of Compatible Website

Which is be relatively cheap way of web advertising?
What is Piracy?
Why to Use best colors combinations?
Why an image is so crucial for some websites?
What does compatible website means?
10.6 EFFECTIVENESS OF WEB

ADVERTISING
Basically advertising effectiveness depends upon user’s response towards an
advertisement and on their attitude towards advertising. Advertising's
effectiveness lies in its ability to help stimulate or maintain sales. Unlike other
media, the internet allows advertisers to evaluate the effectiveness of their
marketing on an almost instantaneous basis – thus allowing for quick
refinement of their skills and a readjustment of their target audience,
Valuing the effectiveness of an Advertisement is an essential part of the
marketing campaign. Once an advertisement reaches its target audience in a
positive way, the usefulness and profitability of the campaign rises.
Advertisements can be useful in several of the ways, such as in making a
brand, increasing levels of familiarity, recollection and degrees of
identification.
From affiliate marketing to online classifieds, there are many ways to build
your business online. Here’s a look for popular online marketing options:
Local listings and classifieds:

Create your business listing on listing sites such as Thelinkindia, YellowPages
or Helloindia to ensure that consumers searching for nearby businesses find
yours. Some listings allow you to promote offers such as sales and new
products. Customer review sites are basically local directories like Yelp that
allow users to express their opinions about businesses.
Search advertising:
Search advertising is a technique of putting online advertisement on Web pages
near search engine results. With AdWords (www.google.com/adwords), you
can provide your message at the moment someone is searching for the type of
product or service you offer. Choose keywords that relate as closely as possible
to your offerings so you receive the most likely prospects. For CPC (Cost Per
Click) advertisement, you pay only when someone clicks on your
advertisement.
Mobile marketing:
In today’s world use of smartphones have been increased rapidly. Many
smartphones and mobile devices offer web browsing, GPS, cameras and video
capabilities. As most users tend to surf internet via these devices, you can
develop creative campaigns with text messages and location-based social
networks.
Social networking sites:

Encourage new business through social networking sites where netizens share
stories and recommend products and services.
Contextual advertisement:
Contextual advertising takes display advertisement to the next level, by placing
them on sites which are related to your offerings; for example, if you sell
academic goods, your advertisement may perform better on education-related
sites. Services are available that automatically allot advertisement to sites
based on the content of those sites.
Display advertisement:
Display advertising is advertising on website, it include many various formats
and contains items such as images, video, audio, text or flash. The main
purpose is to deliver general advertisement and brand messages to site visitor.
You can also distribute your display advertisement via advertisement networks
and advertisement management systems.
Geo-targeting:

Geo-targeting is a method of defining the geographical location of a website
visitor and delivering different content to that visitor based on his location,
such as city or region. Simply means advertising to prospects in specific
locations, which could be very useful, for example, if you have started a coffee
shop in a city, then you can target that city for positive customers to approach
your coffee shop.
Associate marketing:
Associate marketing lets you get other businesses to drive prospects to your
website. Some associates may allow you to set up a store on their domains,
such as evaluation shopping sites, where you can place advertisement of your
services or product. For example, you will find advertisements of travelling
company on any blog, which is related to travelling.
Online videos:
For gaining the new audiences, you should post videos on video-sharing sites.
The best videos must to be up to 2 minutes and have an offer, such as a free
copy of a report or a product discount voucher, to encourage viewers to take
action. MobileDemand is one of many small businesses with a YouTube
channel to help spread company news and information.

Name few examples of Local listings sites
Name few Social networking sites.
What is Contextual advertisement?
Explain term Geo-targeting.
Give one example of Associate marketing.
10.7 SUMMARY
• The web is a global society and has people from almost every folks visiting
it.
• Advertising on the web needs carefully planned strategies and expertise.
The difference between a web site created by an amateur and that created
by a professional can be easily differentiated by the kind of design,
language, look and presentation.
• Internet is the connectivity that connects almost every communication
possible. It communicates through cables, switches and devices that allow
one computer user to get connected with another. The web is a protocol that
operates on the top of this connectivity.

• The basic difference between traditional modes of advertisement and
advertising on the web is the ability to get a feedback from the consumer.
Traditional advertisements mediums likes newspapers, magazines or radio
are unable to get an immediate or a quick feedback. The web scores over
them here as it has ways online feedback forms.
• Creating a website requires right amount of patience, understanding of
specifications, a sense of commitment and right proportion of appearance
to attract attention of the targeted group of clientele.
• The mode of promotions of your website should not be limited to the
internet. Even traditional forms of media play an vital role in carrying your
advertisement to the masses like they have been doing since ages.
• The simplest approach can be adding your URL to a business card or at the
bottom of a newspaper advertisement. Your traditional media advertising
plan should, however, support and strengthen you online adverting efforts.
10.8 KEY TEARMS

• Advertiser: The webmaster / site owner whose Web advertisements are
displayed on the Web site.
• Publisher: The webmaster who offers space on his web site.
• Banner: The graphic file which displays the advertiser’s message.
• Impression or exposure: When a Web advertisement is fully displayed
on a publisher’s web page, it is counted as a Web ad impression or
exposure. The exposure count indicates the number of Web
advertisements displayed on a member’s web site.
• Cost per Click (CPC): When purchasing clicks through (CT) this is the
price you agree to pay for each visitor to your site. This performance
based payment is becoming increasingly popular.
10.9 QUESTIONS
1. Brief note on Web advertising strategies.
2. Explain in your own words how internet is different from Web?
3. Describe methods of web advertising.
4. Describe technical parameters for Web advertisement.
5. Give traditional methods of advertising.
6. What are advantages and disadvantages of web advertising?
7. Describe any five differences between traditional forms of advertising and
web advertising.
8. Write a note on guidelines of a successful website design.

9. What are the ways of promoting your website?
10. Write a note on Print media advertising.
A hallmark can be your company logo, your company name, an

identifying image, or a copyright notice appearing on every web
page.
Web advertising is a new way of marketing, in which marketers
increase sales and build brand awareness with the use of the
Internet.
Netizen: Network Citizens. A person who uses the Web or the
Internet.
Newbies: People who are new to the online community?
It reaches near about 10 crores people as they are said to be a part
of routine life of a common literate man.
TV has the most effective impact as it appeals to both eye and the
ear
Pay per click advertising with search engines.

Company Logos, images and trademarks can be copied and used for
further money-making purposes
Use best colors combinations for your users to draw attention to
select an element.
images are used to convey important information and for better
understanding of webpage
No matter what kind of system they run or which browser they use,
your website should get displayed properly.
Thelinkindia, YellowPages or Helloindia.

Facebook, Google+, tweeter.

It places you advertisement on such sites, which are related to your
offerings.
Geo-targeting is a method of defining the geographical location of a
website visitor.
You will find advertisements of IT, marketing companies on any
job portal.
10.10 BIBLIOGRAPHY
• The Small Business Online Marketing Guide- Google

• Computer History Museum

Introduction To Web Development

Uploaded by

Copyright:

Available Formats

Introduction To Web Development

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To Web Development

Uploaded by

Copyright:

Available Formats

BMG 201

INTRODUCTION TO WEB DEVELOPMENT

. The draft instructional material is being made

Web Development Process 1

Today almost everyone realizes the prominence of having a website of their

1.1 UNIT OBJECTIVES:

After studying this unit you will be able to

1.2 SOFTWARE TO CREATE YOUR WEBSITE

Web Development Process

1.2.1 Website Creation Program

Web Development Process 3

Figure 1.1 shows WordPress interface.

• CoffeeCup Free HTML Editor:

Figure 1.2 shows CoffeeCup interface

Previously Macromedia Dreamweaver and now part of the Adobe portfolio,

Web Development Process

Figure 1.3 Dreamweaver dual pane mode

Figure 1.4 Contribute interface

Web Development Process 5

Notepad++ is a text editor and source code editor. It is a replacement for

Figure 1.5 Notepad++ interface

1.2.2 Image editing program

Web Development Process

Figure 1.6 Photoshop workspace

Web Development Process 7

Figure 1.7 shows illustrator workspace.

Figure 1.8 CorelDraw’s interface

Web Development Process

1.3.2 A Good Website Clearly Meets Identified Goals

Web Development Process 9

1.3.3 A Good Website is Easy to Navigate

1.3.4 A Good Website is Visually Attractive

1.4 HOW TO PLAN YOUR WEBSITE

Web Development Process 1

1.4.1 Collection of Information:

1.4.2 Define your target audiences:

• Who will use your website?

1.4.3 Create a list of Content:

Web Development Process 11

1.4.5 Create a sitemap:

Figure 1.9 Sitemap

1.4.6 Create a Navigation Scheme:

Web Development Process 1

1.5 DESIGN AND LAYOUT

1.5.1 Create a consistent visual theme

1.5.2 Align various elements on the web page

Web Development Process 13

Figure 1.10 (a) Figure 1.10 (b)

Figure 1.10 (c) Figure 1.10 (d)

1.5.3 Create a Responsive Web Design

It is a newer approach, based on CSS3, and a deeper level of per-device

To achieve responsiveness in webpages you must use of Fluid layouts, which

Web Development Process 1

Figure 1.11 Responsive Webpage Layout

1.5.4 Use color contrast and text weight effectively

Figure 1.12(a) Good Color Contrast

Figure 1.12(b) Bad Color Contrast

Web Development Process 15

Figure 1.13 Combination of Serif and San-Serif fonts