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
