Client and Server Side

Programming
Client Side Scripting: HTML: Elements, Attributes, Head, Body,
Hyperlink, Formatting, Images, Tables, List, Frames, Forms.
CSS3:Syntax, Inclusion, Color, Background, Fonts, Tables,
lists,CSS3 selectors.

1
 Basics
• 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.
• Server
– The software that distributes the information and the
machine
where the information and software reside is called the server.
– With the Internet, it's possible to access almost any information,
communicate with anyone else in the world, and do much more. 2
 Basics
• Web
The World Wide Web (WWW), commonly known as the Web, is
an information system enabling information to be shared over
the
Internet.
• Web page
– A web page or webpage is a document, commonly written
in HTML, that is viewed in an Internet browser.
• Web server
– Software that delivers Web pages and other 3
documents to
 Basics
• Website

– A website (also written as a web site) is a collection of web

pages and related content that is identified by a common
domain name and published on at least one web server.
• URL
– Webpages also have unique addresses to help people locate
them. On the Internet, these addresses are called URLs (Uniform
Resource Locators).

4
 Basics
Web Browser
A web browser is an application for accessing websites. When a user
requests a web page from a particular website, the browser retrieves its
files from a web server and then displays the page on the user's screen.
 Firefox.
 Google Chrome.
 Microsoft Edge.
 Apple Safari.
 Opera.
 Client Server Model
• The Client-Server paradigm is the most prevalent model
for distributed computing protocols.
• It is the basis of all distributed computing paradigms at a higher
level of abstraction.
• It is service-oriented, and employs a request response protocol.
• A server process, running on a server host, provides access
to a
service.

1
Client/Server Structure of the Web
• Web is a collection of files that reside on computers,
called Web servers, that are located all over the
world and are connected to each other through the
Internet.
• When you use your Internet connection to become part
of the Web, your computer becomes a Web client in
a worldwide client/server network.
• A Web browser is the software that you run on your
computer to make it work as a web client

7
 Hypertext Mark-up Language
(HTML)
• The public files on the web servers are ordinary text files, much
like the files used by word-processing software.

• To allow Web browser software to read them, the text must be

formatted according to a generally accepted standard.

• The standard used on the web is Hypertext mark-up

language
(HTML).

• HTML uses codes, or tags, to tell the Web browser

software how to display the text contained in the document 4
6
 HTML - Introduction
• HTML is the skeleton of all web pages.
• It’s often the first language learned by developers,
marketers, and designers and is core to front-end development
work.
• HTML provides structure to the content appearing on
a website, such as images, text, or videos.
• HTML stands for Hyper Text Mark-up Language:
– A mark-up language is a computer language that defines the structure
and presentation of raw text.
– In HTML, the computer can interpret raw text that is wrapped in HTML
elements.
– Hyper Text is text displayed on a computer or device that provides
access to other text through links, also known as hyperlinks.
 HTML - Introduction
• HTML was created by Tim Berners-Lee in 1991.
• The first ever version of HTML was HTML 1.0, but the first
standard version was HTML 2.0, published in 1999.

6
4
 HTML - Structure
• HTML is composed of elements that structure the webpage and
define its content.
• The elements are the building blocks of any HTML page and
are represented by tags.
• Tags are one of the most important part in an HTML Document.
• HTML uses some predefined tags which tells the browser about
content display property, that is how to display a particular
given content.
 HTML - Structure
• Every Webpage must contain the above code.
• <!DOCTYPE html>: This tag is used to tells the
HTML version. This currently tells that the version is HTML 5.
• <html>: This is called HTML root element and used to wrap
all the code.
• <head>: Head tag contains metadata, title, page CSS etc.
• <body>: Body tag is used to enclosd all the data which a web
page has from texts to links.
• All of the content that you see rendered in the browser
is contained within this element.
 HTML - Structure
• An HTML Document is mainly divided into two parts:
– HEAD: This contains the information about the HTML document. For
Example, Title of the page, version of HTML, Meta Data etc.
– BODY: This contains everything you want to display on the Web Page.
 HTML - Structure
