INTERNET AND WEB TECHNOLOGY (Unit-1)

1. Internet:
The internet is a globally connected network system facilitating worldwide
communication and access to data resources through a huge collection of personal,
public, business, academic and government networks. it’s governed by agencies just like
Internet Assigned Numbers Authority (or IANA) that establish universal protocols.
2. World Wide Web (WWW) :
World Wide Web (WWW), byname Web, is leading information retrieval service of web
(the worldwide computer network). Online gives users access to a huge array of
documents that are connected to every other by means of hypertext or hypermedia
links—i.e., hyperlinks, electronic connections that link related pieces of data so as to
permit a user quick access to them. Hypertext allows the user to pick a word or phrase
from text and thereby access other documents that contain additional information
concerning that word or phrase.

Difference between Internet and WWW:

Some people use the terms 'internet' and 'World Wide Web' interchangeably. They think they are
the same thing, but it is not so. Internet is entirely different from WWW. It is a worldwide
network of devices like computers, laptops, tablets, etc. It enables users to send emails to other
users and chat with them online. For example, when you send an email or chatting with someone
online, you are using the internet.

1
INTERNET AND WEB TECHNOLOGY (Unit-1)

S.No. INTERNET WWW

1 Internet is a global network of networks. WWW stands for World wide Web.

Internet is a means of connecting a computer to World Wide Web which is a collection of

2
any other computer anywhere in the world. information which is accessed via the Internet.

3 Internet is infrastructure. WWW is service on top of that infrastructure.

Web can be viewed as collection of books on

4 Internet can be viewed as a big book-store.
that store.

At some advanced level, to understand we can At some advanced level, to understand we can
5
think of the Internet as hardware. think of the WWW as software.

WWW is more software-oriented as compared

6 Internet is primarily hardware-based.
to the Internet.

English scientist Tim Berners-Lee invented the

7 It is originated sometimes in late 1960s.
World Wide Web in 1989.

8 Internet is superset of WWW. WWW is a subset of the Internet.

The first version of the Internet was known as In the beginning WWW was known as
9
ARPANET. NSFNET.

10 Internet uses IP address. WWW uses HTTP.

World Wide Web?

World Wide Web, which is also known as a Web, is a collection of websites or web pages stored
in web servers and connected to local computers through the internet. These websites contain
text pages, digital images, audios, videos, etc. Users can access the content of these sites from
any part of the world over the internet using their devices such as computers, laptops, cell
phones, etc. The WWW, along with internet, enables the retrieval and display of text and media
to your device.

2
INTERNET AND WEB TECHNOLOGY (Unit-1)

The building blocks of the Web are web pages which are formatted in HTML and connected by
links called "hypertext" or hyperlinks and accessed by HTTP. These links are electronic
connections that link related pieces of information so that users can access the desired
information quickly. Hypertext offers the advantage to select a word or phrase from text and thus
to access other pages that provide additional information related to that word or phrase.
A web page is given an online address called a Uniform Resource Locator (URL). A particular
collection of web pages that belong to a specific URL is called a website,
e.g., www.facebook.com, www.google.com, etc. So, the World Wide Web is like a huge electronic
book whose pages are stored on multiple servers across the world.
Small websites store all of their WebPages on a single server, but big websites or organizations
place their WebPages on different servers in different countries so that when users of a country
search their site they could get the information quickly from the nearest server.
So, the web provides a communication platform for users to retrieve and exchange information
over the internet. Unlike a book, where we move from one page to another in a sequence, on
World Wide Web we follow a web of hypertext links to visit a web page and from that web page
to move to other web pages. You need a browser, which is installed on your computer, to access
the Web.

3
INTERNET AND WEB TECHNOLOGY (Unit-1)

How the World Wide Web Works?

Now, we have understood that WWW is a collection of websites connected to the internet so that
people can search and share information. Now, let us understand how it works!

