INTERNET & WEB TECHNOLOGY

(CS-504(A))
 Introduction Of Internet & Web Technology
▪ Internet is a global network of networks, billions of
computers & networks are connected.
▪ Network: Multiple Computers or multiple devices are
connected to form a network.
▪ WWW (World Wide Web) is collection of information
which is accessed with the help of internet.
▪ WWW is a set of electronic documents (Html pages)
stored on computers that are connected over the internet.
▪ These html pages (electronic documents) are made
available by HTTP(Hyper Text Transfer Protocol)
• We learn in detail:
HTTP
Web browsers
Web servers
Concepts of Web Design
HTML
CSS
XML
PHP
MY SQL
Website: Collection Of web pages.
 .
UNIT-I
Topics Include:
• Introduction:
• Concept of WWW, Internet and WWW.
• HTTP Protocol : Request and Response.
• Web browser and Web Servers. Features of Web 2.0
• Web Design:
• Concepts of effective web design, Web design issues including
Browser, Bandwidth and Cache, Display resolution, Look and
Feel of the Website, Page Layout and linking, User centric
design, Sitemap, Planning and publishing website, Designing
effective navigation
 INTERNET

▪ Internet is a global network of networks.

▪ It is a global system that consists of millions of public,
private, academic, business & government network.
▪ It connects millions of computers together globally,
forming a network in which any computer can
communicate with any other computer as long as they are
both connected to the internet.
▪ Internet is a global system of interconnected computer
networks that use the standard Internet protocol
suite(TCP/IP) to serve billions of users worldwide.
 Use Of Internet
• Electronic Mail.
• Job Search.
• Social Networking.
• Collaboration.
• E-commerce.
• Cashless Transaction.
• Online banking & trading.
• Education.
• File Transfer, Entertainment etc.
 Concept Of WWW
▪ WWW stands for World Wide Web.
▪ WWW is a collection of information which is accessed
with the help of internet.
▪ WWW is collection of text pages, digital photographs,
music files, videos & animations you can access over
the internet.
▪ WWW is a system of Internet servers that supports
specially formatted documents(web pages).
▪ These documents are formatted in a markup language
called HTML(Hyper Text Markup language) that
supports links to other documents as well as graphics,
audio & video files.
▪ Users access the WWW facilities with the help of web
browsers, which provides transparent access to the WWW
server.
▪ WWW is an information sharing model that is built on top
of the internet.
▪ WWW uses HTTP(Hyper Text Transfer Protocol) to
transmit data(web pages).
▪ It is the part of the internet that is available to the public.
▪ If a site has WWW in the address, it is a public site on the
world wide web.
 Difference between Internet & WWW
Internet WWW
Internet is the global data WWW is a repository of common
communication system. resources that can be accessed by
Internet.

Internet is a global network of WWW is a collection of

networks. Information.

Internet is not the web Web is a portion of the internet.

Internet can also be used for email, Web is one of the way that uses
instant message, FTP internet for information
interchange(web pages)
 Web Browser & Web Server
▪ Web server & Web browser are the terms which are
commonly used for websites.
▪ With the help of these users can anytime access any
kind of website.
▪ Both perform different type of functions.
▪ Web server can be used to store any web page or any
company website. Web browser is used to access this
websites.
Web Browser
▪ Web Browser: A web browser is the program you use to
view web pages & navigate the world wide web.
▪ It is a client/program/software tool through which we can
sent HTTP request to web server.
▪ Main purpose of web browser is to locate the content on the
WWW & display in the form of webpage , image, audio or
video on client computer.
▪ It is called as client because it contacts the web server for
desired information & if the requested data is available in
the web server then it will send back the requested
information to web browser
▪ Web browser are capable to understand the HTML,
JavaScript, AJAX etc.
▪ Web browsers for mobile are called as microbrowsers.
 Purpose Of Web Browser
▪ Web Browser is used to connect the web servers, request
documents & then properly format & display these
documents.
▪ Web browser can also display files on your computer, &
also download files that are not meant to be displayed.
▪ Web Page is a file written in a language called the Hypertext
Markup Language(HTML) that includes-
-the text of the page.
-a description of its structure.
-Links to other documents.
-images,videos.
▪ Large variety of web browsers are available for every
computer platform like
Microsoft Internet Explorer: Windows OS
Safari-Mac OS X
Mozilla Firefox, Netscap Navigator & Opera are
available for free.
 Types Of Web Browser
