Chapter 4

Web Technology
 What is Web Page?

●
Web pages are developed using HTML(Hyper
Text Markup Language). It is called language of
the internet.
●
HTML tell the browser how to display the
contents on a browser window.
●
Any page created using HTML are viewed
using software known as Web Browser. Eg:
Chrome, Opera, Firefox, Safari
 Tim Berners-Lee

Invented HTML and WWW

●
What is the role of payment gateway in
online purchases?
Payment gateway is a server that acts as a
bridge between merchant server and bank
server and transfers money in an encrypted
format whenever an online payment/money
transfer is made. Eg:CCAvenue, Paytm, Google
Pay
 Some important Protocols

●
(HTTP) Hyper Text Transfer Protocol is a
standard protocol used for communication between
client (Browser) and server (Web server).
●
(HTTPS) Hyper Text Transfer Protocol Secure
encrypts username and password, and then send it
to the server.
●
(SSL) Secure Sockets Layer provides a standard
security technology for establishing an encrypted
connection between computers on Internet. SSL
provides security, Privacy and authentication.
capabilities to HTTP.
 What is a Web Server?
●
Web Server is the server computer that hosts websites or
deliver services like email, blog etc. It has two components.
●
1) Web Server computer: It is a powerful computer which is
always switched on and connected to a high bandwidth
Internet connection. A web server can have single or multiple
processors, fast access RAM, high performance hard disks,
Ethernet cards that supports fast communication.
●
2) Web Server Software: Popular server operating
systems include various Linux distributions (Redhat,
openSUSE, Debian, Ubuntu, etc.), Microsoft Windows
Server, FreeBSD, Oracle Solaris, etc
Preferred web server packages are Apache Server,
Microsoft Internet Information Server (IIS), Google Web
Server (GWS) and nginx (pronounced as engine-x).
Web Server
 What is Software Port ?
●
A software port 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

SL No Port Number Service

1 20 and 21 File Transfer Protocol (FTP)
2 22 Secure Shell (SSH)
3 25 Simple Mail Transfer Protocol (SMTP)
4 53 Domain Name System (DNS) service
5 80 Hyper Text Transfer Protocol (HTTP)
6 110 Post Office Protocol (POP)
7 443 HTTP Secure (HTTPS)
 What is DNS Server ?

●
Domain Name System (DNS) server runs a
special purpose networking software that
contains a database of domain names and their
IP addresses.
●
DNS runs on a DNS server and returns the IP
address of a domain name requested by the
client computer
 How DNS searches and locates the IP
address of a domain name
or
How DNS resolves IP address.
●
a). The browser first searches its local cache memory to search
whether its IP address is in the recently visited list
●
b). If it is not found it check the operating system’s local cache for IP
address
●
c). If it is not found there, it searches the DNS server of the local ISP.
●
d). If IP address is not there , the ISP’s DNS server initiate search for
IP address starts from root server.
●
e). After finding the IP address, The ISP's DNS server returns this to
the browser.(If it is not found , a Page not found message displayed
on browser)
●
f). The browser connects to the web server using the IP address of
http://dhsekerala.gov.in and the webpage is displayed in the browser
window
 What is Web Designing?

●
HTML, JavaScript and CSS are the main
languages that are used to design a webpage.
●
Any text editor can be used to compose the
code
●
Popular web designing softwares are:
Adobe Dreamweaver, Bootstrap, Bluefish,
Microsoft Expression Web.
●
These softwares are also called as IDE
(Integrated Development Environment)
Compare Static & Dynamic Web pages

SL Static Web Page Dynamic Web Page

No
1 The content and layout of a web page The content and layout may change
is fixed during run time
2 Static web pages never use databases Database is used to generate dynamic
content through queries
3 Static web pages directly run on the Dynamic web page runs on the server
browser and do not require any server side application program and displays
side application program the results
4 Static web pages are easy to develop Dynamic web page development
requires programming skills
 What are Scripts ?

●
Scripts are program codes written inside HTML
pages.
●
Scripting languages like JavaScript, VB script,
PHP, Perl are used to create Dynamic Web
Pages
●
Scripting languages are interpreted by a web
browser or by a web server software
Compare Client Side Scripting & Server Side Scripting
or
What are the Types of Scripting Languages

