WE ARE GOING TO

DISCUSS….
• COMMUNICATION ON THE WEB
• WEB SERVER TECHNOLOGIES
• WEB DESIGNING
• STATIC AND DYNAMIC WEB PAGES
• SCRIPTS AND TYPES OF SCRIPTING LANGUAGES
• POPULAR SCRIPTING LANGUAGES
• CASCADING STYLE SHEET
• BASIC CONCEPTS OF HTML DOCUMENTS
We rely on different websites for
various purposes like…..

• Submitting online applications

• Viewing web contents
• Watching movies
• Banking transactions
• Purchase of goods through online
transaction and so on.
 A website is a collection of web
pages.
A web page may contain texts,
graphics, sounds, animations, and
movies.
Web pages are developed with the
help of a language called
Hyper Text Markup
Language(HTML).
 How is this website made available on the
Internet?

These web pages are to be stored in

web servers connected to the Internet,
to be made available to others.
Communication on web
Communication on
web
 Communication on
web

In order to communicate on the web,

computers/devices need to understand each
other. This is made possible by making all devices
follow the same protocol, namely TCP/IP.
 Communication on
web
URL is sent After process
Browser
to DNS this request,
connects to
the web page
server to this server
to be displayed
obtain its IP using the IP
is sent to the
address address.
client.

In order to communicate on the web,

computers/devices need to understand each
other. This is made possible by making all devices
follow the same protocol, namely TCP/IP.
Communication on web
 Routing of a data packet from
sender to a recipient

TCP breaks the data TCP reassembles the

into packets data packets back
to original form
The packets travel from
router to router over the
internet according to the IP
In the Internet, there are several types of
communication.

• Websites are accessed using HTTP.

• Email communication happens using SMTP.

• Internet Protocol provides the basics of

communication over Internet.
 The role of routers in transporting
data in Internet
• The routers need not be programmed
separately to handle different types of data.

• They do not need to know about the data

they are transporting.

• It concerned only about the address to which

the packet is to be delivered
• The openness of the data part of the packet gives
the freedom to design new protocols for the
Internet.

• This openness and flexibility of TCP/IP that led to

the development of protocols for
– social media websites to handle messages,
– content websites to handle video and audio,
– banking websites to handle money transfer securely,
etc
• It is a deciding factor for the economic success of
the Internet.
 Communication on the web can
be categorised as

1. Client (browser) to webserver

2. Web server to Web server communication

 Essential for Communication
over the Internet

1. Authentication : is the process of

determining whether a computer / server is
the computer that it claims to be.

2. Security : it should be provided to

communication over Internet so that the
messages are not intercepted and modified
by hackers.
1. Client (browser) to
webserver
 1. Client (browser) to
webserver
• It does not usually require authentication.
• But in the case of web based banking
applications / e-mail services, user names and
passwords are required to be sent to the
server.
• This information cannot be sent to the server
in plain text due to security reasons.
• The hackers may steal usernames and
passwords, if it is communicated and shared
as plain text.
1. Client (browser) to
webserver
 HTTPS
(Hyper Text Transfer Protocol
Secure)

• HTTPS (Hyper Text Transfer Protocol Secure)

technology to encrypt the username and
password and then send it to the server.

• It works using SSL (Secure Sockets Layer)

 SSL (Secure Sockets
Layer)
• SSL provides a standard security technology for
establishing an encrypted connection between
computers on Internet.
• It provides security capabilities to HTTP.
• This protocol not only ensures privacy, but also
ensures that no other website can impersonate
the user’s login account not alter the
information sent.
• Verisign Inc. is a certification authority.
 Client-Server authentication
process
1. Browser requests to start a secure SSI session
2. Server returns its SSL certificate
3. Browser checks that : Certificate is valid,
signed by someone user trusts. If valid,
browser initiates and encrypted session
4. Server and Browser encrypts all the
transmitted data.
 2. Web server to web server
communication
• It may be required in certain web applications.
• The web server of an online shopping
website needs to send confidential
information to a bank web server and vice
versa.
• In such cases the web servers of the merchant
and the bank are to be authenticated.
• Digital certificates –
• Payment gateway – a bridge
 2. Web server to web
