BCA I SEM I Subject: Web Page Design

UNIT 2: Basics in Web Design

Define Internet.

Ans:-The Internet is essentially a global network of computing resources. You can think of the

Internet as a physical collection of routers and circuits as a set of shared resources.

Some common definitions given in the past include −

 A network of networks based on the TCP/IP communications protocol.

 A community of people who use and develop those networks.

Components of Internet.

Ans:-Components of internet include Ethernet, Firewall, Modem, Routers, etc.Computer

networks share common devices, functions, and features including servers, clients, transmission

media, shared data, shared printers and other hardware and software resources, network interface

card(NIC), local operating system(LOS), and the network operating system (NOS).

Major advantages of web browsers.

Web browser has its own advantages beside any particular type as follows:

 Time: With radio and TV, those rare events that are important to a broad group of

viewers could be reported live or in minutes. More typically, the delay is hours to a day.

With newspapers, it takes closer to a day, sometimes more, before the news is received

by the readers. With the Web and mobile phones, people are reporting on (e.g, through

Twitter, crowd-sourcing, etc.) and reading about events about as the events occur. You

get pictures, and information almost instantaneously.

BCA I SEM I Subject: Web Page Design

 Localization: Media such as newspapers, radio and TV report information relevant to a

relatively large geographical region: a district, a country, etc. It is more difficult to find

localized information, at the community level. With the Web, a village, independent of its

size, and any community (even one that is separated geographically) can share

information relevant to their members and citizens wherever Web access is possible.

 Universality: Radio, TV, and newspapers usually cover a relatively large geographic

area, and they are typically available only to people living in that area. It is difficult for

people outside of the area to access those media. The Web is universal, and available

anywhere in the World where people have access to it. This allows people today to, for

example, book a hotel and prepare vacations on the other side of the planet.

 Focus: Localization and scope of media mentioned above concerned geographical

aspects. This is also true for thematic aspects. There are today millions of communities

specialized on specific themes (languages, hobby, nature,…). While there are thematic

radio, newspaper, TV, and magazines, their diffusion is geographically limited, while

these communities are spread over the Web. The Web, by connecting people, enables

those with shared interests to exchange their resources independently of their respective

locations.

 Search. Mechanisms such as libraries, guides, reviews and word-of-mouth, can help

people to find information they seek in traditional media. On the Web, search engines, as

well as easier access to guides and reviews, facilitate the quest for information. The

volume of information on the Web and the ability to assess the quality of information are

issues requiring further work.

BCA I SEM I Subject: Web Page Design

 Linking: A person can change channels on the radio or TV, or pickup one newspaper

and then move to another. On the Web, links allow people to move easily from one Web

page to related information elsewhere on the same page, on the same site or one a

different site half-way around the world.

BCA I SEM I Subject: Web Page Design

History of Internet.

The history of the Internet has its origin in the efforts to build and interconnect computer

networks that arose from research and development in the United States and involved

international collaboration, particularly with researchers in the United Kingdom and France.

Computer science was an emerging discipline in the late 1950s that began to consider time-

sharing between computer users and, later, the possibility of achieving this over wide area

networks. ARPANET adopted the packet switching technology proposed by Davies and Baran,

underpinned by mathematical work in the early 1970s by Leonard Kleinrock. The network was

built by Bolt, Beranek, and Newman.

Early packet switching networks such as the NPL network, ARPANET, Merit Network, and

CYCLADES in the early 1970s researched and provided data networking. The ARPANET

project and international working groups led to the development of protocols for

internetworking, in which multiple separate networks could be joined into a network of

networks, which produced various standards. Vint Cerf, at Stanford University, and Bob Kahn, at

ARPA, published research in 1973 that evolved into the Transmission Control Protocol (TCP)

and Internet Protocol (IP), the two protocols of the Internet protocol suite. The design included

concepts from the French CYCLADES project directed by Louis Pouzin.

In the early 1980s the National Science Foundation (NSF) funded national supercomputing

centers at several universities in the United States and provided interconnectivity in 1986 with

the NSFNET project, which created network access to these supercomputer sites for research and

academic organizations in the United States. International connections to NSFNET, the

BCA I SEM I Subject: Web Page Design

emergence of architecture such as the Domain Name System, and the adoption of TCP/IP

internationally marked the beginnings of the Internet.

BCA I SEM I Subject: Web Page Design