SL Client Side Scripting Server Side Scripting

No
1 Script is copied to the client browser Script remains in the web server
2 Script is executed in the client Script is executed in the web server and
browser the web page produced is returned to the
client browser
3 Client side scripts are mainly used Server side scripts are usually used to
for validation of data and the client connect to databases and return data
from the web server
4 Users can block client side scripting Server side scripting cannot be blocked by
a user
5 The type and version of the web The features of the web browser does not
browser affects the working of a affect the working of server side script
client side script
 What are Scripting Languages? Give
Example?
●
a) JavaScript is a client side scripting language used to make
web pages interactive. It is developed by Brendan Eich.It can used
for validation, simple calculations etc.
●
b) VBScript is both a client side scripting language and a server
side scripting language. Developed by Microsoft Corporation. It
only work with Windows operating system and Internet Explorer.
●
c) PHP: Hypertext Preprocessor is a server side scripting tool
originally created by Rasmus Lerdorf. It supports database
programming
●
d) Microsoft Active Server Pages (ASP) is a server-side
scripting environment that can be used to create and run interactive
web applications.It is executed only on Windows operating systems
●
e) Java Server Pages (JSP) is a server side scripting language
uses Java as programming language developed by Sun
Microsystems.
●
Q) What is Ajax? What is its use?
Ajax is Asynchronous JavaScript and
Extensible Markup Language (XML). With its
help a dynamic content can be displayed on
web page without reloading the entire page. It
reduces data transfer. Ajax works only if the
browser is able to handling Javascript.
 What is Cascading Style Sheet ?

●
Cascading Style Sheets (CSS) 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 etc.
●
A CSS file allows us to separate HTML content
from its style.
 How to implement Cascading Style
Sheet

●
CSS can be implemented in three different ways -
inline, embedded and linked.
●
a) Inline: In inline style, the CSS style is applied to
each tag separately using the style attribute in the
body part of the web page.
●
b) Embedded: Embedded CSS codes are placed
within the <HEAD> part of the web page.
●
c) Linked : 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.
 Basic concepts of HTML documents

●
Hyper Text Markup Language. HTML is the most
widely used language to write web pages. Every
web page is actually an HTML file.
●
Each HTML file is a plain text that defines a set of
commands for creating hypertext documents.
These commands are known as HTML tags.
●
While using these tags, some keywords may be
attached to them, which make the instruction more
specific. These words are known as attributes.
Basic Structure of an HTML document
●
HTML is not case sensitive.
●
All HTML pages begin with the tag <HTML> and end with tag
</HTML>.
●
There are mainly two sections in an HTML document namely
head section and body section.
●
1) Head section: The <HEAD> tag is used to define the head
section. The head section contains the information about the
document, including the title of the web page. The <TITLE>
tag is used to define the title of the page, which will be
displayed on the title bar of the browser window.
●
2) Body Section: The <BODY> tag is used to define the body
section. The body section contains the contents to be
displayed in the web page.
 What are Container tags and empty
tags ?

●
There are two types of tags:
●
1) Container Tags: Tags that require opening
tag as well as closing tag are known as
container tags.
Eg: <HTML> </HTML>
●
2) Empty Tags: Tags do not require closing tag
is called as Empty tags. Eg:
<BR>,<HR>,<IMG>,
 What are the Essential HTML tags ?

●
1) <HTML>
●
2) <HEAD>
●
3) <TITLE>
●
4) <BODY>
 1) <HTML>

●
The <HTML> tag identifies the document as an HTML
document.
●
<HTML> is always the first tag in an HTML page and
the </HTML> is the last tag.
●
Everything else in the web page is in between these
two tags.
●
The Head section and the Body section lie inside the
<HTML> and </HTML> tags.
●
It is a container tag pair.
●
The main attributes of the <HTML> tag are Dir and
Lang.
●
Dir
The Dir attribute specifies the direction of the text
to be displayed on the web page.
Its values are ltr (left-to-right) or rtl (right-to-left).
The default value of Dir attribute of HTML tag is Ltr
Eg: <HTML Dir = "rtl">
●
Lang
The Lang attribute specifies the language used
within the document. Eg. <HTML Lang = "en">
 2) <HEAD>

