CCS375 – Web Technologies

Dr. F. R. Shiny Malar

Professor & Head
Department of CSE
1
 UNIT I - WEBSITE BASICS, HTML 5, CSS 3,
WEB 2.0
Web Essentials:
Clients, Servers and Communication – The
Internet – Basic Internet protocols – World wide web –
HTTP Request Message – HTTP Response Message –
Web Clients – Web Servers – HTML5 – Tables – Lists
– Image – HTML5 control elements – Semantic
elements – Drag and Drop – Audio – Video controls -
CSS3 – Inline, embedded and external style sheets –
Rule cascading – Inheritance – Backgrounds – Border
Images – Colors – Shadows – Text – Transformations
– Transitions – Animations.
2
 WEB ESSENTIALS

Server:

The software that distributes the information and the

machine where the information and software reside is
called the server.
Provides requested service to client
e.g., Web server sends requested Web page

3
 Contd…

Client:
 The software that resides on the remote
machine, communicates with the server, fetches
the information, processes it, and then displays it
on the remote machine is called the client.
Initiates contact with server.
Typically requests service from server.
Web: client implemented in browser
4
 Contd…
Web server:
Software that delivers Web pages and other documents to
browsers using the HTTP protocol.
Web Page:
A web page is a document or resource of information that is
suitable for the World Wide Web and can be accessed through a
web browser.
Website:
A collection of pages on the World Wide Web that is accessible
from the same URL and typically residing on the same server.
URL:
Uniform Resource Locator, the unique address which
identifies a resource on the Internet for routing purposes.
5
 Clients, Servers and Communication
The Client-server model is a distributed application
structure that partitions tasks or workloads between
the providers of a resource or service, called servers,
and service requesters called clients.
 In the client-server architecture, when the client
computer sends a request for data to the server
through the internet, the server accepts the requested
process and delivers the data packets requested back to
the client.
Clients do not share any of their resources.
Examples of the Client-Server Model are Email,
World Wide Web, etc.
6
How Does the Client-Server Model Work?

7
 The Internet – World wide web
Introduction :
The internet is a global network of interconnected
computers and servers.
that allows people to communicate, share
information, and access resources from anywhere in
the world.
It was created in the 1960s by the US Department of
Defense as a way to connect computers and share
information between researchers and scientists.

8
 Contd…

The World Wide Web, or simply the web, is a system

of interconnected documents and resources, linked
together by hyperlinks and URLs.
It was created by Tim Berners-Lee in 1989 as a way
for scientists to share information more easily.
The web quickly grew to become the most popular
way to access information on the internet.

9
 Contd…

The Internet:
In simplest terms, the Internet is a global network
comprised of smaller networks that are interconnected
using standardized communication protocols.
The Internet standards describe a framework known
as the Internet protocol suite.
This model divides methods into a layered system of
protocols.

10
 Contd…
These layers are as follows:
Application layer (highest) – concerned with the
data(URL, type, etc.). This is where HTTP, HTTPS, etc.,
Transport layer – responsible for end-to-end
communication over a network.
Network layer – provides data route.
The Internet provides a variety of information and
communication facilities; contains databases, email,
hypertext, etc.
It consists of private, public, academic, business, and
government networks of local to global scope, linked by a
broad array of electronic, wireless, and optical networking
technologies.
11
 Contd…
The World Wide Web:
The Web is a major means of access information on
the Internet.
It’s a system of Internet servers that support
specially formatted documents.
The documents are formatted in a markup language
called HTML, or “HyperText Markup Language”,
which supports a number of features including links
and multimedia.
These documents are interlinked using hypertext
links and are accessible via the Internet.
12
 Contd…
To link hypertext to the Internet,
Need:
The markup language, i.e., HTML.
The transfer protocol, e.g., HTTP.
Uniform Resource Locator (URL), the address of
the resource.
To access the Web using Web browsers.

13
 Contd…
Internet Web
The Internet is the network of networks and the
network allows to exchange of data between two
The Web is a way to access information
or more
computers. through the Internet.

The Web is a model for sharing information

It is also known as the Network of Networks.
using the Internet.

The Internet is a way of transporting

The protocol used by the web is HTTP.
information between devices.

Accessible in a variety of ways. The Web is accessed by the Web Browser.

Accesses documents and online sites

Network protocols are used to transport data.
through browsers.

14
 Contd…
Internet Web

Global network of networks Collection of interconnected websites

Access Can be accessed using various devices Accessed through a web browser