server
communication Paymen
Request to t
Merchant’s Payment gateway gateway

conformation
Web

Request for
server
Payment gateway
to response Bank
order

WS

response
Server response

User placing Bank Merchant

order bank account
 Web server
technologies

www.dhsekerala.gov.in
 Web
server
• It is a server computer that hosts
websites
• It enables us to deliver web pages or
services like e-mail, blog etc., to users on
the Internet
• It consists of a server computer that runs
a server OS and a web software
installed on it for providing services over
the Internet
 Web
server

• It is a powerful computer which is always switched on

and connected to a high bandwidth Internet connection
• This will facilitate Internet users around the world
to access the websites and services hosted by it at
any point of time
• It can have single or multiple processors, fast access
RAM, high performance hard disks, Ethernet cards that
supports fast communication
• It is usually installed in a data center to ensure faster
Internet connectivity and redundant power supply
Data
center
 Data
center
• It is a dedicated physical location where
organisations house their servers and networking
systems
• It is used for storing, processing and serving
large amounts of mission-critical data to their
clients
• It requires extensive backup power supply
systems, cooling systems, high speed networking
connections and security systems
 Popular Server
OS
• Linux distributions
– Redhat, openSUSE, Debian, Ubuntu,
etc)
• Microsoft Windows Server
• FreeBSD
• Oracle Solaris etc.,
 Web server
software
• After setting up a server, a web server
software has to be installed in it and
configured according to the given OS
• The web server software is a program that
uses the client-server model and the HTTP to
ensure timely distribution of files stored in
it to the users
 Some of the
preferred web server
packages are
• Apache Server
• Microsoft Internet Information Server (IIS)
• Google Web Server (GWS)
• nginex (engine-x)

Other Software packages :

FTP, e-mail, DNS, databases etc
Hardware
Ports
• It is used to connect
external devices to the
computer
• These devices
communicate with the
computer using these
ports
 Software
Ports
• It is used to connect a client computer to a
server to access its services like HTTP, FTP,
SMTP etc,
• To distinguish the ports, the software ports
are given unique numbers
• The purpose of software ports is to identify
different services like e-mail, file transfer
etc, running on a single server computer
 Software
Ports
• Port number is a 16-bit number which when
added to a computer’s IP address / URL,
can be used for communicating with a
particular service available on that server
• For example :
http://www.google.co.in:80

protocol Domain Port number

name
Some well-known ports and
the associated
services
Default Port Service
Number
20 & 21 FTP
22 SSH
25 SMTP
53 DNS
80 HTTP
110 POP3
443 HTTPS
DNS
Servers

 It runs a special
purpose
networking
software that
contains a
database of
domain names
and IP addresses
 DNS
Servers

The DNS servers are arranged in a hierarchy.

At the top level there are 13 root servers that
contains name server information for all the generic
top-level domains
How the DNS resolves the IP
address?
1. The browser first searches it local memory (mini
cache). If found, the browser uses it
2. If it is not found, it checks the OS’s local cache
for the IP address
3. If it is not found there, it searches the DNS
server of the local ISP
4. In the absence of the domain name in the ISP’s
DNS server, the ISP’s DNS server initiates a
recursive search
5. If found returns this IP address to the browser
and the webpage is displayed otherwise it
returns the message “Server not found” in the
browser window
 How the DNS searches and
locates the IP address of a
domain name?
Recursive DNS
search

Web DNS DNS

Browser Server Resolver
Operating System
Your ISP
Client Program
Web
Designing
 The first step in setting up a
website is planning the web pages
for the websites
Popular web designing
softwares
Bluefish
Bootstrap
Adobe Dreamweaver
Microsoft Expression web
 HTM
L
• Hyper Text Markup Language

• It consists of tags and its attributes

used to format web pages
 Static web
pages
• Web pages that remain the same all
the time until their code is changed
manually.

• It is created using HTML.

 Dynamic web
pages
• The web pages that contain server side
code which creates a web page each
time it is accessed are called dynamic
web pages.
• Program code that runs on the server is
called server side code.
• Technologies like PHP, ASP, JSP, etc., are
used to develop dynamic web pages
 Comparison of
