Introduction to Web
ec
ee
CHAPTER _ Technology
TEL ts
‘Web Essentials : Cents, Servers and Communication,
7 ‘Tho Intomat, Basic Ine web, HTTP
Request Message, HTTP Response Message, Web Gents, Web —_ ee
MLS : Fundamental syntax and semantics, Tats, its, ago, HTMLS contol elements, Somanc amen, Ora.
(6883 : Inline, embedded and external style sheets - Rule cascading, Inhetance, Backgrounds, Bore Images, coy
Shadows, Text, Transformations, Transitions, Animation, Basics of Bootstrap.
1.1 Glient- Sener Communication.
4.2 The Intemet enone
1.21. Features ofthe Interct.
1.3. Basic Intemet Protocal.
4.9.4 Featues of HTTP protec.
4.32 HTTP flow...
1.93 HTTP Messages.
14 World Wide Web...
1.4.1 Types of WebSite sor
142 Siac Vs. Dynamic Web Stes
15 Web Clients
1.6 Web Serer
41.6.1 Role o! web serversin web hosting
1.62 Features of web sere.
4.0:3 How Web servers Werk? nm
4.64. Webbrowser Vs. Web servers.
17 HTML.
1.7 Features of HTMALS
1.72 Dilerence between HTML a
4.7.3, Syrtaxof HTMLS Document
A. HIVLS Elements
475/HTMLS ates
176 HIMLS Document
+ 1.8 Formating Text in HTML
4.8.1 Fomating-
nd HTMLS.Intemet Programming (MU - Sem 5 - Comp.)
182 Fons
1.9 Organizing Text in HTML
1.91 Headings...
1.92 Pergph..
1.9.3 Line Breaks
1.9.4 DiVtag...
140 Tables in HTML...
1.10.1 Table Tag with Attributes, TABLE, TR, TH, TD Tags ...
1.10.2. Borders, Cell Spacing, Cel Padding, Width, Align, BgcolorAtibute.
1.10.3. Calspan and Rowspan Atoutes.
111 HTML Ut.
1.12 HTML Image.
1.43 FORMS inHTML.,
TA18.1Ineractie Elements enone
1.13.2 HIML cieldset sand clegend> tag
HTMLS cont ene
1.14.1. Semantic Elements
114.2 Meda Elements
1.14.3 HTMLS New
types:
1.45 HTML Drag and Drop....
e Introduction of CS$
116.1 Advantages of C88...
ite Inserting OSS in an HTML Page
fr nso
14 \eritance...
1.19 Backgrounds.
1.29 Border Images.
121-Colors
C88 Stas toss.
‘22a
Hee Formating
(CSS9 Transiormations...
1284 C3830 Transforms
1 wins Trensitons
1257£88 Animations
9h Basics of Bootstrap
1.27.4 Advantages of Bootstrap,
1.272 Bootstrap Containers
1.27.3. Boolstrap Grid System.
128 Multiple Choice Questions.
+ Chepter End
(New Syllabus wef academic year 21-22) (M5-67) hreiieo Publications..A SACHIN SHAH VentureInternet Programming (MU ~Som§ -Comp.)
eHenee eee
‘Clients
When we alk the word Client, it means to talk of «person ot
an organization using a particular service,
Sint inthe digital world a Client i a computer (Hox)
ie, capable of receiving information or using @ particular
service from he service provides (Server),
Servers
When we talk the word Serves, means person or madam
that serves someting
Similarly in this igitl word a Server is a remote eompuer
which provides information (aa) or scoess to particular
services
«Client-server architecture works when the client computer
—————————————————— Sti ss
sends a resource oF process request to the server over the
‘network connsetion, which is then processed and delivered to
the client. A servet computer can manage seve clients
simultancously, whereas one client can be contested to
several servers a a timeeach providing a different set of
seevices.
+ Clients and servers exchange messages in 9 request-response
‘messaging pattem. Te client sends a request, and th serer
returns a responie, This exchange of messages is an examgle
‘of intecprocess communication. ‘To commonict, the
computers must fave a common language, end they must
follow rules so that both the client andthe server krow what
to expect The language and rules of communication are
defined in a communications pote
(lent
(Wasig. LL: Client-Server Communication
| (New syllabus we academic year 21-22) (M5-57)
Arvaductonto Web Tectrlo).Page (1-8).
How the clients interacts with the servers?
D Step User ens the URL (Uso Resnuce Locsto of
the website or file. The Browser then requests the DNS
(DOMAIN NAME SYSTEM) Serie.
Step 2+ BNS Server lookup fo te ales of the web
sere
> Step: DNS Serve responds wit he Padres ofthe web
secvt
> step 4 Browser sends aver an IITTPATTES request web
‘server's IP (provided by DNS server)
‘Step 5 : Server sends over the necessary files of the website.
Step 6 + Browser then renders the ies al the website is
displayed. Tis tending is done wit he help of DOM
(Document Objet Mal) interpret, SS interpreter and JS
Engine collectively known as the HT o (lost in Time)
Comps.
Example
+ When bank customer accesses onic baking services with
eb teowser (the cient, he citrate a request to the
burk’s web sever. The custome’ ogia credentials may be
sted in database, and the web sever acess the database
servers cles
+ Anapplcation servernterpres te ured data by applying
the tank’ busines lgi, and proves the output to the web
sere. Finally th weberver rus the sult tothe client
vb bromer Fer dla.
‘Advantages of Client-Server model
1. Centralized system with ll data ina single place.
2 Cost efficient! regres Less mitenance cost and. data
recovery is possible
3, The capacity of the Client, and Serves can be changed
separately.
Disadvantages of Client-Server mode!
1. Clients ae prone to viruses, Trojans ad worn if present in
the serie or uploaded into the ser
2, Severe prone to Denial of Service (DOS) atacks.
4. Daa packels may be spoofed or modified duiing
tcannission,
4. Phishing or epturing. login credentials or other Useful
information of the user are common and MITM (Man in the
Middl) stacks are commos.
Téch-Neo Publications..A SACHIN SHAH Venture
", Modile{Internet Programming (MU - Sem 8 - Comp.)
ies
fhe Internet is nothing but @ global system)
of inter-connected networks of computers
that uses the Intemet protocol suite named TCPAP|
(Transmission Control Protocol/Intemet Protocol) to link}
the devices throughout the world. It is a network of
networks which contains various types of networks like
private, public, government, business, and academic from
Hocal to global scope.
The Imereti a global network of tillions of computers and
other electronic devices.
+ With the Intemet, its possible to access almost any
information, communicate with anyone ese in the word, and
do much moe.
The Internet provides a broad range of information resources
and secvioes like the World Wide Web (WWW) application,
telephony, email, sharing of files and connected hypertext
document,
* In 1960, the United States Federal Goverment form a
esearch commission to create robust, faul-olerant
‘communication through computer networks
© The primary form of network called ARPANET was formed
inthe yea of 1980 which provides interconnection between
the regional academic and military networks
‘+ In 1980, the National Science Foundation Network provides
funds to develop new networking technologies as well asthe
integration of various networks.
In 1990 the commercial networks and enterprises got linked
‘which facilitate the transition to modem intsmet and creates,
an effecive growth in network technology as different
generations of personal, mobile and institutional computers
Were connected inthe network.
+ In 1990, the commercial networks and different enterprises
are connected which leads to the beginning of transition to
advanced modem Internet. This. effectively connects the
different computers like petsona, institutional and mi
the network,
‘Internet reshaped and even redefined the previous traditional
communication media like newspaper, ratio, television, ec,
‘+The new Intemet technology is adapted by books and
newspapers. These commuinication media are even reshaped
(introduction to Web Téchnology)...Pag
1-4)
in new concepts lke Blogging, web feeds and online ney,
aggregators, The new fom of peronal interaction py
accelerated through social networking, instant messaging 4
intemet forums.
Seling and buying of goods through Internet (oping
shopping) gives big opportunites to both sriall business,
‘well as major retailers. It also gives 2 big comfor yy
consumes
Different uses of internet are:
1. Soca networking - hat
Email
Saving of information
Getting live updates - news around the world
Virtual classrooms
Online Jobs
Remote access
‘1.2.1 Features of the Internet
L
3.
5.
Accessibility + An Internet isa global secvice and accessile
to all Today, people located in a remote part of an island g
interior of Africa can also use Internet.
Easy to Use : The software, which is used to access te
Inmemet (webs browser), is designed very simple; therefore, t
cam be easily learned and used. Its easy to develop.
Interaction with Other Media : Internet service has a high
degree of interaction with other media. For example, ns
and other magazine, publishing houses have extended thee
bowsiness with the help of internet services,
Low Cost : The development and maintenance cost of
Invert service are comparatively low.
Extension of Existing IT Technology : Ths facilitates the
sharing of 1F technology by multiple users in organizations
Alexbility of Communication : Communication through
inemet is flexible enough, It facilitates communication
through text, voice, and video too, These services. can be
‘niled at both organizational and individual levels.
Security: Internet facility has to bertain extent helped the
seousty system both at the individual and cational level wit!
components such as CCTV camera, ec.
(New Syllabus we.f academic year 21-22) (MS-67)
Tech-Neo Publications... SACHIN SHAH VentureInternet Programming
(uU- Sem 5 Comp.)
+ Protocol i ase of les and regulations to transter data from
cone machine to anther in network or iter,
‘+ From 1990, the Hypetext Transfer Protocol (HTTP) is the
tase of data communication process in the WWW (Wert
Wide Wet),
+ HTTP protocol is used for exchanging or delivering the
hypertext over the network
+ The HTTP is a communication protocol based on TCRAP,
which transfers the information over the Intemet. The
information can be in the form of HTML file, images,
audios, videos, or query resus, te,
«HTTP can use diferent ports for communication, bu usually,
the TCP 80 port is used
‘+ HTTP specification denotes that how the data toe requested
ty web eient wil be formed and delivered to the wes sere,
and after receiving the equest fr the data at web sens,
fw the web servers wll answer tothe request,
+ HTTP i also said to be the requestesponse protocol which
depends on the client-server achitectue where the HTTP
clients are: Web browsers, and the HTTP Servers ae: Wi
1. HTTP Is Connectionless Protocol
4 [a HTTP protocol, afer sending the HTTP request by HTTP
cleat (e.g. a Web bowser), he conection between HTTP
client & HITTP server is disconnected and the HTTP cla!
Walt for HTTP server's response.
4 Theo, after receiving the HTTP client's request the HTTP
secver processes the request and for sending back the
response to the HTTP client, connection is re-established
between the ETTTP client & the HTTP sever.
2. Media independent
+ HTTP protocol can handle any type of data over the Iter
it both the HITTP clint and the HTTP server know how to
handle particular type of data specified by MIME-type
3. HTTP is Stateless Protocol
‘+The connectionless characteristic of HTTP makes the HTTP
‘wastateless protool
(New Syllabus wef academic year 21-22) (MS-67)
‘This mean that he HETTP sever and TTP
tsware of eich other drng the, procesting ofthe curt
IITTP request, and Hat afer processing the cuent HTTP
request bah of he forget about ee ote
‘That's why the IETTP tenor the web brser eat hold
the Information between two atfernt FETE events cross
the web page.
4. HTTP Protocol Is Extensible
* In HTTP 10, HTTP header helps in entendng the HTTP
protocol, where Iteduing the new functions becomes
easier,
+The newer funetlonaliy is added in ETT protocol by 4
simple ogement between the HTTP clint and the CTTP
serve hou new header’ seman,
1.3.2 HTTP flow
“The following steps are caried out to communicate HTTP
client Le. browser wth an HTTP server i. an intermediate proxy
orthe server:
1. Specify URL
4+ Theusernced to specify URL in thei browser
2. Open a TCP connection
+ ‘Then the browser opens a TCP connection othe server using
port $0
+The TCP connection is ued to send one or more request /
response,
+The HTTP clint can eter open a new conteton or reuse
an existing one, or open number of TCP cocetions to the
serves,
3, Send an HTTP message
‘+ After conection is established the clint seods he HTTP
request though this conection (0 the server for geting the
approprite contents
Example, following statement is used to request a web page
index from wor Joophol.com,
GET wwnidoopholecomfindexhtral HTTP.
Read the response sent by the server
After geting the HTTP response sent by sever trough the
connection, the browser renders the cdntnt on the screen
seconding othe data given in HTTP packets and then user
can rea teal.
Tech-Neo Publications..A SACHIN SHAH Venture‘ntemet Programming (MU = Som
Baan, fetlowing semen intone he responce retard
ty ever For above ue
ITP. 2000K
5. Close or reuse the connection for further
requests
+ The HTTP fipelning helps for tending viviout HTTP
reqvess one afer another through a TCP connection
reparless of whether the responses of previouty sent
‘equests are recived completely or not
% Tis iticolt wo implement HTTP Pipelining pecticly to in
HTTP 2 this eames sapeede bythe more robust concept
called as mulling eguss within a frame.
1.5.3 HTTP Messages
‘There awe two types of HTTP messages, requests and
reponse
1. Request Message
Metiod P& Version ofthe protocol
SET) eT
Host cevebpermeniia‘org|
[Accepttanguage: fr 7]
Headers
(ig 13.4
Roques incladesfllowing elements:
+ ADHTTP Reques metod : (eg. GET, POST) spesifis ie
spertion to be arid oat
The URI defines comple path ofthe resource to be fetch
4 The HTTP protocol ein being used.
Optional headers including additional information needed by
he HTTP servers or s body needed by some methods like
Posr,
‘The ft thee elements togeier refered as request lin.
Request line
‘The Requesine sats wih « Requestmctod followed by
the Reques-URIfoloved by the HTTP protocol version. All
these prs are separated bya space character
8: GET indexhtnd HTTPAA
Here, the Reques-naliod is GET, the Reqest-URI is
indectur and the BTTP prac version is HTTP 1
(New Sylabus wief academic year 21-22) (MS.67)
induction to Web Technology
4 Thepateat Reqiest-Line are explained below
(8) Request Method é
fo The Requestmethod specifies the operation wy py
ented on the resource given by Reques-UR,
0 The Requstmetiod sould be writen I Upper
eters an tice sent
© Folin tbl ts all he Request metas which
oped Wy ATPL
Sr] Methods gy esa
No. i —
1. |Get | The GET method is used for fetching the
Information From the serve indicated by
given request URL
Requests with GET method ony retin
dua fom specifi seve and don't apy
any effect onthe data
Same as GET, means used for retieving
data fom specie server, bu i tans
the status-line and the header secon
onl.
Opposite of GET, te POST method
edt send daa tthe serec
The request sing POST meta! leads
the vplonding of da on the reps
For example, sending the cotomer
infomation, Mes, et. using” HTML
fers
tis sed to replace all he coment pr
fesource contents indicated by given
request URE with he uploaded cote
TCs used to deletes all the eanet tpt
resource contents inated by given
request UR,
Us wed to estab apa oe ener
inated by given request URI for
communication puose
{Cis sed to itlstate various options of
communication fo the target reece
inated by given request UR
I is used for tacking purse W
Achieved by performing a message loop
back test though the pth tothe tare
2 | HeaD
5. | DELETE
6. | connect
7. | oPmions
8] TRACE
resouroe,
(b) Reques-URL
© The URIs short form of Uniform Resource Hentife
‘The Reques-URI indicates th requested resource,
Tech-Neo Publications. SACHIN SHAH Venture
Slret Programming (MU~Sems- Comp) Arivoducton Web Tel
‘© Following statement species the mos sed form ofan | o Referer
bi ° TB °
9" agolut€URI Tabs path euthoiy 2 ea
a Note tt the absouttUR is ued wien the HTTP | 2, Response Message
request is made to 8 prox. Status code
Version of
Acti the proxy i requested to forwards tervie or | th potacel suysmestioe
the request from a atid cache, ond then retum the y
response back. AITPrAA)(200)(0n}
‘0 For example + Following statement ithstrales the Dale Sat 08 OH201014.28026MT
Reqoes-URI which indicates spel resource on an Sorver Apache
ide: Tue, 0f Dec 2008 20:8: 226M
1 4abet 1440-47 9b07SbBO Ib
erigin server or gateway specified inthe path,
GST htpe/ywo:ExamplecomWebindex hin! HTTP/L.L
‘b Here a cliont wants to get back @ resource (ie
index! web page) from the serer (ever ofthe site
‘win Example com) directly pie
©The above statement crests @ TCP connection to port
80 of the host “wwwiBxamplecom* to forward the
following statement +The HTTP protocol venion
Responses includes following element:
GET Aebfindes ht HTTP. +A staus cod, ie. sucess or enor code indicaling tat the
Jequest has been sucessful, rol, respectively. If tit also
tells why the enor is occured,
‘The feds of equestcheader ae used to transfer additional | # A status message indicates the shor description of the stamss
inforation about the request and the clint il to the |’ code
am + HTTP headers siirto the headers for requests
Following Ist contains some ingot Requsthade fils | 4 Opional «bay conning he eed resource
(@) Request Header Fields
‘wth oe ted ou deena +The firs three elements together refered as status line
tf Message Status-Line
& dea toerlay + In response, the Siaut-Line fomed by the HTTP protocol
AsepeLanguage
© Athorztion : followed by its asoctd textual phe. All te pus ae
o Expet separ by apace cae,
Fem + Forexampl, HTML 200 0K
Hos 4 Her the ITTP/LL is HTP. Venia, athe Status Cote is
° 1eMach 200 and OK isthe Reson Phase
© ItMotified Since — | + tepars‘f Staten expla below
© TtNone Mach (6) HTTP Version
© TeRange ‘ © Windicses which HTTP proto version is supened
© lamodifiet since by the sever
© Macorvards ©The HTTPYL inde hat he server suppor HTTP
© Pray Autorzaton 1.1 yersion of be protocol
©. Range
(New Syllabus w.e.f academic year 21-22) {MS-67) a Tech-Neo Publications...A SACHIN SHAH Venture
ENTInternet Programming (MU- Sem § - Comp.)
() Status Code
© Ieis.a digit integer value in which only the first digit
‘defines the cls of response and the remaining two
git are nol used for categorization purpose
‘There are Syms for the First digit #8 shown In
°
flowing ble:
- ee
Si
ee mes A
|e Renee oe
1. | tx | Informational:
1 indcter tthe request was receved
svccessfly andthe process is conning.
2 | 2m | Sooces
1 indicates tha the roquest was succeseilly
received denon, and accepted
3. | 3m | Redirection
Irinicates att complete the request arer
action shouldbe followed
4 [asx | cient Error
indicts tht te request is not socesilly
completed dv to the presence of inconet
sym.
5. [sax | Server Error
indicts thatthe serve is fled ofall a
vali request.
© HTTP status-codes can be extended. It is not necessary
for HTTP applications to know the meaning of all
registered status-coes,
(© Response Header Fields
© The fields of response-header are used to send
‘additional informition about the response, which can't
be putin the Status-Line,
© These response-header fields are used 10 give
‘information about the server and further accessibility to
the resource identified by the Request-URI.
© Following list contains some important response-header
fields which are used on demand :
() Accept Ranges Gi) Age
(i Eag Gv) Location
(W) Proxy-Atithentcale (vi) Retry-After
(vi server ii) Vary
(ix) WWW Authentics
(New Syllabus w.e.f academic year 21-22) (M5-67)
+ WWW suns for World Wide Web. The World Wide Web
Sometimes only pronounced simply as Web, is a way. of
Fettieveg infomtion over the Intemet. Ht is model of
{nformatien sharing which I built on top of the Internet,
* HITTP protocol i used by the web to transmit data over the
fidernet, Web service which allows applications to
‘Communist with each other uses HTTP. These applications
communal to exchange business logic and use the web to
share information,
‘A websites made of number of web pages. These web pages
which ae aso known as web documents are interconnected
with each ote with the help of hypetinks, Such web pages
an be acesed using various web browsers like Intemet
Explorer, Fefox, Google chrome et. The web documents
‘can conti imple tet, graphics, audio and videos.
+ Awebsiteis mae of umber of web pages. Simply a website
is. file which i accessible anywhere in the world Websites
‘are usually created for commercial purpose:
+ There ae vatous extensions of websites depending upon
theic pine purpose. Some ofthese areas follows
© .com—Commeriat
© 01g Oxgasiation
© net-Network
© sbin~Bosiness
© edu EBusational
‘* Also thereare extensions depending upon the counties :
© in—Idia
© us Ametia
© sk United Kingdome
(© .mz~New Zealandthrough internet
1.4.1 Types of Website
‘There are two types of website as given below:
Palrech-neo Publications...A SACHIN SHAH Venture1. Sttiewebite
one ofthe basic types of website haf eaay
le siatc west s
create
ns weg ees 0 fr ev never pages
the information ected in the page does ot change
Lp sae nie otis web anes with ied end stable
content
is web pgs 8
infront 8
iuen in har code and shows the same
ChentBrowser
‘Server
aoFlg, 14.1: State Website
Advantages of static websites
Static websites are easier and fst to develop
|, Static websites are low-priced for development.
| sat meses eat os
e Disadvantages of static websites
requires web development
|. For eal m in webs
UF tia ox
} 2. pymanicwenste
| Dynamic website is « group of dynamic web pages. The
content of yumi pages canbe changed frequently.
‘Dynamic websites can accesses the required data from the
database, Whenever changes are made to the database then
‘the content of teste is also gets changed.
(usFig. 1.4.2 : Statie Website
Syllabus wee academic year 21-22) (MS-67)
{trruction to Web Technolo
T= Advantages of dynamtc websites
1. Dynamic websites contains more functional
2, Dynamic websites are easier to update
4. Dytane wan rag el ack 1 10 ee for
not Information,
1] pieadvantages of dynamite wabsites
1. yamiewebstesae slower nd more cost develop
2 Costa ting Is more ax compared to states.
14.2 Statle Vs. Dynamic Web Sites
oy
1. | Ste website Is a set of | Dynamic website is a set of
wee pages whose contents | web pages that as
are slat means it doesnt | dynamically
change dynamically. contents called 0s dynamic
‘The contents are changes | We? FOB:
cnly when developer
updates the web page file
aad send it to the web
senet,
‘These websites are
comparatively dificult %
develop than static websites.
2, | These websites ae easier ©
develop.
Ttrequires web programming
‘and database design t0
(sgn to create a static | develop. Tk uses PHP,
wetsite It simply uses | SERVLET, JSP, ASPNET
EIML, ate,
3.°| 1 does not need any web
programming and database
According to the requests
the responses send by
dynamic websics may be
4. | For each request, State
website sends the same
response
different
To make the website | To make the website
ineractve the static | interactive the dynamic
website uses hyperlinks and | website uses client side
dest use any scripting, | scripting or server side
scripting
6. | Sitic websites ar flexible. | Dynamic websités are not
exible.
‘© Aveb client typically refers o the web browser inthe user's
machine or mobile device,
Tech-Neo Publications...A SACHIN SHAH VentureInternet Programming (MU -Sem
"A web cet san appliestion tat communicates witha web
serve, sing Hypertent Trrfer Protocol (HTTP)
aA web cient contains two pats: dynamic web pages andthe
‘yeb browser, Dynamic web pages. are produced by
components tht ran in te web Hn, and a web browser
delves web pages recived fom the server
4 Avwebetint is alo knowns thin lent because i des not
execute heary-duty operation: soch a8 querying dalahass,
performing complex business tsk, or connecting to legacy
applications,
‘©The web browser asks for data from the website, which
happens when the user clicks on a particular Tink or cick to
, audio> and elements were added,
‘+ Ihasalso support for sealable vector grapes (SVG) coment
and MaliML for matherstial for.
+ To emch the semantic content of documents, new page
strostore elements such as , csecton>, ,
header,