The Web works as per the internet's basic client-server format as shown in the following image.
The servers store and transfer web pages or information to user's computers on the network when
requested by the users. A web server is a software program which serves the web pages
requested by web users using a browser. The computer of a user who requests documents from a
server is known as a client. Browser, which is installed on the user' computer, allows users to
view the retrieved documents.

All the websites are stored in web servers. Just as someone lives on rent in a house, a website
occupies a space in a server and remains stored in it. The server hosts the website whenever a
user requests its WebPages, and the website owner has to pay the hosting price for the same.
4
INTERNET AND WEB TECHNOLOGY (Unit-1)

The moment you open the browser and type a URL in the address bar or search something on
Google, the WWW starts working. There are three main technologies involved in transferring
information (web pages) from servers to clients (computers of users). These technologies include
Hypertext Markup Language (HTML), Hypertext Transfer Protocol (HTTP) and Web browsers.

Hypertext Markup Language (HTML):

HTML is a standard markup language which is used for creating web pages. It describes the
structure of web pages through HTML elements or tags. These tags are used to organize the
pieces of content such as 'heading,' 'paragraph,' 'table,' 'Image,' and more. You don't see HTML
tags when you open a webpage as browsers don't display the tags and use them only to render the
content of a web page. In simple words, HTML is used to display text, images, and other
resources through a Web browser.

Web Browser:

A web browser, which is commonly known as a browser, is a program that displays text, data,
pictures, videos, animation, and more. It provides a software interface that allows you to click
hyperlinked resources on the World Wide Web. When you double click the Browser icon
installed on your computer to launch it, you get connected to the World Wide Web and can
search Google or type a URL into the address bar.
In the beginning, browsers were used only for browsing due to their limited potential. Today,
they are more advanced; along with browsing you can use them for e-mailing, transferring
multimedia files, using social media sites, and participating in online discussion groups and
more. Some of the commonly used browsers include Google Chrome, Mozilla Firefox, Internet
Explorer, Safari, and more.

5
INTERNET AND WEB TECHNOLOGY (Unit-1)

Hypertext Transfer Protocol (HTTP):

Hyper Text Transfer Protocol (HTTP) is an application layer protocol which enables WWW to
work smoothly and effectively. It is based on a client-server model. The client is a web browser
which communicates with the web server which hosts the website. This protocol defines how
messages are formatted and transmitted and what actions the Web Server and browser should
take in response to different commands. When you enter a URL in the browser, an HTTP
command is sent to the Web server, and it transmits the requested Web Page.

When we open a website using a browser, a connection to the web server is opened, and the
browser communicates with the server through HTTP and sends a request. HTTP is carried over
TCP/IP to communicate with the server. The server processes the browser's request and sends a
response, and then the connection is closed. Thus, the browser retrieves content from the server
for the user.
o HTTP stands for HyperText Transfer Protocol.
o It is a protocol used to access the data on the World Wide Web (www).
o The HTTP protocol can be used to transfer the data in the form of plain text, hypertext,
audio, video, and so on.
o This protocol is known as HyperText Transfer Protocol because of its efficiency that
allows us to use in a hypertext environment where there are rapid jumps from one
document to another document.
o HTTP is similar to the FTP as it also transfers the files from one host to another host. But,
HTTP is simpler than FTP as HTTP uses only one connection, i.e., no control connection
to transfer the files.
o HTTP is used to carry the data in the form of MIME-like format.
o HTTP is similar to SMTP as the data is transferred between client and server. The HTTP
differs from the SMTP in the way the messages are sent from the client to the server and
from server to the client. SMTP messages are stored and forwarded while HTTP
messages are delivered immediately.

6
 INTERNET AND WEB TECHNOLOGY (Unit-1)

How does HTTP work?

As a request-response protocol, HTTP gives users a way to interact with web resources
such as HTML files by transmitting hypertext messages between clients and servers.
HTTP clients generally use Transmission Control Protocol (TCP) connections to
communicate with servers.