Connectivity Allows users to access and view

Connectivity Network of networks that allows
web pages, multimedia content, and other
devices to communicate and exchange data
resources over the Internet

Protocols TCP/IP, FTP, SMTP, POP3, etc. Protocols HTTP, HTTPS, FTP, SMTP, etc.

Infrastructure Consists of routers, switches, servers, and Infrastructure Consists of web servers, web browsers,
other networking hardware and other software and hardware

15
 Contd…
URI:
URI stands for ‘Uniform Resource Identifier’.
A URI can be a name, locator, or both for an online resource
whereas a URL is just the locator.
URLs are a subset of URIs.
 A URL is a human-readable text that was designed to replace the
numbers (IP addresses) that computers use to communicate with
servers.
A URL consists of a protocol, domain name, and path (which
includes the specific subfolder structure where a page is located) like-
protocol://WebSiteName.topLevelDomain/path
Protocol – HTTP or HTTPS.
Web Site Name – geeksforgeeks, google etc.
Top Level Domain- .com, .edu, .in etc.
path- specific folders and/or subfolders that are on a given
website.
16
 HTTP
HTTP stands for Hyper Text Transfer Protocol.
It is the main way web browsers and servers
communicate to share information on the internet.
Tim Berner invents it.
Hyper Text is the type of text that is specially coded
with the help of some standard coding language
called Hyper Text Markup Language (HTML).
HTTP/2 is the new version of HTTP.
HTTP/3 is the latest version of HTTP, which is
published in 2022.
17
 Contd…
What is Hyper Text?
The protocol used to transfer hypertext between two
computers is known as Hyper Text Transfer Protocol.
 HTTP provides a standard between a web browser
and a web server to establish communication.
It is a set of rules for transferring data from one
computer to another.
Data such as text, images, and other multimedia files
are shared on the World Wide Web.

18
 Contd…
Working of HTTP [Hyper Text Transfer Protocol]
First whenever to open any website we first open a
web browser after that type the URL of that website
(e.g., www.facebook.com ).
This URL is now sent to the Domain Name Server
(DNS).
Then DNS first checks records for this URL in their
database, and then DNS will return the IP address to
the web browser corresponding to this URL.

19
 Contd…
Now the browser is able to send requests to the actual server.
After the server sends data to the client, the connection will be
closed.
If we want something else from the server should have to re-
establish the connection between the client and the server.

20
 Contd…
HTTP Message:
 HTTP message is the information transaction
between the client and server.
Two types of HTTP Message:
 Request- Client to server
Responses - Server to client

21
 HTTP Request Message
HTTP request is simply termed as the information or
data that is needed by Internet browsers for loading a
website.
This is simply known as HTTP Request.
There is some common information that is generally
present in all HTTP requests.
These are mentioned below.
HTTP Method
Request URI
HTTP Version
HTTP Request Header Name & Value
HTTP Body 22
 Contd…

Request Message Syntax:

An HTTP request message has the following syntax:

<Method> <Request-URI> <HTTP-Version>

<Header-Name>: <Header-Value>
...
<Header-Name>: <Header-Value>

<Optional-Body>

23
 Contd…
 HTTP Method - The HTTP method indicating the
action to be performed.
 GET - to simply retrieve data from the server.
 PUT - PUT method is used to completely replace a
resource identified with a given URL.
 POST - sends data to the server for processing.
 DELETE - After execution, the resource a DELETE
operation points to is removed from the server.
 PATCH - allows for updates of existing resources

24
 Contd…
 HEAD - almost identical to the GET method, but the only
difference is that it will not return any response body.
 OPTIONS - used for describing the communication
preferences for any target resource.
 CONNECT - used for establishing a tunnel to the
server recognized by a given URI.
 TRACE - which tests the path for the target resource. It is
useful for debugging purposes.
 CONNECT - used for establishing a tunnel to the
server recognized by a given URI.

25
 Contd…
Request URI - The resource being requested
(e.g., /index.html).
HTTP Version - The version of HTTP being used
(e.g., HTTP/1.1).
 HTTP Request Header Name & Value - The
name of the header (e.g., Host, User-Agent). & The
value associated with the header.
 HTTP Body - The body of the message, typically
present in POST requests.

26
Contd…

27
 HTTP Response Message
The information sent back from a web server to a
client (like a browser) after processing an HTTP
request.
Response Message Syntax
<HTTP-Version> <Status-Code> <Reason-Phrase>
<Header-Name>: <Header-Value>
...
<Header-Name>: <Header-Value>