• For Example, to create a paragraph, one must use the paragraph
tags(<p> </p>) and to insert an image one must use the
img tags(<img />)
 HTML - Structure
• There are generally two types of tags in HTML:
– Paired Tags: These tags come in pairs. That is
they have both opening(< >) and closing(</ >) tags.
– Singular Tags: These tags do not required to be closed.

• Below is an example of (<b>) tag in HTML, which tells

the browser to bold the text inside it.

<b> Hypertext Markup Language </b>

 HTML - First Web
• Example:
Page

• Output:

Hello World
 Heading Tags
• Heading tag in HTML is used to represent headings in a Web
Page.

• There are six levels of headings defined by HTML. These six

heading elements are H1, H2, H3, H4, H5, and H6; with
H1 being the highest level and H6 the least.

• Search Engines use headings for indexing the structure and

content of the webpage.

• Headings are used for highlighting important topics.

 Heading Tags - Example
Code: Output:
 Basic Tags & Attributes
• The following tags help in organization and basic formatting of
elements in our script or web pages.
– HTML Paragraph <p> </p> - to write paragraph statements
in a webpage.
– Break </br> - to break line and acts as a carriage return.
– Horizontal Rule <hr> - to break the page into various parts,
creating horizontal margins
– HTML Images <img src=”source_of_image“> - to insert an
image into our web page
– HTML Attributes - to provide extra or additional
information about an element
– HTML Comments - for inserting comments in the
code
HTML 82
Text Formatting Tags
Text Formatting Tags
 Output :
Image tag
 Image Tag 76

Output:
 Lists

• A list is a record of short pieces of information, such as

people’s names, usually written or printed with a single thing
on each line and ordered in a way that makes a particular
thing easy to find.
• HTML offers three ways for specifying lists of information. All
lists must contain one or more list elements.
– An unordered list - ul
– An ordered list - ol
 An Unordered Lists
• An unordered list starts with the “ul” tag.

• Each list item starts with the “li” tag.

• The list items are marked with bullets i.e. small black circles by
default.

• The HTML Unordered List has various List Item

Markers:-
– Disc
– Circle
– Square 78
 An Ordered Lists
• An ordered list starts with the “ol” tag.
• Each list item starts with the “li” tag.
• The list items are marked with numbers by default.
• The HTML Ordered List has various List Item Markers:
– Items numbered with numbers
– Items numbered with uppercase letters
– Items numbered with lowercase letters
– Items numbered with uppercase roman numbers
– Items numbered with lowercase roman numbers

<ol type=“1” / “A” / “a” / “I” /

“i”>
 Example
Code Output
 Tables
• The HTML table provides a way to derive or define the data
such as text, images, links etc. in terms of rows and
columns of cells.
• The HTML tables can be created by using <table> tag.
• The table can be created by using <th>, <td>, and <tr> tags.
– The <th> tag defines a heading for the table.
– The <td> tag specifies the table data cells which is used to
make the column.
– The <tr> tag specifies the table rows which is used to make
a row.
• The table data can be structured within <table>content of the
table</table> with numerous table elements.
Basic Table Usage
 Table Tags & Attributes
• <caption> - caption for the table
• cellspacing - specifies the space between table cells.
• cellpadding - specifies the space between the border
of a
table cell and its contents.
• Column and Row Span Attributes - The two or more table rows
/ columns can be merged into a single row / column.
• bgcolor - background of the table
• Height and Width of the Table - height and width of the table
can be set by using width and height attributes
• allign - provides the alignment of content inside an element
 Control Elements
• HTML Control Elements are responsible to accept the
User input in a specified manner.
• These elements can be grouped together inside a form to collect
data from a User in a User-friendly manner.
 Input Text Control
• Input text controls are used to collect User data as a free text.
• On the web page, it will form a rectangle box where Users can
input the data.
• There are different types of input text controls that can be used
in the HTML forms.
– Single line Input Text Control
– Multi-line Input Text Control
– Password Input Control
 Input Text Control