Differentiate in between Web server and Web browser.

Web Browser is a software which is used to browse and display pages available over internet

whereas web server is a software which provides these documents when requested by web

browsers.

Following are the important differences between Web Browser and Web Server.

Sr. Key Web Browser Web Server

No.

1 Purpose Web Browser is a software which Web server is a software which

is used to browse and display provides these documents when

pages available over internet. requested by web browsers.

2 Process A web browser sends request to Web server sees and approves those

server for web based documents requests made by web browsers and

and services. sends the document in response.

3 Process Web browser sends an HTTP Web server receives HTTP Request

Request and gets a HTTP and sends a HTTP Response.

Response.

4 Processing Web browser has no processing Web server follows three major

Model model. processing models: process based,

thread based or hybrid.

5 Data Web browsers stores user data in Web server provide an area to store

Storage cookies in local machine. the website.

BCA I SEM I Subject: Web Page Design

6 Installation Web Browser is installed on user's Web server can be installed any

machine. where but it need to be on a network

or on local computer.

7 Example Google Chrome Apache Server

BCA I SEM I Subject: Web Page Design

Components of Web page or web site.

Components of a Website:

A website can be divided into pieces a lot of different ways. You can divide up the process of

development into stages, or you can look at the individual parts. But a website is not like a car.

The pieces don’t screw together or came apart in the same way. What makes a website work is

the interaction between components that are separated in space and, possibly, time. Some of the

pieces are more theoretical, such as the layout and the navigation structure. It’s like the frame of

the car, except that you can’t actually see the frame. Just the things hanging on it.

Here are some of the components that hold a website together:

 Front End Elements. People often describe the website as having a front end and back

end. In this analogy, front end is what you see, back end is what you don’t. Simple

enough, except that you can’t really see the navigation structure, not all at once. But it’s a

place to start. Good front-end components include the following:

 The navigation structure. This is not the same as the sitemap, though that might

represent it. The navigation structure is the order of the pages, the collection of what links

to what. Usually it is held together by at least one navigation menu.

 The page layout. This is the way things appear on the page. Is the navigation menu on

the top or along the side? Are there images above the text area? Tables? Good layout is as

important as any other element of design. Bad layout makes a website look crowded and

slapdash. Good layout allows the eye to find what it seeks easily.
BCA I SEM I Subject: Web Page Design

 Logo. A good website has a unifying graphic around which it is built. The graphic

represents your company, your organization. It often sets up the color scheme and the

style elements used throughout. The logo ties the website to everything else your

company does, though the printed materials, signs, whatever.

 Images. Photos, graphics, navigation bars, lines and flourishes, animations can all be

placed on a website to bring it to life. Or, in some cases, bury it.

 Contents. Few websites exist just to be looked at. The internet began as a method of

sharing information. As it evolved into the World Wide Web, it became rich in all kind of

media. But it still exists primarily to communicate.

 Graphic Design. Many of the elements described, such as the logo, the navigation

menus, the layout, images, etc., fall under the general category of graphic design. But

graphic design is more than the sum of these parts. It is the overall look and feel the

website will have as a result of proper use and integration of all these elements.

 Back End elements. Some websites are entirely static. They are the same every time you

visit. You never give them information, there are no polls, bulletin boards, or referral

forms. If you want to find something on the website, there is no search box, you just look

around until you find it.

BCA I SEM I Subject: Web Page Design

Differentiate in between web page, web site, web server, serch

engine.

Ans:-Web page:

A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera,

Microsoft Internet Explorer or Edge, or Apple's Safari. These are also often called just "pages."

All web pages available on the web are reachable through a unique address. To access a page,

just type its address in your browser address bar: eg: https://www.google.com

Website:

A collection of web pages which are grouped together and usually connected together in various

ways. Often called a "web site" or simply a "site." To access a website, type its domain name in

your browser address bar, and the browser will display the website's main web page, or

homepage (casually referred as "the home"): e.g. Mozilla.org

Web server:

A computer that hosts a website on the Internet. "Hosting" means that all the web pages and their

supporting files are available on that computer. The web server will send any web page from the

website it is hosting to any user's browser, per user request.

Don't confuse websites and web servers. For example, if you hear someone say, "My website is

not responding", it actually means that the web server is not responding and therefore the website

is not available. More importantly, since a web server can host multiple websites, the term web

server is never used to designate a website, as it could cause great confusion.