<Optional-Body>

28
 Contd…
 HTTP Version - The version of HTTP being used (e.g.,
HTTP/1.1).
 Status-Code: A three-digit code indicating the result of the
request (e.g., 200, 404).
 Reason-Phrase: A brief description of the status code.
 Header-Name and Header-Value: Similar to request
messages.
 Optional-Body: The body of the response, often containing
HTML, JSON, or other data.

29
Contd…

30
 How It Works
Request-Response Cycle
 The communication between a client and a server follows a
request-response cycle:
Client Sends Request:
 The client sends an HTTP request to the server.
Server Processes Request:
 The server receives the request, processes it and prepares an
appropriate response.
Server Sends Response:
 The server sends an HTTP response back to the client, which
includes a status code, headers, and the requested content.
Client Receives Response: The client receives the response and
displays the content (e.g., a webpage) to the user.
31
 Web Clients – Web Servers
For International Network communication, require a
web browser and web servers.
Web browsers and servers play an important role in
establishing the connection.
The client sends requests for web documents or
services.
The message that goes from the web browser to the
web server is known as an HTTP request.
When the web server receives the request, it
searches its stores to find the appropriate page.
32
 Web Clients – Web Servers
If the web server is unable to find the
requested page, it sends a page containing an
error message send to the browser.
(i.e. Error 404 – page not found)
This message received by the web browser by
the server is called the HTTP response.

33
Differences Between Web Clients – Web Servers

34
Differences Between Web Clients – Web Servers

35
Differences Between Web Clients – Web Servers

36
 HTML5
HTML stands for Hyper Text Markup
Language.
It is used to design web pages using a markup
language.
Hypertext defines the link between the web
pages.
The markup language is used to define the text
document within the tag which defines the
structure of web pages.
37
 Contd…
HTML 5 is the fifth and current version of
HTML.
It has improved the markup available for
documents and has introduced application
programming interfaces (API) and Document
Object Model (DOM).

38
 Contd…
Features:
It has introduced new multimedia features which
supports both audio and video controls by using
<audio> and <video> tags.
There are new graphics elements including vector
graphics and tags.
Enrich semantic content by including <header>
<footer>, <article>, <section> and <figure> are
added.
Drag and Drop- The user can grab an object and
drag it further dropping it to a new location.
39
 Contd…
Geo-location services- It helps to locate the
geographical location of a client.
Web storage facility which provides web
application methods to store data on the web
browser.
Uses SQL database to store data offline.
Allows drawing various shapes like triangle,
rectangle, circle, etc.
Capable of handling incorrect syntax.
40
Contd…

41
 Tables
A table is a two dimensional matrix, consisting
of rows and columns.
Tables are intended for displaying data in rows
and columns in a web page.
All table related tags are included between
<TABLE> ………</TABLE>
 <TR>…..</TR> tag is used to define row in a
table.

42
 Contd…
<TD>……</TD> tag is used to define column
in a row.
<TH>……</TH> tag is used to define header
row in a table.
Contents is automatically center and appears
in boldface.
<CAPTION>…….</CAPTION> element
contents (text) is inserted directly above the
table in the browser window.
43
Contd…

44
 Contd…
<TABLE> Tag:
 <TABLE> …… </TABLE> tag shows the
beginning and ending of a table.
Attributes of <TABLE> element are:
ALIGN : Specifies the horizontal alignment of
the table in the browser window. Possible values
are: Left, Right and Center.
VALIGN : Specifies the vertical alignment of
cell contents. Possible values are: Top, Bottom
and Middle.
45
 Contd…
WIDTH : Specifies the width of the table. It
can be given as number of pixels or as
percentage relative to the browser window.
 BORDER: Specifies the border thickness of
the table. Its value can be any number of pixels.
CELLPADDING : Specifies the distance
between the data in a cell and the boundaries of
the cell in pixels.
CELLSPACING : Specifies the spacing
between adjacent cells in pixels.
46
<table ALIGN =“Left” BORDER=“1” CELLPADDING = “5” Contd…
VALIGN = “Top” CELLSPACING = “2” WIDTH = “90%” >
<tr>
<th>Register Number</th>
<th>Name of the Student</th>
<th>Marks</th>
</tr>
<tr>
<td>963522104001</td>
<td>Aakif Akram.A</td>
<td>78</td>
</tr>
<tr>
<td>963522104011</td>
<td>Ajai Kumar.R</td>
<td>89</td>
</tr>
</table>