●
It contains the head of an HTML document,
which holds information about the document
such as its title, scripts used, style
definitions, etc.
●
The tag pair <HEAD> and </HEAD> declares
the head section.
●
It is also a container tag pair.
 3) <TITLE>

●
It is a container tag pair that contains the title of
the HTML document, which will appear in the
web browser's title bar.
●
The search engine uses the Title to identify the
page.
●
The tag pair <TITLE> and </TITLE> is used
inside the tag pair <HEAD> and </HEAD> to
mention the document title.
●
It is also a container tag pair.
 4) <BODY>

●
The body tag pair <BODY> and </BODY> specifies the
document body section.
●
This section contains the content to be displayed in the
browser window. Hence, all other tags, which define
the document content are given in the body section.
●
The important attributes used in <BODY> tag are
a) Background
b) Bgcolor
c) Text
d) Link, Alink, Vlink
e) Leftmargin and Topmargin
 a) Background

●
This attribute sets an image as background for
the documents body.
●
The general format is:
<BODY Background = "URL of the picture">
●
Eg:
<BODY Background = "Sky.jpg">
●
we have to place the image file in the current
working directory.
HTML code to set image as background for a webpage
 b) Bgcolor

●
This attribute specifies a colour for the background of the
document body.
●
For example, <BODY Bgcolor = "grey"> will display the
background in grey colour.
●
The value of Bgcolor attribute can be given in two ways.
1) Color_name - specifies the background colour with a
colour name (like "red", "grey" etc.)

2) Hex_number - specifies the background colour with a

hexadecimal code (like "#ff6080", "#303030" etc.). Each
hexadecimal code will be preceded with a hash sign #.
 c) Text
●
This attribute specifies the colour of the text content in
the page.
●
By default the browser displays the text in black colour
on a white/grey background.
●
The colour of the text can be changed using the
attribute Text.
●
For example,
<BODY Text = "yellow">
shows the text in yellow colour.
●
The value of Text attribute can be given as colour name
or hexadecimal code.
For example, Text = "Blue" or Text = "#00FFDD" etc.
 d) Link, Alink, 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: This attribute specifies the colour of the hyperlinks that
are not visited by the viewer. The default colour for Link
attribute 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.
Hence at the time of selection the colour of the link will be
changed to Alink value. The default Alink colour is green.
●
Vlink: It specifies the colour of the hyperlink which is already
visited by the viewer. The default colour for Vlink is purple.
 e) Leftmargin and Topmargin

●
The margin refers to the blank area left from the
edge of the page.
●
Leftmargin attribute is used to leave some
blank area on the left side of the document
●
Topmargin refers to the blank area at the top
edge of the document window. The value is
specified in pixels.
 Some common tags

●
The tags that are used for formatting the text contents in the body section
of the HTML document is called formatting tags.
●
1) <H1>, <H2>, <H3>, <H4>, <H5> and <H6> - Heading tags
●
2) <P> tag - Creating paragraphs
●
3) <BR> tag - Inserting line break
●
4) <HR> tag - creating horizontal line
●
5) <CENTER> tag - Centering the content
●
6) Text formatting tags
●
7) <PRE> - Displaying preformatted text
●
8) <ADDRESS> - Displaying the address
●
9) <MARQUEE> - Displaying text in a scrolling Marquee
●
10) <DIV> - Formatting a block of text
●
11) <FONT> - Specifying font characteristics
 1) <H1>, <H2>, <H3>, <H4>, <H5> and <H6> -
Heading tags
●
A heading is a word, phrase, or sentence given at the beginning
of a written passage that explains what it is about.
●
It is a container tag
●
HTML has six levels of headings from <H1> to <H6>.
●
Here <H1> creates the biggest text and <H6> the smallest. Eg:
<H1 Align= "left"> This is a Heading type 1 </H1>
●
While displaying any heading, browser adds one line before and
one line after that heading.
●
The main attribute of this tag is Align and the possible values
are,
i) Left : Text is aligned to the left margin.
ii) Right : Text is aligned to the right margin.
iii) Center: Text is aligned to the centre of the page.
 2) <P> tag - Creating paragraphs