• This allows the user to enter line of data. A example of such
input text controls is for entering the name, search box,
city, etc.
 Input Text Control :Multiline
• This input control type allows the user to enter data of multiple
lines.
• Typical usage of such input controls is for comments, addresses,
description and so on.
 Password Input
• This isControl
typically used for the password field. This works in the
same way as the input text field but the text gets masked
for safety purposes.
 Submit
• When input type is of submitting it performs the action defined
in the form action and sends the form data to the server.
 Radio
• Radio buttons are used when you expect Users to fill data as a
Boolean value or you expect only one input as true out
of multiple options.
 Checkbox
• A checkbox lets the User select whatever information is true in
his case.
• It is a very convenient way of accepting the data when
the possible input is already known.
 Drop-down list
• The drop-down list enables the user to select one
option out of multiple possible options. This is a
very User-friendly way to get the detail from
the User as it provides an exhaustive list of
possible options that helps the user to
identify the option best suits him.
 Input Type
• Optgroup works in a similar way as of the drop-down list, the
Optgroup
only difference is that the optgroup lets you to logically
group certain options under one umbrella. It helps the user to
quickly identify the relevant option with the help of the
optgroup label.
 Fieldset
• Fieldset is another useful tag in the Html form
which let the developer to logically group certain
controls under one legend, this help the
developer to give User a clear instruction on
what to expect in this section.
 Date
• Input type date is commonly used where a date type field as
input is expected by the User, it could be anything like a Date
of Birth, Hiring date, termination date and so on.
 Audio
• The “audio” tag is an inline element that is used to
embed sound files into a web page.

• Attributes: The various attributes that can be used with

the “audio” tag are listed below:
– Controls: Designates what controls to display with the audio player.
– Autoplay: Designates that the audio file will play immediately after it
loads controls.
– Loop: Designates that the audio file should continuously repeat.
– src: Designates the URL of the audio file.
– muted: Designates that the audio file should be muted.
 Video
• The “video” element specifies a standard way to embed a video
in a web page.
• There are three different formats that are commonly supported
by web browsers – mp4, Ogg and WebM.

• Attributes that can be used with the “video” tag are listed
below :
– Autoplay
– Preload
– Loop
– Height and Width
– Controls
– Muted
CSS : Cascading Style
Sheet
 CSS
• CSS is the language we use to style an HTML
document.

• CSS stands for Cascading Style Sheets

• CSS describes how HTML elements are to be

displayed on screen, paper, or in other media

• CSS saves a lot of work. It can control the layout of

multiple web pages all at once

• External stylesheets are stored in CSS files

CSS Syntax
Rule Cascading
 Color Property
CSS Color property is used to set the color of HTML
elements. This property is used to set font color,
background color, etc. The color of an element can be
defined in the following ways:
•Built-In Color
•RGB Format
•RGBA Format
•Hexadecimal Notation
•HSL
•HSLA
Built-In Color: These are a set of predefined colors which are used by its name.
For example: red, blue, green etc.
Syntax:
h1 { color: color-name; }
RGB Format: The RGB(Red, Green, Blue) format is
used to define the color of an HTML element by
specifying the R, G, B values range between 0 to
255.color
Red For example: RGB
is (255, 0, 0), value
Greenof
color is (0, 255, 0), Blue
color
is (0, 0, 255) etc.

Syntax:
h1 { color: rgb(R, G, B); }
RGBA Format: The RGBA format is similar to the RGB, but the
difference is RGBA contains A (Alpha) which specifies the
transparency of elements. The value of alpha lies between 0.0 to
1.0 where 0.0. represents fully transparent and 1.0 represents not
transparent.
Syntax:
h1 { color:rgba(R, G, B, A); }
Hexadecimal Notation: The hexadecimal notation begins with # symbol
followed by 6 characters each ranging from 0 to F. For example: Red
#FF0000, Green #00FF00, Blue #0000FF etc.
HSL: HSL stands for Hue, Saturation, and Lightness respectively. This
format uses the cylindrical coordinate system.
• Hue: Hue is the degree of the color wheel. Its value lies
between 0 to 360 where 0 represents red, 120 represents green and 240
represents blue color.
•Saturation: It takes a percentage value, where 100% represents
completely saturated,
while 0% represents completely unsaturated (gray).
• Lightness: It takes percentage value, where 100%
represents white, while 0% represents black.
Syntax:
h1 { color:hsl(H, S, L); }