47
Contd…

48
 Contd…
<TR> Tag:
<TR> ….. </TR> tag is used to create row in the
table.
<TR> ….. </TR> contains <TD> ….. </TD> to define
the columns in the row.
Attributes are:
ALIGN: Specifies the horizontal alignment of the row.
Possible values are Left, Right and Center.
BGCOLOR : Specifies the background color of the row.
Its value can be color name.
VALIGN : Specifies the vertical alignment of the
contents of the row. The possible values are Top,
Middle, or Bottom.
49
Contd…

50
Contd…

51
 Lists
HTML can display different items in the form
of lists.
Lists are used to present in more readable
form.
Different types of lists that are supported by
HTML are:
Ordered Lists.
Unordered Lists.
Definition Lists.
52
 Contd…
Ordered Lists:
An ordered list is a list of items in which each
item is marked with a number in the ascending
order.
Ordered lists are also known as numbered list.
<OL>tag is used to create an ordered list.
</OL>should be at the end of the list.
<LI>tag is used with each of the items in the
list.</LI> tag at the end of an item is optional.
53
 Contd…
Attributes are:
TYPE: Specifies the number scheme for the
list.
The default number scheme is 1, 2, 3, 4, ….
Possible schemes/values are:
1 for 1, 2, 3, 4, …..
A for A, B, C, ……
a for a, b, c, ……..
I for I, II, III, ……
I for I, ii, iii, …….
54
 Contd…
Start: Specifies the starting number of the list.
Value: Changes the numbering sequence in the middle of the list. It is
used in <L1> tag.
<html>
<head>
<title> Order lists example...</title>
</head>
<body>
My Favourite fruits are as follows:
<OL>
<LI> Mango </LI>
<LI> Apple </LI>
<LI> Banana </LI>
</OL>
</body>
</html>

55
Contd…

56
<html>
Contd…
<head>
<title> Order lists example...</title>
</head>
<body>
My Favourite fruits are as follows:
<OL>
<LI> Mango </LI>
<LI> Apple </LI>
<LI> Banana </LI>
</OL>
My Favourite colors are as follows:
<OL TYPE = “i”>
<LI> Green </LI>
<LI> Red </LI>
<LI> Orange</LI>
</OL>
</body>
</html>

57
Unordered Lists:
Contd…
An unordered list is a list in which
each item is marked with a symbol.
Unordered list is also known as unnumbered list.
 <UL> tag is used to create an unordered list. </UL>
should be at the end of the list.
 <LI> tag is used with each of the items in the
unordered
list. </LI> tag at the end of an item is optional.
Attribute is:
TYPE: Specifies the type of the symbol to appear with
each item of the list. Possible values are
FILLROUND, SQUARE, CIRCLE.
The default value is FILLROUND.
58
<html>
Contd…
<head>
<title> Unorder lists example...</title>
</head>
<body>
My Favourite fruits are as follows:
<UL style="list-style-type: Circle">
<LI> Mango </LI>
<LI> Apple </LI>
<LI> Banana </LI>
</UL>
My Favourite colors are as follows:
<UL style="list-style-type: square">
<LI> Green </LI>
<LI> Red </LI>
<LI> Orange</LI>
</UL>
</body>
</html>
59
Contd…

60
 Contd…
Definition Lists
Definition list is a list of terms. It consists of terms and
description of the terms.
 <DL> tag is used to create a definition list and </DL>
is used at the end of the list.
<DT> tag is used with each term in the definition and
</DT> is used at the end of the term.
 <DD> tag is used with each of the description of the
term and </DD> is used at the end of each description.

61
<html>
Contd…
<head>
<title> Definition lists example...</title>
</head>
<body>
some important definitions are as follow.
<DL>
<DT> Data: </DT>
<DD> Raw Fact an Entity</DD>
<DT> Information:</DT>
<DD> Processed form of data</DD>
<DT> DBMS:</DT>
<DD> A repository contains information</DD>
</DL> </Body> </html>
62
Contd…

63
 Images
A web page may contain different types of graphics.
Graphics makes websites more attractive and
interesting.
HTML can be used to add both static and animated
graphics in websites.
The images put into a web page are called inline
images.
The popular types of images used in web pages are
.GIF, .JPG, .PNG, .BMP.

64
 Contd…
 <IMG> tag is used to insert images in web pages.
 <IMG> tag has no ending tag.