static and dynamic web
pages
Static web page Dynamic web page
• The content and layout of • The content and layout may
web page is fixed change during run time
• It never use databases • It uses the databases to
generate dynamic content
• It directly run on the through queries
browser and do not require • It runs on the server side
any server side application application program and
program displays the results
• These are easy to develop • This web page development
requires programming skills
 scrip
ts
• These are program codes written inside HTML
page.
• They are written using a text editor like
notepad.
• Scripting languages like JavaScript, VB script,
PHP, Perl, etc., are used to create dynamic
web pages.
 scrip
ts
• In an HTML page, a script is written inside <SCRIPT>
and </SCRIPT> tags.
• <SCRIPT> is used to embed or refer to an executable
script within an HTML docment.
• It has the attributes type and src.
• Type attribute is used to identify the scripting
language code embedded within the script tag
• Src attribute is used to specify the URL of an external
file containing scripting code to be linked to a web
page.
• <SCRIPT type = “text/javascript” src =
“scriptcode.js”>
Types of scripting
languages
1. Client Side scripting

2. Server Side scripting

 Client Side
scripting
• It is used to perform any task at the client side
and is executed in the browser.
• Since the script code is executed on the client
browser, it provides a quick response to the
users.
• Disadvantage: there are browsers that do not
support scripts. In some cases users may
turn off the execution of scripts in the
browser.
• Eg. JavaScript, VB script
• It is mostly used for validations and also for
 Server Side
scripting
• It is used to create dynamic web pages
and are executed in the server.
• Since the scripts are executed at the
sever, the type and version of the
browser or OS on the client’s computer
does not affect its execution.
• Eg. Perl, PHP, ASP, JSP etc.,
Working of server side
scripts
1
Web Server
softwares
4
2 3
PHP

CLIENT
MySQL
Database

SERVER
Working of server side
scripts
1 The web page containing server side
scripts requested by the user
2 Server side scripts which executes and
access the result from the database

3 Creates simple web pages dynamically

4 This web page is then sent to the client

browser and the browser displays it
 Comparison of the classifications of
scripting languages
Client side scripting Server side scripting
• Script is copied to the client • Script remains in the web
browser and executed in the server and is executed in the
client browser web server and the web page
produced is returned to the
client browser
• Client side scripts are mainly • Server side scripts are usually
used for validation of data at used to connect to database
the client and return data from the web
server
• Users can block client side • Server side scripting cannot be
blocked by the user
scripting
• The features of the web
• The type and version of the browser does not affect the
web browser affects the working of server side script
working of a client side script
 Scripting
Languages
• Some of the popular scripting languages
are given below:
1. JavaScript
2. VB Script
3. PHP (Hypertext PreProcessor)
4. ASP (Active Server Pages)
5. JSP (Java Server Pages)
 1.
JavaScript
• It is a client side scripting
language used to make web
pages interactive
• It was developed by
Brendan Eich while he was
working for Netscape
Communications
Corporation
• It is implemented as an
interpreted language
• Any text editor such as
Geany IDE, notepad etc, can
be used to write JavaScript
code
 JavaScri
pt
• It is popular as a client side scripting tool
and works in almost every browser
• It can be inserted inside HTML code or can
be written as an external file and then
included inside HTML file
• The extension name javaScript file is .js
• It is a tool for validation of forms in the
client side and also be used for performing
simple calculations and also for bringing
animations to a web page
 Aja
x
• It is the technology used in JavaScript
• Ajax is Asynchronous JavaScript and
Extensible Markup Language(XML) and
XML is a markup language which helps
users to create new tags
• It improves the interactivity of the
browsers
 Advantage of using
Ajax
1. After implementing Ajax on a website,
it does not require the entire page to
be reloaded for displaying dynamic
content on web pages

2. It allows web pages to be updated by

exchanging small amounts of data
between the client and the server
behind the scenes
 Since Ajax relies more on JavaScript,
if the browser is not capable of
handling JavaScript or user has turned
off JavaScript functionality in the
browser, the Ajax application will not
work
 2. VB