HTTP utilizes specific request methods in order to perform various tasks. All HTTP
servers use the GET and HEAD methods, but not all support the rest of these request
methods:

● GET requests a specific resource in its entirety

● HEAD requests a specific resource without the body content
● POST adds content, messages, or data to a new page under an existing web resource
● PUT directly modifies an existing web resource or creates a new URI if need be
● DELETE gets rid of a specified resource
● TRACE shows users any changes or additions made to a web resource
● OPTIONS shows users which HTTP methods are available for a specific URL
● CONNECT converts the request connection to a transparent TCP/IP tunnel
● PATCH partially modifies a web resource

Features of HTTP:
o Connectionless protocol: HTTP is a connectionless protocol. HTTP client
initiates a request and waits for a response from the server. When the server
receives the request, the server processes the request and sends back the response
to the HTTP client after which the client disconnects the connection. The
connection between client and server exist only during the current request and
response time only.
o Media independent: HTTP protocol is a media independent as data can be sent as
long as both the client and server know how to handle the data content. It is
required for both the client and server to specify the content type in MIME-type
header.
o Stateless: HTTP is a stateless protocol as both the client and server know each
other only during the current request. Due to this nature of the protocol, both the
client and server do not retain the information between various requests of the web
pages.

7
INTERNET AND WEB TECHNOLOGY (Unit-1)

HTTP Transactions

The above figure shows the HTTP transaction between client and server. The client initiates a
transaction by sending a request message to the server. The server replies to the request message
by sending a response message.

Messages
HTTP messages are of two types: request and response. Both the message types follow the same
message format.

8
INTERNET AND WEB TECHNOLOGY (Unit-1)

Request Message: The request message is sent by the client that consists of a request line,
headers, and sometimes a body.

Response Message: The response message is sent by the server to the client that consists of a
status line, headers, and sometimes a body.

9
INTERNET AND WEB TECHNOLOGY (Unit-1)

Uniform Resource Locator (URL)

o A client that wants to access the document in an internet needs an address and to facilitate the
access of documents, the HTTP uses the concept of Uniform Resource Locator (URL).
o The Uniform Resource Locator (URL) is a standard way of specifying any kind of information on
the internet.
o The URL defines four parts: method, host computer, port, and path.

o Method: The method is the protocol used to retrieve the document from a server. For example,
HTTP.
o Host: The host is the computer where the information is stored, and the computer is given an
alias name. Web pages are mainly stored in the computers and the computers are given an alias
name that begins with the characters "www". This field is not mandatory.
o Port: The URL can also contain the port number of the server, but it's an optional field. If the port
number is included, then it must come between the host and path and it should be separated from
the host by a colon.
o Path: Path is the pathname of the file where the information is stored. The path itself contain
slashes that separate the directories from the subdirectories and files.

10
INTERNET AND WEB TECHNOLOGY (Unit-1)

What is a Web Browser?

A web browser is an application software that can process and display a web page on the internet.
The web browser is capable to make a request for web services and documents to web server. It acts
an interface between the server and the client. As web browser is a software, thus it is to be installed
on the client computer and used to surf the internet for websites and web pages. Popular examples of
web browsers include Google Chrome, Microsoft Internet Explorer, Microsoft Edge, Mozilla Firefox,
Opera Mini, etc.

What is a Web Server?

A web server is a dedicated computer that sends web based documents to the client’s computer when
request through the web browser. A web server accepts HTTP request from the client’s browser,
processes it to find the required document, and then sends a suitable response to client machine.

A web server is a basically a set of hardware and software whose primary function is to serve
web-based material through the internet on demand.

Difference between Web Browser and Web Server

The following table highlights the important differences between a Web Browser and a Web Server −

Factor Web Browser Web Server

Web Browser is a software which is

Web server is a software which provides these
Purpose used to browse and display pages
documents when requested by web browsers.
available over internet.