Search engine:

A web service that helps you find other web pages, such as Google, Bing, Yahoo, or

DuckDuckGo. Search engines are normally accessed through a web browser (e.g. you can
BCA I SEM I Subject: Web Page Design

perform search engine searches directly in the address bar of Firefox, Chrome, etc.) or through a

web page (e.g. bing.com or duckduckgo.com).

BCA I SEM I Subject: Web Page Design

Web Application.

A web application is any software program application that uses a web browser as a 'client'.

Applications can range from something as simple as a message board or a guest sign-in book to

as complex as a spreadsheet or a word processor.

What is a Client?

The word 'client' refers to the program a person uses to run an application. In a 'client-server'

environment there are multiple computers that share information. Entering information into a

database is a part of sharing information.

What are the Benefits of a Web Application?

Web applications help developers negate the need for specifics. For example, as the client runs in

a web browser, the user is free to use a Mac or an IBM, also, the type of O.S being used doesn't

matter. Web applications commonly use a combination of server-side script (ASP, PHP, etc) and

client-side script (HTML, JavaScript, etc.) to develop the application.

Increased Usage of Web Applications

The emergence of new age technology has resulted in mass usage of web. Millions of businesses

use the web as an affordable means of communication. There are over a million internet users

today. Marketers use the web to communicate with the visitors who access the websites.

Importance of Web Applications Today

All the data that is entered in the form of newsletters, application forms needs to be collected,

processed in anticipation of its usage for the future. Web applications, in the form of submit
BCA I SEM I Subject: Web Page Design

fields, enquiry and login forms, shopping carts, and content management systems, are those

website widgets that allow this to happen.

Advantages of designing a web site.

Ans:-1. Fluid Grids

Fluid grids are at the very core of responsive design. Grids allow you to align elements on your

page and lay them out in a visually appealing way, following a certain hierarchy. Fluid grids

scale depending on the size of the user’s screen and make sure that all page elements follow suit.

2. Media Queries

Media queries have existed since the early 2000s, but it wasn’t until 2012 that they became a

W3C recommended standard. Like fluid grids, media queries represent a cornerstone technology

behind responsive web design. Thanks to media queries, a website can gather data that helps

determine the size of the screen a visitor is using to access it.

3. Responsive Images and Media

Responsive web design works rather well when you work with nothing but text. However,

modern websites include a lot of media such as images and videos, which can be somewhat

tricky.

4. Improved User Experience

A responsive website leads to a better user experience. A major factor indicating the quality of

user experience is the time they spend on your site. If they find it hard to navigate or use because

they're forced to constantly pinch and zoom, they won’t stay on your website.
BCA I SEM I Subject: Web Page Design

5. Easier Maintenance

Directly tied to the point above is easier website maintenance. With two versions of your

website, your staff or your development team has to divide time and resources on managing two

websites.

6. Faster Website Development

Not so long ago, a common practice involved making a separate mobile version of your site that

was served when a smaller screen size was detected. However, developing a mobile version of

your site takes up more time than developing a responsive website that looks great and works as

intended no matter which device your visitors are using.

BCA I SEM I Subject: Web Page Design

Components of Web page or web site in detail. (write any 10

components)

Components of a Website:

 Front End Elements. People often describe the website as having a front end and back

end. In this analogy, front end is what you see, back end is what you don’t. Simple

enough, except that you can’t really see the navigation structure, not all at once.

 The navigation structure. This is not the same as the sitemap, though that might

represent it. The navigation structure is the order of the pages, the collection of what links

to what. Usually it is held together by at least one navigation menu.

 The page layout. This is the way things appear on the page. Is the navigation menu on

the top or along the side? Are there images above the text area? Tables? Good layout is as

important as any other element of design. Bad layout makes a website look crowded and

slapdash. Good layout allows the eye to find what it seeks easily.

 Logo. A good website has a unifying graphic around which it is built. The graphic

represents your company, your organization. It often sets up the color scheme and the

style elements used throughout.

 Images. Photos, graphics, navigation bars, lines and flourishes, animations can all be

placed on a website to bring it to life. Or, in some cases, bury it.

 Contents. Few websites exist just to be looked at. The internet began as a method of

sharing information. As it evolved into the World Wide Web, it became rich in all kind of

media. But it still exists primarily to communicate.