Script
• It is a scripting language developed by Microsoft
Corporation based on the popular programming
language Visual Basic.
• It was developed to used either as a client side
scripting language for Microsoft IE or as a server
side scripting language with the Microsoft IIS.
• Browsers other than IE may not be able to correctly
interpret and display the VB script code. Therefore it
is less popular as a client side scripting tool.
• It is popular for server side scripting.
• VBScript as a part of ASP.NET in .NET framework
 3.
PHP
• It stands for ‘PHP : Hypertext Pre-Processor’.
• It is an open source general-purpose scripting
language that is suited for web development.
• It can be embedded into HTML code.
• It is a server side scripting tool and its code is
similar to Java, C and PERL.
• Its main objective is to develop dynamic web
pages at ease.
 PH
P
• It was originally created
by Rasmus Lerdorf in
1994 but it is now
developed by The PHP
Group.
• The web page files that
contain PHP code have
the extension .php
 PH
P
• PHP code is inserted inside HTML code and
when the user request for PHP web page, it is
interpreted and executed on the web server.
• One of the strongest and most significant
features in PHP is its support for database
programming.
• The most common database used with
PHP is
MySQL.
Both server softwares are freely downloadable.
 4.
ASP
• It is a server-side scripting environment that can
be used to create and run interactive web
applications.
• It contains HTML and scripting languages
(VBScript, JavaScript).
• ASP files have the extension .asp
• These files are compiled using the Microsoft’s
web server software, IIS (Internet Information
Server).
• It is executed only on Windows OS
 5.
JSP
• This technology provides a simple and fast way to
create dynamic web content .
• It is a server side scripting language that was
developed by Sun Microsystems in 1999 .
• It is similar to PHP, but uses Java as programming
language
• JSP files have the extension .jsp
• To run JSP, Apache Tomcat web server is
required.
• It is an integral part of Java 2 Platform Enterprise
 Cascading Style Sheet
(CSS)
• It is a style sheet language used for describing
the formatting of a document written in HTML.
• Using CSS, we can control
– The colour of the text,
– The style of fonts,
– The spacing between paragraphs,
– How columns are sized and laid out, borders and its
colours,
– What background images or colours are used, as
well as a variety of other effects in a web page.
 CSS can be
implemented in
three different
• In inline ways
style, the CSS style is applied to each
tag separately using the style attribute in the
body part of the web page.
• Embedded CSS codes are placed within the
<HEAD> part of the web page.
• Linked CSS implementation is done using an
external file with the file extension .css that
contains only CSS code and is linked with the
web page.
 Advantage of
CSS
• We can reuse the same code for all the pages.
• Since CSS styles are written in a common place,
it separates CSS and HTML, which makes it
easy for maintenance.
• It is easy to understand.
• This also reduces the size of the web page
thereby providing faster downloads for web
pages.
 Basic concepts of HTML
documents
• the most widely used language to write web
pages.
• It is not a Programming Language.
• It is not a Case Sensitive Language.
• Each HTML file is a plain text that defines a set
of commands for creating hypertext
documents. These commands are known as
HTML tags.
HTML (Hyper Text Markup
Language)
• Developed originally by
Tim Berners – Lee in 1980
at CERN, a European
Particle Physics Laboratory.

• Now HTML standards

are controlled by W3C an
organisation founded in
1994.
• The HTML files must be saved with .htm or
.html extensions.
• HTML pages are viewed with the help of a
software called Web Browsers.
• Popular Web Browsers are
– Microsoft Internet Explorer
– Mozilla Firefox
– Google Chrome
– Opera etc.,
 TAG
S
Tags are generally classified into
two types :

1. Container tag

2. Empty tag
 Container tag or
element
• This type of html tag or elements require pair
tags, ie., a starting tag as well as an ending tag.
• Examples :
<html>…….. </html>
<head>……</head>
<title> …………….</title>
<body>……….</body>
 Empty tag or
element
• This type of html tag or elements require just a
starting tag and not an ending tag.
• Examples :
<br>
<frame>
<hr>
<img> etc.,
 Attribut
es
An attribute is a special word used
inside the tag to specify additional
information such as colour, alignment,
background etc.,
Examples :
bgcolour, background, type, align etc.,
Basic structure of HTML
document
 Example of HTML