Web server sees and approves those requests

A web browser sends request to server
Function made by web browsers and sends the document in
for web based documents and services.
response

Web browsers send HTTP Request and Web servers receive HTTP Request and send
Process
receive HTTP Response HTTP Response.

Processing Web servers follow three major processing

Web browser has no processing model.
Model models: process based, thread based or hybrid.

Web browsers stores user data in

Data Storage Web servers provide an area to store the website.
cookies in local machine.

Web Browser is installed on user's Web servers can be installed anywhere but it need
Installation
machine. to be on a network or on local computer.

11
INTERNET AND WEB TECHNOLOGY (Unit-1)

Web browser acts as an interface Web servers act as the sender of web resources
Acts as
between the web server and client. like web pages.

Web browser is responsible to request Web server is responsible for hosting websites,
Responsibility for a website or webpage located on the processing web requests, and sending the
internet. demanded document to the client.

Examples of web browsers include

Example Google Chrome, Internet explorer, Apache Server is an example of a web server.
Mozilla Firefox, etc.

Web 2.0
Web 2.0, a second advanced generation of WWW, is about revolutionizing the way of creating,
editing, and sharing user generated content online.
Web 2.0 is one of the series of improved technology rather than a specific version of web. It is
characterized specifically as a transition from Static web pages to highly Dynamic web pages or
user generated content.

Features of Web 2.0

● Web 2.0 uses the approach of “guide on the Side” rather than implementing “top-down”
approach i.e dynamically change or edit the content rather then simply reading.
● It changed the concept of “mostly read only web” to “widely read and write” over web.
● Web 2.0 provides a perfect platform base for effective user interaction that was not
available before.
● It changed the idea from passive consumption and delivery of content, to actively
participating in creation, sharing, and collaboration.
● It is subjected to be a powerful lure for an Enterprise; that fetch more employees into
accounts at a lower cost for greater participation in projects and idea sharing.

Tools for Web 2.0

Blog: Blogging makes it possible for you to publish your thoughts and spread them out to the
entire world. Nowadays, there are no of blogs available on internet for free blogging. Blogs are a
perfect medium of interactive communication, instead of a library, which earlier web used to be.
Blogs are said to be “cumulative” where user can post as well as comment.
Social Networks: Another powerful tool is Social Networking websites, it enables the desired
network to grow exponentially, by communicating via text, voice, chat, instant messages,
video-conferencing and etc’s.

12
INTERNET AND WEB TECHNOLOGY (Unit-1)

Some of the common Social Media Networks are:

● Facebook
● Linkedin
● Myspace
● Twitter
● Instagram and many more..
Wikis: There are numerous Wikipedia pages that enable everyone who access it, to contribute
and modify content easily. We can call it “iterative” in nature, as one could undo or redo each
other’s work.
Social Book Marking: Social Book marking is an advance way to store, organize, and share
collection of website across the internet. It is used to save the links to website that the user wants
to retain or share.

13
INTERNET AND WEB TECHNOLOGY (Unit-1)

Effective Web Designing

Within just 10-15 seconds a visitor landing on your website can decide whether he/she
should stay there or switch from there. No matter how much complex code you have
written in the backend part of your website if your UI/UX part is not impressive then a
user won’t take interest in other things and will move away from there. Website designing
is subjective where a design can be impressive for one user but the same design might be
ugly for another user and that’s the reason it is one of the most complex and creative jobs
for designers. Web designing is not just about adding content and elements on your
website to make it beautiful, it’s also about how you add everything to make it easy to
use.
There are so many factors behind a poor website design that can leave a bad impression
on a user. Let’s discuss some important factors and tips for effective website design…

1. Have a Purpose and Plan