BCA I SEM I Subject: Web Page Design

 Graphic Design. Many of the elements described, such as the logo, the navigation

menus, the layout, images, etc., fall under the general category of graphic design. But

graphic design is more than the sum of these parts.

 Back End elements. Some websites are entirely static. They are the same every time you

visit. You never give them information, there are no polls, bulletin boards, or referral

forms. If you want to find something on the website, there is no search box, you just look

around until you find it.

 Content Management System. This is the ability to update your website without having

to directly edit the html. A robust content management system allows for documents to

be prepared, edited, approved, and tracked prior to publication.

 E-Commerce. Purchasing items from the internet has begun more and more common.

The internet allows small merchants to reach a world-wide audience, while other retailers

are able to maintain huge inventories of immense variety. New levels of convenience are

possible, such as mail-order rentals of DVDs and games.

 Shopping Cart. If you have one or two products, it’s fine if visitors click a couple times,

fill out information, and purchase the product. If you have a lot of different things for

sale, you need a shopping cart. This is just a way for visitors to pick out different items

and make a single purchase at the end of the process.

 Site Search. Among all the information on the Web, somebody found yours with a

simple search and a couple clicks. Do you want them to slow down and plow through

pages and pages of text to find that thing they are looking for? Only if you want to lose

nine out of ten visitors.

BCA I SEM I Subject: Web Page Design

 Multi-media. Some websites call for more than just text and images. Photo-tours, video-

clips, sound-clips all can add to the experience if they are well matched to the type of site

and profile of the target audience.

BCA I SEM I Subject: Web Page Design

Web page in terms of Static and Dynamic web page.

Web Page:

web page is a document available on world wide web. Web Pages are stored on web server and

can be viewed using a web browser.

A web page can contain huge information including text, graphics, audio, video and hyper links.

These hyper links are the link to other web pages.

Collection of linked web pages on a web server is known as website. There is unique Uniform

Resource Locator (URL) is associated with each web page.

Static Web page:

Static web pages are also known as flat or stationary web page. They are loaded on the client’s

browser as exactly they are stored on the web server. Such web pages contain only static

information. User can only read the information but can’t do any modification or interact with

the information.

Static web pages are created using only HTML. Static web pages are only used when the

information is no more required to be modified.

BCA I SEM I Subject: Web Page Design

Dynamic Web page:

Dynamic web page shows different information at different point of time. It is possible to change

a portaion of a web page without loading the entire web page. It has been made possible using

Ajax technology.

Server-side dynamic web page:

It is created by using server-side scripting. There are server-side scripting parameters that

determine how to assemble a new web page which also include setting up of more client-side

processing.

Client-side dynamic web page:

It is processed using client side scripting such as JavaScript. And then passed in to Document

Object Model (DOM).

BCA I SEM I Subject: Web Page Design

Benefits of Web design.

Responsive web design benefits designers, developers, businesses and, most importantly, users

in the following ways:

1. More mobile traffic