●
The <P> tag enables us to organise the text within the <BODY>
tag into paragraphs.
●
It indicates a new paragraph and instructs the browser to add a
blank line before the paragraph.
●
It is a container tag
Eg:
<P Align= "right"> This paragraph contains a lot of spaces in the
source code,but the browser ignores it. </P>
●
The main attribute of this tag is Align and the possible values
are,
i) Left : Text is aligned to the left margin.
ii) Right : Text is aligned to the right margin.
iii) Center or Justify: Text is aligned to the centre of the page.
 3) <BR> tag - Inserting line break

●
It creates a line break within a block of text in a
web page. The <BR> tag is used to break the
current line of text and continue from the
beginning of the next line.
●
It is an empty tag
4) <HR> tag - creating horizontal line
●
The <HR> tag produces a horizontal line (rule) spread across the
width of the browser window. It is an empty tag.
●
The attributes are:
i) Size : Changes the size(thickeness) of the line. Value is given in
pixels

ii) Width : Changes the width(length) of the line. Value given in pixels
or percentage.

iii) Align : Values are left, right or center

iv) Noshade : Applies no shade

v) Color : Changes the color of line

●
EG:
<HR Size= "10" Width= "30%" Align= "center" Noshade>
5) <CENTER> tag - Centering the content

●
The <CENTER> tag brings the content to the
centre of a web page horizontally.
●
The content may be text, image, table, etc.
●
This is a container tag
●
There is no attribute for this tag.
●
Eg:
<CENTER> Welcome </CENTER>
 6) Text formatting tags

●
Using text formatting tags we can make texts
bold, italics, underline etc
●
i) <B> This tag sets the text style to bold.
●
ii) <I> It sets the text style to italics.
●
iii) <U> Used to underline a text in HTML. The
formatting tags <U>, <B> and <I> can be
combined, so that the content will become bold,
italicized and underlined.
●
iv) <S> and <STRIKE> - They display the text in
strike through style.
 6) Text formatting tags
●
v) <BIG> Making the text big sized.
●
vi) <SMALL> Making the text small sized.
●
Vii) <STRONG> Making bold text .It is just the same as
<B> tag. The strong element is used to emphasize a phrase
of text content.
●
Viii) <EM> Used to emphasise the text. Text is usually
rendered in italics. Effect is same as that of <I> tag.
●
ix) <SUB> and <SUP> tags- Used to create subscripts and
superscripts. EG:
H2O H<SUB>2</SUB>O

(a+b)2 (a+b)<SUP>2</SUP>
 Previous Questions

●
1.The default port number of http is
(a) 20 (b) 80 (c) 110 (d) 53
●
Ans: 80
●
2. Write HTML tag to set the colour of hyperlink to red .
(a) <A colour=”red” > (b) <A colour=”FF0000” >
(c) <BODY LINK=”Red” > (d)<BODY ALINK=”Red” >
●
Ans : c
●
3.A webpage is created to display the result of engineering
entrance examination .
(a)What type of webpage it is ?
(b) Mention any two features of it.
●
Ans : Dynamic Web page
●
4. Write any two features of dynamic web page.
 Previous Questions

●
5.……….. tag is used to make the size of the text smaller
than current text in HTML.
(a)<b> (b) <small> (c) <sub> (d) <sup>
●
Ans: b
●
6. Compare client side scripting and server side scripting.
●
7. Compare client side scripting and server side scripting
languages.
●
8. Compare static and dynamic webpages.
●
9. ... .... ... is a server that act as a bridge between
merchant server and bank server.
●
10. DNS stands for ..........
 Previous Questions

●
11. Write HTML tags used to insert comments in HTML
web pages
●
12. Suppose you are browsing the website
www.keralapsc.gov.in explain how DNS resolves this ip
address
●
13. What is the port number for the following web
services
(i) Simple Mail Transfer Protocol
(ii) HTTP secure (HTTPS)
●
14. (i) What is the use of reserved characters for HTML
entities?
(ii) List any four reserved characters and its use
 Previous Questions

●
15. Name any two attributes of the following
tags
(a) <HTML>
(b) <MARQUEE>
(C) <FONT>