Browser Developer Release Date
Netscape AOL 15/12/1994
Internet Explorer Microsoft Corporation 1995
Opera Opera Software 1995
Firefox(Mozilla) Mozilla Corporation 2002
Safari Apple 2003
Maxthon Maxthon International 2005
Google Chrome Google 2008
 Web Server
▪ To publish documents/web pages on the web, web server is
required.
▪ A web server is a program that runs on a computer & is
responsible for replying to web browser requests for
files/web pages.
▪ When we use a web browser to request page on a website,
that browser makes a web connection to a server of that
website using the HTTP protocol.
▪ The server accepts the connection, sends the contents of the
requested files & then closes the connection.
▪ Then browser formats the information it got from the server.
▪ Example of Web servers are: NCSA, Apache,
Microsoft Netscape.
▪ Main function of server is to store, process & deliver
web pages to client.
Interaction between Web browser& Web server
▪ Step1: The user on the client computer type a URL.(Let
[Link]/index) on browser.
▪ Step2: The web browser obtains the IP address corresponding to
the DNS included in the URL with the help of DNS server.
▪ Step 3:Using the IP address , browser makes a TCP connection
with server.
▪ Step 4: Web browser sends a request for the web page to the web
server using HTTP protocol & GET instruction.
▪ Step 5: The web server locates the web page associated with the
URL on its harddisk with the help of operating system & sends it
to the web browser with the help of HTTP protocol.
▪ Step 6: The web browser accepts the webpage,interprets it &
display the contents.
 URL