HSLA:
The HSLA color property is similar to HSL property, but the difference is
HSLA contains A (Alpha) which specifies the transparency of
elements. The value of alpha lies between 0.0 to 1.0 where 0.0.
represents fully transparent and 1.0 represents not transparent.
Syntax:
Example :color
Background
Background
Output
Background

Property What It Does

Sets the light teal
background-color
background.
Loads a scenic image from
background-image
Unsplash.
background-repeat: no- Ensures the image doesn't
repeat tile.
background-position: right Places image at bottom-
bottom right.
background-attachment: Image scrolls with the
scroll page.
 Font formatting
The CSS text formatting properties are used to format text, style
the font and perform different types of manipulations like word
spacing, alignment, justification, and font transformation.
Syntax:
The Syntax to write this property:
Selector { property-name : /*value*/ }
CSS Text Formatting Properties:
•The color property is used to set the color of a text.
•The direction property is used to set the text direction.
•The letter-spacing property is used to add or subtract space between the letters
that make up a word.
•The word-spacing property is used to add or subtract space between the words of
a sentence.
•The text-indent property is used to indent the text of a paragraph.
•The text-align property is used to align the text of a document.
•The text-decoration property is used to underline, overline, and strikethrough text.
•The text-transform property is used to capitalize text or convert text to uppercase
or lowercase letters.
•The white-space property is used to control the flow and formatting of text.
 Font Color
<html>
<head>
</head>
<body>
<p style = "color:red;"> This text will be
written in red. </p>
</body>
</html>
Font Direction
The following example demonstrates how to set the direction of a
text. Possible
values are ltr or rtl.
<html>
<head>
</head>
<body>
<p style = "direction:rtl;">
This text will be rendered from right to left </p>
</body>
</html>
 Text Indent
The following example demonstrates how to indent the first line of a paragraph. Possible
values are % or a number specifying indent space.

<html>
<head>
</head>
<body>
<p style = "text-indent:1cm;">
This text will have first line indented by 1cm and this line will
remain at its actual
position this is done by CSS text-indent property. </p>
</body>
</html>

Output
Text Alignment
The following example demonstrates how to align
a text. Possible values are left, right, center,
justify.
Different Styles
The following example demonstrates how to decorate a text.
Possible values are none, underline, overline, line-through,
blink.
 Text Cases
The following example demonstrates how to set the
cases for a
text. Possible values are none, capitalize, uppercase,
lowercase
Font Styling
Property Description
font-family Specifies the font type used.
font-size Controls the size of the text.
Sets thickness (e.g., normal,
font-weight
bold, 100–900).
font-style Italic or normal.
Adjusts vertical spacing
line-height
between lines.
Controls horizontal space
letter-spacing
between characters.
Changes text to uppercase,
text-transform
lowercase, or capitalize.
Aligns text (left, center,
text-align
right, justify).
color Sets the font color.
Table Formatting

 Basic HTML Structure

Table Formatting
 CSS Styling Overview

 Styling Table Header Styling Table Cells

Table Formatting
 Zebra Stripping and Hover Effect

 Output without hover

 Output with Hover

List formatting
 Common Styling for the lists

 Unordered List

Ordered List
List formatting
 List item Styling

 HTML Code Output


List formatting

CSS Property What It Does

Changes bullet/number
style (e.g., square, disc,
list-style-type
circle, upper-roman,
decimal).
Adds space to the left for
padding-left
bullet/number indentation.
Adds a visual vertical line
border-left
on the side of the list.
Sets the background color
background-color
behind the list.
Adjusts vertical spacing
line-height
between list items.
Adds vertical spacing
margin
around list items.