According to a report from SimilarWeb`, more than half of traffic to top websites in the U.S.

came from mobile devices in 2015. Therefore, it's increasingly important for companies to have

websites that render properly on smaller screens so that users don't encounter distorted images or

experience a sub-optimal site layout. While some businesses still choose to have a separate

version of their website for mobile users, responsive design is becoming the norm because it

offers greater versatility at lower development costs.

2. Faster mobile development at lower costs

Making one responsive website takes considerably less time than making a stand-alone mobile

application in addition to a standard desktop website. Since time is money, responsive design

naturally costs less than the alternative. Even if the initial investment of a responsively

designed website does end up comes out to being more expensive than creating two separate

websites, you'll end up saving in the long run due to maintenance costs, special configuration

costs, etc of a website that uses two separate versions.

3. Lower maintenance needs

Maintaining a separate mobile site requires additional testing and support. In contrast, the

process of responsive design uses standardized testing methodologies to ensure optimal layout

on every screen. Having separate desktop and mobile sites also necessitates two content

strategies, two administrative interfaces and potentially two design teams. Responsive design's

"one size fits all" approach means less headache for developers, business owners, and
BCA I SEM I Subject: Web Page Design

consumers. Spending less time on maintenance also frees up time to focus on more important

things like marketing and content creation.

4. Faster pages

Mobile users in particular have short attention spans. Studies show that mobile visitors tend to

abandon web pages that take longer than three seconds to finish loading. If a site isn't optimized

for smartphones and tablets, it will also take more time to navigate, which can frustrate

customers to a point of no return. Ensuring that your responsive website uses modern

performance techniques such as caching and responsive image display will help improve your

web page loading speed.

5. Lower bounce rates

A responsive and optimized mobile site provides a much better user experience for the visitor.

Therefore, it is much more likely that they'll stick around for a longer period of time and explore

different areas of your site. Alternatively, if your site isn't responsive, it is much harder to keep

the visitor engaged and therefore more likely that they'll bounce.

6. Higher conversion rates

Lowering your bounce rate is only half of the battle. Creating a consistent user experience across

all devices is key to converting new customers. When users are deciding whether or not to

subscribe to a service, they don't want to be redirected to device-specific websites because the

process often takes longer. Having a single secure website that looks professional on all

platforms makes users less likely to get frustrated or turn to a competitor.

7. Easier analytics reporting

Knowing where traffic is coming from and how users interact with your website is necessary to

make informed improvements. Managing multiple versions of a website requires developers to

BCA I SEM I Subject: Web Page Design

track users' journeys through multiple conversion paths, funnels, and redirects. Having a single

responsive site greatly simplifies the monitoring process. Google Analytics and similar tools

now cater to responsive websites by condensing tracking and analytics into a single report so that

you can see how your content is performing on different devices.

8. Improved SEO

Responsive web design is becoming as important to search engine optimization as quality

content. Stronger backlinks and better bounce rates translate into higher search rankings, but

there's an extra SEO benefit for mobile optimized sites.

9. Improved online browsing experience

First impressions are everything, so whether someone is visiting a website for the first time from

their desktop or their smartphone, you want them to have a consistently positive experience. If

visitors must do a lot of zooming, shrinking and pinching their screens during their first visit,

they're likely to give up and try another website.

10. Improved offline browsing experience

Now that many smartphones and tablets are HTML5 enabled, responsive web design benefits

users by making it easier to continue viewing content within HTML5 web applications without

an internet connection.
BCA I SEM I Subject: Web Page Design

Internet based services.

Ans:-Internet Services allows us to access huge amount of information such as text, graphics,

sound and software over the internet. Following diagram shows the four different categories of

Internet Services.

There are various Communication Services available that offer exchange of information with

individuals or groups. Eg:

Electronic Mail: Used to send electronic message over the internet.

Telnet: Used to log on to a remote computer that is attached to internet.

Newsgroup: Offers a forum for people to discuss topics of common interests.

Information Retrieval Services:

There exist several Information retrieval services offering easy access to information present on

the internet. The following table gives a brief introduction to these services:

File Transfer Protocol (FTP): Enable the users to transfer files.

BCA I SEM I Subject: Web Page Design

Web Services:

Web services allow exchange of information between applications on the web. Using web

services, applications can easily interact with each other. The web services are offered using

concept of Utility Computing.

World Wide Web (WWW):

WWW is also known as W3. It offers a way to access documents spread over the several servers

over the internet. These documents may contain texts, graphics, audio, video, hyperlinks. The

hyperlinks allow the users to navigate between the documents.

BCA I SEM I Subject: Web Page Design

Explain HTTP.
Ans:- Basic Architecture: The following diagram shows a very basic architecture of a web application

and depicts where HTTP sits:

BCA I SEM I Subject: Web Page Design

The HTTP protocol is a request/response protocol based on the client/server based architecture

where web browsers, robots and search engines, etc. act like HTTP clients, and the Web server

acts as a server.

Client

The HTTP client sends a request to the server in the form of a request method, URI, and

protocol version.

Server

The HTTP server responds with a status line, including the message's protocol version and a

success or error code, followed by a MIME-like message containing server information, entity

Meta information, and possible entity-body content.

HTTP is based on the client-server architecture model and a stateless request/response protocol

that operates by exchanging messages across a reliable TCP/IP connection.

An HTTP "client" is a program (Web browser or any other client) that establishes a connection

to a server for the purpose of sending one or more HTTP request messages. An HTTP "server"

is a program (generally a web server like Apache Web Server or Internet Information Services

IIS, etc.) that accepts connections in order to serve HTTP requests by sending HTTP response

messages.

HTTP makes use of the Uniform Resource Identifier (URI) to identify a given resource and to

establish a connection.

Internet layers & protocol stack:

BCA I SEM I Subject: Web Page Design