▪ URL is the abbreviation of Uniform Resource Locator.
▪ It is the resource address on the internet.
▪ The URL (Uniform Resource Locator) is created by Tim
Berners-Lee and the Internet Engineering working group in
1994.
▪ URL is the character string (address) which is used to access data
from the internet. The URL is the type of URI (Uniform
Resource Identifier).
A URL contains the following information which is listed
below:
▪ Protocol name
▪ A colon followed by double forward-slash (://)
▪ Hostname (domain name) or IP address
▪ A colon followed by port number
▪ Path of the file.
▪ Syntax of URL:
▪ protocol://hostname/filename
▪ Protocol: A protocol is the standard set of rules that are
used to allow electronic devices to communicate with each
other.
Hostname: It describes the name of the server on the
network.
Filename: It describes the pathname to the file on the
server
 HTTP

▪ HTTP is Hyper Text Transfer Protocol.

▪ HTTP is a protocol which allows the fetching of
resources, such as HTML documents.
▪ It is the foundation of any data exchange on the
web.
▪ It is the client -server protocol which means
request are initiated by the recipient usually the
web browser.
 HTTP Concept
▪ The messages sent by client, usually a web browser,
are called requests & the message & the messages
sent by the server as an answer are called responses.
• “HTTP clients(internet browsers) use TCP/IP or UDP
networking protocol with HTTP to provide us the
greatness & Usefulness of WWW.”
Question
• Why we need TCP/IP or UDP with HTTP?
HTTP only defines rules for communication between
server & client(internet browser).
 HTTP transaction life cycle
▪ When you use internet browser to request
[Link]
▪ Browser uses TCP/IP protocol to connect with
[Link].
▪ Browser sends HTTP request to the server.
▪ Server receives HTTP request & interpret.
▪ Server respond with HTTP response.
▪ Browser receives HTTP & interpret.
 HTTP:Request & Response
• Message which is transmitted between Web server& Web
browser is of two types:
(i) Request Message: Whenever you enter a URL in the address
bar of the browser, the browser translates the URL into a
request message according to the specified protocol(http)&
sends request message to the server.
(ii) Message related information send to http protocol which is
stored in Body part.
▪ Request message consist of :
▪ Request line: It consist of three parts:
1. Request type
2. URL
3. Http version
▪ Request type(method): It indicates the type of request
a client wants to send.
▪ Request line is used to retrieve data from the server.
This command tells the server to do specific task.
• Request type: GET
• URL: [Link]
• Http version:1.1
• Header line : Host & file format.
• Browser support only gif & jiff file format.
 HTTP Request Command/ Methods
HTTP command Description

GET When client wants to retrieve a resource(web page)

from the server.
HEAD Request to read the header of a web page but not the
content.
PUT Request the server to store the web page.

POST Similar to PUT but it is used for updating the web

page.
Delete Request to remove a web page from the server.
LINK It is used to create a link or links from one document
to another.
ULINk It is used to remove a link or links created by link
method.
HTTP Response Message Format
Status code

Header

Empty Line

Body
• Status Code: These are response codes given by
webserver & help to identify the cause of problems.
• Status code

2XX It indicates that the client request are received &

(200) successfully processed.

3XX This states that the additional action must be taken

by the client to complete the client request
4XX Client Error(write incorrect URL)

5XX Server Error(Client request to web page & web

page can not be found)
• Example of Response Message:
HTTP/1.1/200 ok
Date: Tue,31.5.21 15:58:10, GMT
Server: [Link]
Content length:3000
------
Actual Data for the image(html code)
 Features of HTTP

1. HTTP is connectionless
▪ Browser(HTTP client) initiates an a HTTP request & after a
request is made, the client waits for the response from the
server.
▪ The server processes the requests & sends a response.
▪ After getting response client disconnect the connection
▪ No connection remain establish forever between client &
server.
▪ For every new request a new connection establish between
them
2. HTTP is media independent:
▪ Any type of data can be sent by HTTP like audio, video,images etc.
▪ It may be html file, css file, JPG file,JS file, data.

3. HTTP is Stateless:
▪ Client & server knows each other during current request & response
only, after that they forget each other.
▪ Neither client(web browser) nor server can store information between
different requests across the web page.
▪ If any web page contains text, sound, image than HTTP request send
individually, TCP connection between client & server established for
every page.
▪ Retrieving a webpage contain many graphical elements is very slow.
 Features Of WEB 2.0
▪ Web 2.0 is a new/second generation of websites(WWW) that are
supposed to let people, collaborate & share information online in ways
that were not possible before.
▪ Web 2.0 is an incremental version number of web 1.0
▪ With Web 1.0, most websites consisted of static html pages.
▪ Following are the features of Web 2.0
1. Dynamic & Highly Interactive websites:
▪ But with web 2.0 websites are not only dynamic, but also highly
interactive.
▪ Interactivity of web 2.0 websites is made possible by
AJAX(Asynchronous Java script & XML) programming language.
▪ AJAX makes it possible for the web browser to connect to the webserver
& downloads small amounts of information in the background.
▪ This method download only the parts of a webpage that
change as a result of user interaction.
▪ In this case entire web page does not have to be reloaded each
time a change is made, resulting in a more responsive website
& more interactive experience for the person visiting the
website.
2. Blogs:
▪ These allows users to post thoughts, knowledge & updates
their life on the web.
3. Social Networking:
Users can easily share information with each other. Sites like
Facebook allows users to build & customize their own profile &
communicate with friends.
4. Network as Platform:
▪ User can deliver information & applications entirely through a
web browser.
▪ Examples: Google docs & spread sheets, a service provided by
Google allows user to create word processing documents &
spreadsheets online.

5. User Participation:
In web 1.0 the contents are only provided by the website owner or
company, but in web 2.0 the users participate in content
sourcing(called as crowd sourcing).
Examples: Wikipedia & Youtube.
6. Rich user Experience:
▪ Web1.0 are built with HTML & CSS CGI & had been offered as
a static page but web 2.0 use AJAX, presenting a dynamic, rich
user experience to users.
▪ Some of the most interactive websites online are the map
services example Google maps, yahoo maps & Google suggests.
▪ Web 2.0 Websites have become much more dynamic &
interconnected producing “online communities” & making it
even easier to share information on the web.
 WEB Design
▪ Web design is the process of creating websites.
▪ Websites: A website is a group of web
pages(Index/Home, About us, Contact us)
▪ Websites works with a following thing:
➢ Assigned with a domain name([Link])
➢ Hostedonan internet server(Bluehost,Godaddy,Bigrock,Hostgator)
➢ Interlinked with each other through navigation(Menu/Hyperlinks)
➢ Which contains images, videos, text, buttons, banners,forms &
functions.
 Concept of Effective Web design
1. Purpose.
2. Communication.
3. Typefaces
4. Colours.
5. Image.
6. Navigation.
7. Grid Based Layout.
8. Load Time.
9. E-Pattern design
10. Mobile Friendly.
 Web Design Issues
▪ Responsive website design is not only about good images,
attractive layouts & templates, but we also have to consider its
accessibility & the user experience.
▪ Here are some common issues that designers faced during website
design & web development.
1. Browser:
▪ As we know that webpages are written using different HTML tags
& Viewed in browser window.
▪ There are large variety of browsers are available & all browsers
are interpret same HTML Tag in a different way.
▪ The support for different tags also varies across the different
browsers & their versions.
▪ Different versions of HTML also support different set of Tags.
▪ Some browser may work slightly different on different operating
system & hardware platform. So to make a web page portable we
have to test it on different web browsers on different operating
systems.
2. Bandwidth & cache:
▪ Bandwidth & cache plays an important role when we want to
access webpage of any website. So bandwidth & cache plays an
important role.
3. Display Resolution:

▪ It is another important factor affecting the web page design .

▪ Most monitors are using resolution of 1024*786 pixels old
monitors are working on 800*600.
▪ Considering the different resolutions we have following choices
for web design-
(i)Design a webpage with fixed resolution.
(ii)Make a flexible design using Html table to fit into different
resolution.
Webpage is divided into 3 columns with the middle column having a
variable width. Depending on the resolution of monitor on which
page it is viewed, it change its width.
As today people used to browser website on their Tablets & Mobiles.
If you design website for a higher resolution, some low resolution
screen like mobile phones & tablets may not be able to display all the
contents.
• So, it is important to consider how you website will be appeared
& accessed from mobile devices & start designing according to
it.

4. Look& Feel:
▪ It decides the overall appearance of the website.
▪ It includes all the design aspects such as
▪ Website themes
▪ Website typography(fonts)
▪ Graphics
▪ Visual Structure
▪ Navigation etc.
▪ Website theme emphasizes on the unification of design that
should be reflected in each element of the design, such that all
pages of the website hold together & give the impression of a
single unit.
▪ Different fonts have different readability some fonts are good to
continuous reading while others for advertisements etc.
▪ During web page designing consistency should be maintained in
using font type & size.
▪ Use of CSS helps in maintaining Consistency.
▪ We should also consider the availability of fonts on visitor’s
machine, If the font in webpage is not installed on visitor’s
machine browser should use default font i.e. Times New Roman.
5. Page Layout & Linking:
▪ Page layout defines the visual structure of page.
▪ Page layout distribute the content in such a way that it can be
easily searched & read.
▪ Page layout divides the page area into different parts to present
the information of varying importance.
▪ PageLayout Consist of:
(i) Header: Top section of web page which display the site
logo, name, main menu etc.
(ii) Sidebar(left/right): The columns on either side of the main
content section. It contains Secondary menus, pictures etc.
The items in a sidebar are not edited directly.
(iii) Main Content: In this section we can insert & manage
content. This section is mainly in the middle of the page.
(iv) Footer: Bottom section of webpage which is mainly used to
display copyright of website.
Linking:
▪ Webpage contains of individual webpages that are linked
together using various navigational links.
▪ Webpage Viewed on a computer screen can be divided into 5
major areas such as center, top, right & left.
[Link] Centric Design:
▪ It is very difficult for any web designer to predict the exact
behaviour of the websites users.
▪ But idea of general behaviour of common user helps in design
of the website user centric.
▪ Users either scan the information on the webpage to find the
section of their interest or read the information to get details.
▪ If the information is provided for reading like article on an
online magazine or newspaper site, people normally read
fro9m left to right & top to bottom.
▪ Providing the table of contents for articles or tutorials helps
users in quickly accessing the desired part of tutorial.
▪ When user once visited the link in table of contents then
change its colours, so the user get an idea of which links have
been visited & which are yet to be visited.
7. SiteMap: It defines the list of pages in the website.
• It becomes difficult for a visitor to quickly move from one part
to another if websites contains large number of sections & each
sections contains many pages.
• It may happen that the user selects a particular section & pages
in that section & user gets confused about where he/she is &
where to go from there.
• To solve this problem, keep hierarchy of information to few
levels or provide the navigation bar on each page to jump
directly to a particular section.
• Another solution to provide the sitemap including links to each
section & their pages directly.
• Sitemap gives the organisation of contents of a website
graphically.
8. Planning & Publishing the Website:
Before launching a website, the planning process is important to
ensuring everything goes correct.
There are 7 steps that should be followed from start to finish when
developing a website which are as follows:
▪ Research & Goal Setting.
▪ Planning
▪ Designing the layout
▪ Writing the Content
▪ Coding
▪ Testing & launching
▪ Maintenance.