document
<html>
<head>
<title> This is the title of web page </title>
</head>
<body>
Hello, Welcome to the world of web pages !
</body>
</html>
 <html>
tag
• It indicates that the document begins with
<html> tag and ends with </html> tag.
• DIR attribute :
• It is used to indicate the document direction.
• It can take two values “ltr” and “rtl”.
• It specifies whether the language direction is
from left to right or right to left.
• Example : <html dir = “ltr”>
 <html>
tag Code Language
• LANG attribute : en English
• It specifies the fr French
language to be de German
used in the web it Italian
page. el Greak
• Example : es Spanish
<html lang = ar Arabic
ja Japanese
“en”>
hi Hindi
ru russian
 <head>
tag
• It contains the head of an HTML document,
which holds information about the document
such as its title, scripts used, style definitions
etc.,
• It is also a container tag.
 <title>
tag
• It is also a container tag pair that contains
the title of the HTML document, which will
appear in the web browser’s title bar.
• The search engines uses the Title to
identify the page.
• It is used inside the tag pair
<head>..</head>
 <body>
tag
• It is also a container tag pair that specifies
the document body section.
• This part contains the content to be
displayed in the browser window.
• Some attributes of
<body>..</body> tag
• Background, bgcolour, text, link, alink,
vlink, leftmargin, topmargin etc.,
 background
• It is an attribute of <body> tag.
• It sets an image as background for the
documents body.
• It makes the page more attractive.
• General format :
• <body background = “URL of the
picture”>
• Example:
• <body background = “school.jpg”>
 To set an image as background for
a web page.

<html>
<head>
<title> Background Image </title>
</head>
<body background = “school.jpg”>
<H1> BEM HIGHER SECONDARY SCHOOL PALAKKAD
</H1>
</body>
</html>
 bgcol
or
• It is an attribute of body tag.
• It specifies a colour for the background of the
document body.
• The value of bgcolor attribute can be given in
two ways: Color_name and Hex_number
• Example :
• <body bgcolor = “blue”>
 tex
t
• It is an attribute of body tag.
• It specifies the colour of the text content in the
page.
• By default the browser displays the text in black
colour on a white or grey background.
• The value of text attribute can be given in two
ways: Color_name and Hex_number
• Example :
• <body text = “red”> or <body text =
“#ff0000”>
 Link, alink and
vlink
• A hyperlink is an element, a text or an image
that we can click on, and jump into another
document or another section of the same
document.
• A hyperlink points to a whole document or to
a specific element within a document.
• link, alink and vlink are attributes of body
tag
• Link : it specifies the colour of the hyperlinks
that are not visited by the viewer. The default
colour is blue.
• Alink : it specifies the colour of the active
hyperlink. The link remains active only for the
moment the mouse is clicked on it. The default
colour is green.
• Vlink : it specifies the colour of the hyperlink
which is already visited by the viewer. The
default colour is purple.
 Leftmargin and
Topmargin
• Leftmargin : it is used to leave some blank area
on the left side of the document. The value is
specified in pixels.
• Topmargin : it is used to leave some blank area
at the top edge of the document window.
The value is specified in pixels.
• For example :
<body leftmargin = “60” topmargin =
“70”>
 Some common
tags
• Used for formatting the text contents in the
body section of the HTML document and
therefore they are called formatting tags.
1. HEADING TAGS <H1> to <H6>
– Main attribute of this tag is align.
– The possible values are left, right, center.
– Eg. <H1 ALIGN = “LEFT”> HEADER-1 </H1>
2. Creating paragraphs -
<P> tag
– It indicates a new paragraph and instructs the
browser to add a blank line before the paragraph.
– It is a container tag <P>……..</P>
– Main attribute of this tag is align.
– The possible values are left, right, center, justify.
– Eg. <P ALIGN = “LEFT”> paragraph content </P>

3. Inserting line break - <BR> tag