A user needs a reason to visit an application and that’s why your website should clearly
explain or convey the services or products you are offering to the users. Your website and
each page of it should have a purpose and clear specification that what it does. According
to the goal (entertainment website, e-commerce site, social media, etc.) of your website
make a rough sketch and identify all crucial elements (like navigation, contact
information, call to action, search, footer, buttons, images, layouts) that you need to
include on your website.
Understand your website from users’ points of view and plan according to that.

2. Simplicity

Complexity is scary and in web designing less-is-more approach work more effectively.
Make your website simple and try to display one detail at a time for getting the individual
attention of each part. Most people put everything on the same page whatever they want
on their website, which makes the screen cluttered and users get distracted and confused.
Here are some tips to keep in mind for designing a clean and simple website…
● Don’t overload the information at home page on your website. If there is too much
content or information, keep them on inner pages. Also, make your website consistent
in terms of font-family, font-size, colors, images, headings and other aspects.
● Include white spaces in your design. Give enough padding, margin, space between
sections, paragraphs, and boxes. It highlights the content and makes your website easy
to use.
● Limit the pull-out menus (drop-downs, fold-outs, etc.) and avoid using sidebars,
sliders, accordions, tabs, and carousels which most of the web designers prefer to
include on the website. The user gets distracted and ignores the rest of the useful

14
INTERNET AND WEB TECHNOLOGY (Unit-1)

content on the website. A research Notre Dame University also says that we should
avoid using carousels to draw the users’ attention and increase the number of clicks.

3. Readability

Users should not face difficulty in reading the text on your website so you need to pay
attention to the contrast between your text and its background. A lot of people use a
background image with text over it where the image doesn’t have any overlay and the
text gets blended with the image. You should use some dark overlay over the image and
then the text over that to make your content readable.
The same goes for the colored background, for example, don’t use the dark gray color
background with slightly lighter text over it instead of that use white color text, that will
be more visible and readable. Also, don’t make the font size too small, keep your body
text at least 16pt and take care of whitespaces between elements. Sans Serif typefaces are
much preferable to use on the website.

4. Responsiveness

People use mobile devices for most of their browsing and 50% of web traffic comes from
mobile devices.These all are the reasons that your application should be viewable on
different devices. Text, layout, images all the elements of your website should be
viewable and accessible on different devices for better user experience. Learn to use CSS
grid, media queries, bootstrap frameworks to make your application responsive or
mobile-friendly.

5. Simple Navigation

Visitors will definitely move away from your website if they won’t be able to find out the
things they are looking for and that’s the reason paying attention to the navigation of your
website is extremely important. Navigation organizes your complete website and guides a
user to move around your application. The navigation menu should be on the top and
sticky on your website so if a user scrolls down the webpage they can still find and access
the menu on your website. Below are some tips to make easy to navigate application…

● Use “three click rule” in your application that allow users to get all the information
they need in 3 clicks.
● More items in the menus confuse the visitors so try to list the items less than 7 also try
to avoid dropdown menus, it becomes difficult for search engines to crawl drop-down
menus.

15
INTERNET AND WEB TECHNOLOGY (Unit-1)

● Brand logo of your website should redirect to a user on homepage.

● You can include some important menu (For example terms of use/FAQ/contact/blog
etc.), a shortened version of your menu or social icons in your footer.

6. Call To Action

It’s very important in your website to have a clear call to action button or form that
indicates the next step or action user should take on a page to accomplish the task. For
example, buy now, sign up, contact form, subscription, registration form, social media
button, etc. CTA provides some sort of direction to the user once he/she knows the
purpose of the website. Without CTA user won’t be able to find that whether he/she needs
to purchase a product, do some kind of registration or take a subscription and the user
may leave the website without completing the final task. It’s good if you keep your CTA
above the fold so the visitor can find it right in front of them.

7. Load Speed