Attributes are:
SRC: Specifies the name and path of image to be
displayed. Only name of the image is specified if the
image is stored in the same directory in which web
page is stored, otherwise, complete path of the image
is specified.
ALIGN: Specifies the alignment of the image with
respect to screen.
Possible alignment values are left, right, center.
65
 Contd…
BORDER: Specifies the size of border around the
image in pixels. The possible values are 1, 2, 3, so on. The
default value is 0.
WIDTH : Specifies the width of the image in pixels or
in percentage of the area covered by the browser..
HEIGHT : Specifies the height of the image in pixels or
in percentage of the area covered by the browser.
ALT : Specifies the text to be displayed in tool-tip or if
the browser cannot display the image.
Example :
<IMG SRC = “Pic.jpg” ALIGN = “Right” BORDER = “2”>

66
Contd…

67
 HTML5 Control Elements
HTML Form :
HTML Forms are required to collect different kinds of
user inputs, such as contact details like name, email
address, phone numbers, or details like credit card
information, etc.
Forms contain special elements called controls like input
box, checkboxes, radio-buttons, submit buttons, etc.
Users generally complete a form by modifying its controls
e.g. entering text, selecting items, etc.
and submitting this form to a web server for further
processing.
The <form> tag is used to create an HTML form. 68
 Contd…
Example

<form>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Submit">
</form>

The following section describes different types of controls

that you can use in your form.

69
 Contd…
Input Element
This is the most commonly used element within HTML
forms.
It allows you to specify various types of user input fields,
depending on the type attribute.
An input element can be ,
 text field,
password field,
checkbox,
radio button,
submit button, reset button, file select box, as well as
several new input types introduced in HTML5.
70
 Contd…
Text Fields
Text fields are one line areas that allow the user to input
text.
Single-line text input controls are created using an <input>
element, whose type attribute has a value of text.
Here's an example of a single-line text input used to take
username:
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</form>

71
 Contd…
OUTPUT

72
 Contd…
Password Field
Password fields are similar to text fields.
The only difference is; characters in a password field are
masked,
 i.e. they are shown as asterisks or dots.
This is to prevent someone else from reading the password
on the screen.
This is also a single-line text input controls created using
an <input> element whose type attribute has a value of
password.

73
 Contd…
Example:
<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-
pwd">
</form>

74
 Contd…
Radio Buttons
Radio buttons are used to let the user select exactly one
option from a pre-defined set of options.
It is created using an <input> element whose type attribute
has a value of radio.
Example:
<form>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</form> 75
Contd…

76
 Contd…
Checkboxes
Checkboxes allows the user to select one or more option
from a pre-defined set of options.
It is created using an <input> element whose type attribute
has a value of checkbox.

77
 Contd…
<form>
<input type="checkbox" name="sports" id=" volleyball ">
<label for=" volleyball "> Volleyball </label>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" id=" Tennis >
<label for=“tennis "> Tennis </label>
</form>

78
Contd…

79
 Contd…
File Select box
The file fields allow a user to browse for a local file
and send it as an attachment with the form data.
Web browsers such as Google Chrome and Firefox
render a file select input field with a Browse button
that enables the user to navigate the local hard drive
and select a file.
This is also created using an <input> element,
whose type attribute value is set to file.

80
 Contd…
<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>

81
 Contd…
Text area
Text area is a multiple-line text input control that allows a
user to enter more than one line of text.
Multi-line text input controls are created using an
<textarea> element.
Example
form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address"
id="address"></textarea>
</form>

82
Contd…

83
 Contd…
Select Boxes
A select box is a dropdown list of options.
that allows user to select one or more option from a pull-
down list of options.
Select box is created using the <select> element and
<option> element.
The <option> elements within the <select> element define
each list item.
Example

84
 Contd…
Example
<form>
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
</form>

85
Contd…

86
 Contd…
Submit and Reset Buttons
A submit button is used to send the form data to a
web server.
When submit button is clicked the form data is sent
to the file specified in the form's action attribute to
process the submitted data.
A reset button resets all the forms control to default
values.

87
 Contd…
Example:
<form action="action.php" method="post">
<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-
name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

88
Contd…

89
 Contd…
HTML5 Colors
<!DOCTYPE html> <html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:Blue;">Blue</h1>
<h1 style="background-color:Green;">Green</h1>
<h1 style="background-color:Gray;">Gray</h1>
</body>
</html>
90
Contd…

91