– It is used to break the current line of text and
continue from the beginning of the next line.
– It is a empty tag <BR> i.e., no ending
tag.
4. Creating horizontal line -
<HR> tag
– It produces a horizontal line spread across the
width of the browser window.
– It is a empty tag <HR>
– Main attribute of this tag is align, size, width,
color, noshade.
– The possible values for align attribute are left,
right, center.
– Eg. <HR SIZE = “10” WIDTH = “50%” ALIGN =
“CENTER” COLOR = “GOLD” NOSHADE >
5. Centring the content -
<CENTER> tag
– It brings the content to the centre of a web
page horizontally.
– The content may be text, image, table etc.,
– It is a container tag <CENTER>
……</CENTER>
– There is no attribute for this tag.
6. Text formatting
tags
– <B> - it sets the text style to bold. <B>….</B>
– <I> - it sets the text style bold italics. <I>….</I>
– <U> - it is used to underline a text in HTML.
<U>….</U>
– <S> and <STRIKE> - it sets the text in strike
through style. <STRIKE>….</STRIKE>
– <BIG> - it is used to make the content bigger in
size than the normal text size. <BIG>….</BIG>
– <SMALL> - it is used to make the content
smaller in size than the normal text size.
<SMALL>….</SMALL>
– <STRONG> - it is just the same as <B>
<STRONG>….</STRONG>
– <EM> - it sets the text style italics. It is the same
as that of <I> <EM>….</EM>
– <SUP> - it is used to create supscripts in a web
page. <SUP>….</SUP>
– <SUB> - it is used to create subscripts in a web
page. <SUB>….</SUB>
– <BLOCKQUOTES> and <Q> - it is used to indent
the content enclosed in these tags.
<BLOCKQUOTES>….</BLOCKQUOTES>
<PRE> - Displaying preformatted
text
• It is used to display the content as we entered
in the text editor.
• It turn off the automatic formatting applied by
the browser.
• It is a container tag.
• <PRE>………..</PRE>
 <ADDRESS> - Displaying the
address
• It defines the contact information for the
author / owner of document or an article.
• Most of the browsers display the texts in
italics.
• It is a container tag.
• <ADDRESS>………..</ADDRESS>
 <MARQUEE> - Displaying text
in a scrolling Marquee

• It displays a piece of text or image scrolling

horizontally or vertically in the web page.
• It is a container
tag.<MARQUEE>...</MARQUEE>
• The list of important attributes of
<MARQUEE>.
– HEIGHT, WIDTH, DIRECTION, BEHAVIOUR,
SCROLLDELAY, SCROLLAMOUNT, LOOP, BGCOLOR,
HSPACE, VSPACE
 <DIV> - Formatting a block
of text
• It is used for defining a section or a block in the
document.
• It is a container tag.<DIV>...</DIV>
• The list of important attributes of <DIV>.
– ALIGN, ID, STYLE
 <FONT> - Specifying
font
characteristics
• It allows us to change the size, style and colour
of the text enclosed within this tag.
• It is a container tag.<FONT>...</FONT>
• The list of important attributes of <FONT>.
– COLOR – it sets the text colour
– FACE – it specifies font face i.e., type
– SIZE - it specifies the font size whose values ranges
from 1 or 7, with default value 3.
 HTML entities for reserved
characters
• a few special characters and their equivalent entities.
Character Entity Description
&nbsp; Non Breaking Space
“ &quot; Double quotation mark
‘ &apos; Single quotation mark
& &amp; Ampersand
< &lt; Less than
> &gt; Greater than
© &copy; Copyright Symbol
™ &trade Trademark Symbol
® &reg; Registered Symbol
Adding comments in HTML
document

• HTML provides comment tag to insert

comments in the source code.
• HTML comments are placed within
<!-- --> tag.
• It will be completely ignored by the
browser.
 Inserting
images
• <IMG> tag is used to insert images in HTML pages.
• It is an empty tag and it has many attributes.
• SRC is the main attribute and it specifies the file
name of the image to be inserted.
• Other attributes are WIDTH, HEIGHT, VSPACE,
HSPACE, ALIGN, BORDER, ALT
• The possible values for ALIGN attribute are
BOTTOM, MIDDLE, TOP
• <IMG SRC=“book.jpg” HEIGHT=“40” WIDTH =“60”
ALIGN = “BOTTOM” ALT=“Image of an opened
book”>