People are very impatient and they are not going to wait for too long if your website
speed is slow. Most of the user moves away from the website within just 5 seconds if they
id doesn’t load fast. Size of images or videos makes a big impact on website speed so try
to compress the image before you add it there. Also, combine code into a central CSS or
JavaScript file to reduce the HTTP requests. Minify HTML, CSS, JavaScript
(compressed to speed up their load time). Limit the large items on your website and
choose the right host.

8. Prioritize Scrolling

We have already mentioned that you should avoid sliders or accordions to present a lot of
information on the website. The best way to present more content and fit that into your
website is by using the scrollbar. It has been found in one of the studies that conversion
rates increase by up to 30% when you add scrolling feature in your webpage.

9. Pick Up The Right Images

A picture says a lot about a website and choosing the right image for your website can get
a lot of visitors. We highly recommend you to use high-quality optimized speed which
doesn’t affect your website speed. You can take the images from professionals or from
photo stock that provide high-quality images with a natural look. Your image should

16
INTERNET AND WEB TECHNOLOGY (Unit-1)

clearly speak the type of message you want your user to understand. Adding photos of
people can increase the conversion rates of your website.

10. Color Palette

The color of your website should match the brand of your website. Choosing the right
color to represent your brand is very important. You also need to take care of contrast
while choosing the color. When you are choosing colors for your website it should go
well with each other also your text should be clear and readable. Your choice of color
should not clash with each other for example don’t use purple and red color next to each
other, it will make your site ugly. Use a single color for the main element (primary),
highlights (secondary) and other less-important elements (background). You also need to
keep in mind that your primary, secondary, and background colors should be consistent
throughout your entire site. Vibrant colors create emotion so it should be used sparingly
(e.g. for buttons and call to actions).

17
INTERNET AND WEB TECHNOLOGY (Unit-1)

Web Site Design Issues:

Bandwidth and Cache
● According to available bandwidth and connection speeds, user will be able to
view your web site.
● You have to consider such physical constraints while website designing.
● Heavy graphics loaded page may take more time to load at low bandwidth users.
● Keep graphics less than 30 kilobytes to make them download reasonably on a
home modem. Keep animated gifs to a minimum.
● The site home page should load in < 15‐20 seconds with a 28k modem. Hence,
the size of all files on the home page should be <60k
Display Resolution:
● Display resolution always affect in visualization of web site.
● While designing web site, you have to consider possible display resolutions of
your expected users client.
● Display resolution is measured in terms of pixels. 800 X 600 and 1024 X 786 are
common resolutions.
● Use relative size to page layout if possible to manage flexible width and height of
your pages.
● To make flexible design using HTML layout, divide page into no. of columns,
where you can set certain columns with variable width.

Look and Feel:

● Look and feel of the web site decide the overall appearance of the website. It
includes all the design aspects such as website theme, web typography, graphics,
visual structure, navigation etc.
● Website Theme
● Website theme emphasizes on the unification of design that should be reflected in
each element of the design such that all pages of website hold together and give
the impression of a single unit.
● Website theme should reflect the objective of the organization and convey the
message of it.
● Use logo of the company as theme. Use logo on each page at appropriate location.

18
INTERNET AND WEB TECHNOLOGY (Unit-1)

● Use appropriate color and graphics to create theme which suites company’s
domain. Font, Graphics and colors
● On paper, we are all used to reading serif fonts and Times New Roman.
● On screens, however, sans‐serif fonts are easier to read.
● The most readable screen font is Verdana, Century Gothic, Tahoma and Arial.
● Be careful with the choice of font. Some font might not viewed the same in other
browser.
● Choose simple colors that compliment each other & work on most web browsers.
● Keep graphics less than 30 kilobytes to make them download reasonably on a
home modem.

Make your site easy to navigate:

● The visitor should be able to get to any page or link in minimum num of clicks
(ideally within 3 mouse clicks) from the home page.
● The visitor should always know what site he/she is on.
● Lead your visitors in the right direction.
● Keep scrolling down to a minimum by keeping individual Web pages short.
● Always have links back to your home or major sections.

19