1

Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Semester-5

BCA 501

Web Design
(According to Purvanchal University Syllabus)

“Full Line By Line Notes”

On August 22/08/19

For More Info Visit on WWW.DPMISHRA.COM

 2
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Unit – 1
Overview of Internet
Introduction to Internet and www–
 Internet is a global communication system that links together thousands
of individual networks. It allows exchange of information between two
or more computers on a network. Thus internet helps in transfer of
messages through mail, chat, video & audio conference, etc.
 It has become mandatory for day-to-day activities: bills payment, online
shopping and surfing, tutoring, working, communicating with peers, etc.
 The World Wide Web (www, W3) is an information space where
documents and other web resources are identified by URIs, interlinked
by hypertext links, and can be accessed via the Internet. It has become
known simply as the Web. Hypertext documents are commonly
called web pages, which are primarily text documents formatted and
annotated with the Hypertext Mark-up Language (HTML).

Internet protocols like TCP/IP–

Transmission Control Protocol (TCP)
TCP is a connection oriented protocol and offers end-to-end packet delivery. It
acts as back bone for connection. It exhibits the following key features:
 Transmission Control Protocol (TCP) corresponds to the Transport Layer
of OSI Model.
 TCP is a reliable and connection oriented protocol.
 TCP offers:
o Stream Data Transfer.
o Reliability.
o Efficient Flow Control
o Full-duplex operation.
o Multiplexing.

For More Info Visit on WWW.DPMISHRA.COM

 3
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

 TCP offers connection oriented end-to-end packet delivery.

 TCP ensures reliability by sequencing bytes with a forwarding
acknowledgement number that indicates to the destination the next
byte the source expect to receive.
 It retransmits the bytes not acknowledged with in specified time period.

Internet Protocol (IP)

Internet Protocol is connectionless and unreliable protocol. It ensures no
guarantee of successfully transmission of data.
In order to make it reliable, it must be paired with reliable protocol such as
TCP at the transport layer.
Internet protocol transmits the data in form of a datagram as shown in the
following diagram:

Points to remember:
 The length of datagram is variable.
 The Datagram is divided into two parts: header and data.
 The length of header is 20 to 60 bytes.
 The header contains information for routing and delivery of the packet.

For More Info Visit on WWW.DPMISHRA.COM

 4
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Hyper Text Transfer Protocol (HTTP)

HTTP is a communication protocol. It defines mechanism for communication
between browser and the web server. It is also called request and response
protocol because the communication between browser and server takes place
in request and response pairs.
HTTP Request
HTTP request comprises of lines which contains:
 Request line
 Header Fields
 Message body
Key Points
 The first line i.e. the Request line specifies the request method
i.e. Get or Post.
 The second line specifies the header which indicates the domain name
of the server from where index.htm is retrieved.
HTTP Response
Like HTTP request, HTTP response also has certain structure. HTTP response
contains:
 Status line
 Headers
 Message body

Telnet and FTP–

Telnet is a protocol used to log in to remote computer on the internet. There
are a number of Telnet clients having user friendly user interface. The
following diagram shows a person is logged in to computer A, and from there,
he remote logged into computer B.

For More Info Visit on WWW.DPMISHRA.COM

 5
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

File Transfer Protocol (FTP)

FTP is used to copy files from one host to another. FTP offers the mechanism
for the same in following manner:
 FTP creates two processes such as Control Process and Data Transfer
Process at both ends i.e. at client as well as at server.
 FTP establishes two different connections: one is for data transfer and
other is for control information.
 Control connection is made between control processes while Data
Connection is made between<="" b="">
 FTP uses port 21 for the control connection and Port 20 for the data
connection.

For More Info Visit on WWW.DPMISHRA.COM

 6
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

URL–
Uniform Resource Locator (URL) refers to a web address which uniquely
identifies a document over the internet.
This document can be a web page, image, audio, video or anything else
present on the web.

For example, www.dpmishrakidiary.com/internet_technology/index.html is

an URL to the index.html which is stored on dpmishrakidiary web server under
internet_technology directory.

URL Types
There are two forms of URL as listed below:
 Absolute URL
 Relative URL

Absolute URL
Absolute URL is a complete address of a resource on the web. This completed
address comprises of protocol used, server name, path name and file name.
For example http://www.dpmishrakidiary.com/internet_technology
/index.htm. Where:
 http is the protocol.
 dpmishrakidiary.com is the server name.
 index.htm is the file name.
The protocol part tells the web browser how to handle the file. Similarly we
have some other protocols also that can be used to create URL are:
 FTP
 https
 Gopher
 mailto
 news

For More Info Visit on WWW.DPMISHRA.COM

 7
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Relative URL
 Relative URL is a partial address of a webpage. Unlike absolute URL, the
protocol and server part are omitted from relative URL.
 Relative URLs are used for internal links i.e. to create links to file that are
part of same website as the WebPages on which you are placing the link.

For example, to link an image on

dpmishrakidiary.com/internet_technology/internet_referemce_models, we
can use the relative URL which can take the form like
/internet_technologies/internet-osi_model.jpg.

Difference between Absolute and Relative URL

Absolute URL Relative URL

Used to link web pages on different Used to link web pages within the same
websites website.

Difficult to manage. Easy to Manage

Changes when the server name or Remains same even of we change the server
directory name changes name or directory name.

Take time to access Comparatively faster to access.

Email–
 Email is a service which allows us to send the message in electronic
mode over the internet. It offers an efficient, inexpensive and real time
mean of distributing information among people.

For More Info Visit on WWW.DPMISHRA.COM

 8
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

E-Mail Address
Each user of email is assigned a unique name for his email account. This name
is known as E-mail address. Different users can send and receive messages
according to the e-mail address.
E-mail is generally of the form username@domainname. For example,
dpmishrakidiary@gmail.com is an e-mail address where dpmishrakidiary is
username and gmail.com is domain name.
 The username and the domain name are separated by @ (at) symbol.
 E-mail addresses are not case sensitive.
 Spaces are not allowed in e-mail address.

Domain Name–
When DNS was not into existence, one had to download a Host file containing
host names and their corresponding IP address. But with increase in number of
hosts of internet, the size of host file also increased. This resulted in increased
traffic on downloading this file. To solve this problem the DNS system was
introduced.

Domain Name System helps to resolve the host name to an address. It uses a
hierarchical naming scheme and distributed database of IP addresses and
associated names

IP Address
IP address is a unique logical address assigned to a machine over the network.
An IP address exhibits the following properties:
 IP address is the unique address assigned to each host present on
Internet.
 IP address is 32 bits (4 bytes) long.
 IP address consists of two components: network component and host
component.
 Each of the 4 bytes is represented by a number from 0 to 255, separated
with dots. For example 137.170.4.124

For More Info Visit on WWW.DPMISHRA.COM

 9
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Domain Name System Architecture

The Domain name system comprises of Domain Names, Domain Name Space,
Name Server that have been described below:

Domain Names
Domain Name is a symbolic string associated with an IP address. There are
several domain names available; some of them are generic such as com, edu,
gov, net etc, while some country level domain names such as au, in, za,
us etc.
The following table shows the Generic Top-Level Domain names:

Domain Name Meaning

Com Commercial business

Edu Education

Gov U.S. government agency

Int International entity

Mil U.S. military

Net Networking organization

Org Non profit organization

For More Info Visit on WWW.DPMISHRA.COM

 10
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

The following table shows the Country top-level domain names:

Domain Name Meaning

au Australia

in India

cl Chile

fr France

us United States

za South Africa

uk United Kingdom

jp Japan

es Spain

de Germany

ca Canada

ee Estonia

hk Hong Kong

For More Info Visit on WWW.DPMISHRA.COM

 11
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Domain Name Space

The domain name space refers a hierarchy in the internet naming structure.
This hierarchy has multiple levels (from 0 to 127), with a root at the top. The
following diagram shows the domain name space hierarchy:

In the above diagram each subtree represents a domain. Each domain can be
partitioned into sub domains and these can be further partitioned and so on.

Name Server
Name server contains the DNS database. This database comprises of various
names and their corresponding IP addresses. Since it is not possible for a
single server to maintain entire DNS database, therefore, the information is
distributed among many DNS servers.
 Hierarchy of server is same as hierarchy of names.
 The entire name space is divided into the zones

Zones
Zone is collection of nodes (sub domains) under the main domain. The server
maintains a database called zone file for every zone.

For More Info Visit on WWW.DPMISHRA.COM

 12
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

If the domain is not further divided into sub domains then domain and zone
refers to the same thing.

The information about the nodes in the sub domain is stored in the servers at
the lower levels however; the original server keeps reference to these lower
levels of servers.

Web Browsers–
Web Browser is an application software that allows us to view and explore
information on the web. User can request for any web page by just entering a
URL into address bar.
Web browser can show text, audio, video, animation and more. It is the
responsibility of a web browser to interpret text and commands contained in
the web page.
Earlier the web browsers were text-based while now a day’s graphical-based
or voice-based web browsers are also available. Following are the most
common web browser available today:

For More Info Visit on WWW.DPMISHRA.COM

 13
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Browser Vendor

Internet Explorer Microsoft

Google Chrome Google

Mozilla Firefox Mozilla

Netscape Navigator Netscape Communications Corp.

Opera Opera Software

Safari Apple

Sea Monkey Mozilla Foundation

K-meleon K-meleon

Search Engines–
Search Engine refers to a huge database of internet resources such as web
pages, newsgroups, programs, images etc. It helps to locate information on
World Wide Web.
User can search for any information by passing query in form of keywords or
phrase. It then searches for relevant information in its database and return to
the user.

For More Info Visit on WWW.DPMISHRA.COM

 14
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Search Engine Components

Generally there are three basic components of a search engine as listed
below:
1. Web Crawler
2. Database
3. Search Interfaces

Web crawler
It is also known as spider or bots. It is a software component that traverses
the web to gather information.

Database
All the information on the web is stored in database. It consists of huge web
resources.

Search Interfaces
This component is an interface between user and the database. It helps the
user to search through the database.

Search Engine Working

Web crawler, database and the search interface are the major component of
a search engine that actually makes search engine to work. Search engines
make use of Boolean expression AND, OR, NOT to restrict and widen the
results of a search. Following are the steps that are performed by the search
engine:
 The search engine looks for the keyword in the index for predefined
database instead of going directly to the web to search for the keyword.
 It then uses software to search for the information in the database. This
software component is known as web crawler.
 Once web crawler finds the pages, the search engine then shows the
relevant web pages as a result. These retrieved web pages generally
include title of page, size of text portion, first several sentences etc.

For More Info Visit on WWW.DPMISHRA.COM

 15
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Examples
 Following are the several search engines available today:

Search Description
Engine

Google It was originally called BackRub. It is the most popular search engine
globally.

Bing It was launched in 2009 by Microsoft. It is the latest web-based search

engine that also delivers Yahoo’s results.

Ask It was launched in 1996 and was originally known as Ask Jeeves. It
includes support for match, dictionary, and conversation question.

AltaVista It was launched by Digital Equipment Corporation in 1995. Since 2003,

it is powered by Yahoo technology.

AOL.Search It is powered by Google.

LYCOS It is top 5 internet portal and 13th largest online property according to
Media Matrix.

Alexa It is subsidiary of Amazon and used for providing website traffic

information.

Counters–
 A web counter or hit counter is a computer software program that
indicates the number of visitors, or hits, a particular webpage has
received. Once set up, these counters will be incremented by one every
time the web page is accessed in a web browser.

For More Info Visit on WWW.DPMISHRA.COM

 16
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

 The number is usually displayed as an inline digital image or in plain text.

Image rendering of digits may use a variety of fonts and styles; the
classic example is the wheels of an odometer.
 The counter is often accompanied by the date it was set up or last reset,
without which it becomes impossible to estimate within what time the
number of page loads counted occurred.
 Some web counters were simply web bugs used by webmasters to track
hits and included no visible on-page elements.
 Counters were popular in the 1990s, but were later replaced by other
web traffic measures such as self-hosted scripts like Analog, and later on
by remote systems that used JavaScript, like Google Analytics. These
systems typically do not include on-page elements displaying the count.
Thus, seeing a web counter on a modern web page is one example of
retrocomputing on the Internet.

Chat and Bulletin Board Services–

 A web chat is a system that allows users to communicate in real time
using easily accessible web interfaces. It is a type of Internet online chat
distinguished by its simplicity and accessibility to users who do not wish
to take the time to install and learn to use specialized chat software.
 This trait allows users instantaneous access and only a web browser is
required to chat. Users will always get the latest version of a chat service
because no software installation or updates are required.

Bulletin Board System (BBS)

A bulletin board system (BBS) refers to text-based online communities that
users can log into over the Internet using dedicated software. The bulletin
board system predates the World Wide Web and was a popular application for
Telnet users. Bulletin board systems were an early example of the Internet’s
ability to foster large online communities.

For More Info Visit on WWW.DPMISHRA.COM

 17
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Unit – 2
Principles of Web Design
Introduction to HTML–
HTML stands for Hyper Text Markup Language. It is a formatting language
used to define the appearance and contents of a web page. It allows us to
organize text, graphics, audio, and video on a web page.
Key Points:
 The word Hypertext refers to the text which acts as a link.
 The word markup refers to the symbols that are used to define
structure of the text. The markup symbols tells the browser how to
display the text and are often called tags.
 The word Language refers to the syntax that is similar to any other
language.
HTML was created by Tim Berners-Lee at CERN.

Elements of HTML Syntax–

 HTML provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links,
quotes and other items. HTML elements are delineated by tags, written
using angle brackets. Tags such as <img /> and <input /> directly
introduce content into the page.
 The name of an HTML element is the name used in the tags. Note that
the end tag's name is preceded by a slash character, /, and that in empty
elements the end tag is neither required nor allowed. If attributes are
not mentioned, default values are used in each case.

Element examples

Header of the HTML document: <head>...</head>. The title is included in the

head, for example:

<head>

For More Info Visit on WWW.DPMISHRA.COM

 18
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

<title>The Title</title>

</head>

Head and Body sections–

 The <head> element is the one that comes next. While you put it in
between html and body everything should be just fine. "Head" has no
visible function, so we will talk about this aspect in the next tutorials.
Even though I want to mention that <head> can offer to the browser
very useful information. You can introduce here other cods like
JavaScript or CSS.

For the moment we will let this tag empty, and we will introduce the next
element from the list, but first lets take a look without him:

<html>

<head>

</head>

</html>

Body Section
 The body element is the one that defines the beginning of the page
content itself (titles, paragraphs, photos, music and any other content).
As you can see in the menu from the left, we will talk about all elements
one by one.

For now all you need to keep in mind is that body covers all the content of the
page.

<html>

<head>

<title> My first web page!</title>

</head>

For More Info Visit on WWW.DPMISHRA.COM

 19
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

<body>

Hey guys! Here we will put the content later !

</body>

</html>

Building HTML Documents–

 You can use any text editor to compose and modify HTML text. Examples
of text editors include MS-DOS's EDIT, PC-DOS's E, MS-Windows
Notepad, the VMS EVE editor, the Unix vi, emacs, pico, or jove editors.
Any of these will suffice. You can even use a word processor and then
save your work as a text file.
 There are programs available that will take a data file you create with a
word processor or desktop publishing program and convert it to HTML
information. There are also HTML-specific editors available.
 But it is possible, even easy, to create HTML documents with a common
text editor. In fact, you'll probably develop a better understanding of
how HTML works. First, let's examine a sample HTML document:

<html>

<head>

<title>A Sample Document<title>

<head>

<body>

<h1>This is a Sample Document<h1>

<!-- This is a comment-->

<hr>

<p>Over <a href="other.html">here<a>

<a href="https://dpmishrakidiary/">Study Materials<a><p>

For More Info Visit on WWW.DPMISHRA.COM

 20
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

<body>

<html>

Inserting Text–
We can use <p>………</p> tag for inserting the text in our HTML Documents.

HTML uses elements like <b> and <i> for formatting output,
like bold or italic text.

Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

Images–
Images can improve the design and the appearance of a web page.

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing
tag.

The src attribute specifies the URL (web address) of the image:

<img src="url">

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

For More Info Visit on WWW.DPMISHRA.COM

 21
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Example
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Hyperlinks–
HTML links are hyperlinks. You can click on a link and jump to another
document. When you move the mouse over a link, the mouse arrow will turn
into a little hand.

Note: A link does not have to be text. It can be an image or any other HTML
element.

Syntax

Hyperlinks are defined with the HTML <a> tag:

<a href="url">link text</a>

Example
<a href="https://www.dpmishrakidiary.com/study-material/">Visit our Study
Material Page</a>

Background and color control–

HTML colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA, HSLA values.

HTML supports 140 standard color names.

Background Color
You can set the background color for HTML elements:

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color
You can set the color of text:

For More Info Visit on WWW.DPMISHRA.COM

 22
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>

Border Color
You can set the color of borders:

Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>

Ordered and Unordered List–

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>

For More Info Visit on WWW.DPMISHRA.COM

 23
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

<li>Milk</li>
</ol>

Content Layout & Presentation–

Structure consists of the mandatory parts of an HTML document plus the
semantic and structured markup of its contents.

Presentation is the style you give the content. In most cases presentation is
about the way a document looks, but it can also affect how a document sounds
– not everybody uses a graphical web browser.

Separate structure from presentation as much as possible. Ideally you should

end up with an HTML document which contains the structure and content, and
a separate CSS file which contains everything that controls presentation.

HTML Tags
Tag is a command that tells the web browser how to display the text, audio,
graphics or video on a web page.
Key Points:
 Tags are indicated with pair of angle brackets.
 They start with a less than (<) character and end with a greater than (>)
character.
 The tag name is specified between the angle brackets.
 Most of the tags usually occur in pair: the start tag and the closing tag.
 The start tag is simply the tag name is enclosed in angle bracket
whereas the closing tag is specified including a forward slash (/).
 Some tags are the empty i.e. they don’t have the closing tag.
 Tags are not case sensitive.
 The starting and closing tag name must be the same. For example <b>
hello </i> is invalid as both are different.
 If you don’t specify the angle brackets (<>) for a tag, the browser will
treat the tag name as a simple text.
 The tag can also have attributes to provide additional information about
the tag to the browser.

For More Info Visit on WWW.DPMISHRA.COM

 24
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Use of Different HTML Tags in web Pages –

Basic tags
The following table shows the Basic HTML tags that define the basic web
page:

Tag Description

<html> </html> Specifies the document as a web page.

<head> </head> Specifies the descriptive information about the web documents.

<title> </title> Specifies the title of the web page.

<body> </body> Specifies the body of a web document.

The following code shows how to use basic tags.

<html>
<head> Heading goes here…</head>
<title> Title goes here…</title>
<body> Body goes here…</body>
</html>

Formatting Tags
The following table shows the HTML tags used for formatting the text:

Tag Description

<b> </b> Specifies the text as bold. Eg. this is bold text

<em> </em> It is a phrase text. It specifies the emphasized text.

Eg. Emphasized text

For More Info Visit on WWW.DPMISHRA.COM

 25
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

<strong> It is a phrase tag. It specifies an important text. Eg. this is strong

</strong> text

<i> </i> The content of italic tag is displayed in italic. Eg. Italic text

 Specifies the subscripted text. Eg. X1

 Defines the superscripted text. Eg. X2

<ins> </ins> Specifies the inserted text. Eg. The price of pen is now 2015.

<del> </del> Specifies the deleted text. Eg. The price of pen is now 2015.

<mark> </mark> Specifies the marked text. Eg. It is raining

Table Tags
Following table describe the commonly used table tags:

Tag Description

<table> </table> Specifies a table.

<tr> </tr> Specifies a row in the table.

<th> </th> Specifies header cell in the table.

<td> </td> Specifies the data in an cell of the table.

<caption> </caption> Specifies the table caption.

For More Info Visit on WWW.DPMISHRA.COM

 26
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

<colgroup> </colgroup> Specifies a group of columns in a table for formatting.

List tags
Following table describe the commonly used list tags:

Tag Description

<ul> </ul> Specifies an unordered list.

<ol> </ol> Specifies an ordered list.

<li> </li> Specifies a list item.

<dl> </dl> Specifies a description list.

<dt> </dt> Specifies the term in a description list.

<dd> </dd> Specifies description of term in a description list.

Frames
Frames help us to divide the browser’s window into multiple rectangular
regions. Each region contains separate html web page and each of them work
independently.
A set of frames in the entire browser is known as frameset. It tells the browser
how to divide browser window into frames and the web pages that each has to
load.

For More Info Visit on WWW.DPMISHRA.COM

 27
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

The following table describes the various tags used for creating frames:

Tag Description

<frameset> It is replacement of the <body> tag. It doesn’t contain the tags that
</frameset> are normally used in <body> element; instead it contains the
<frame> element used to add each frame.

<frame> Specifies the content of different frames in a web page.

</frame>

<base> </base> It is used to set the default target frame in any page that contains
links whose contents are displayed in another frame.

Forms
Forms are used to input the values. These values are sent to the server for
processing. Forms uses input elements such as text fields, check boxes, radio
buttons, lists, submit buttons etc. to enter the data into it.
The following table describes the commonly used tags while creating a form:

Tag Description

<form> </form> It is used to create HTML form.

<input> </input> Specifies the input field.

<textarea> Specifies a text area control that allows to enter multi-line

</textarea> text.

<label> </label> Specifies the label for an input element.

For More Info Visit on WWW.DPMISHRA.COM

 28
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Table Handling
Table Layout and presentation–
The HTML tables allow web authors to arrange data like text, images, links,
other tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is
used to create table rows and <td> tag is used to create data cells. The
elements under <td> are regular and left aligned by default

Example

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Tables</title>
</head>

<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

</body>
</html>

For More Info Visit on WWW.DPMISHRA.COM

 29
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Constructing table in a Web Page–

Tables let you organize information on your Web page and give it an organized
look that your visitors will find useful. When used as intended, tables have
rows and columns. For each spot where a row and column intersect, you have
a table cell. Each cell can have its own formatting: the data in it can be aligned
left, center, or right, formatted, and so on. Tables also have header-data cells,
in which you put the column headings. You can create a table in Notepad.
Here’s the HTML code for a simple table of this type:

<TABLE BORDER=2>
<TR><TH><B>Production (tons)</B></TH><TH><B>% of goal</B></TH></TR>
<TR><TD><I>>North 40</I></TD><TD>87</TD><TD>102%</TD></TR>
<TR><TD><I>South 40</I></TD><TD>93</TD><TD>110%</TD></TR>
</TABLE>

This is how this simple table looks in HTML and when viewed in Internet
Explorer.

For More Info Visit on WWW.DPMISHRA.COM

 30
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Developing a Web Page in a Table–

The simplest and most popular way of creating layouts is using HTML <table>
tag. These tables are arranged in columns and rows, so you can utilize these
rows and columns in whatever way you like.
Example:
For example, the following HTML layout example is achieved using a table
with 3 rows and 2 columns but the header and footer column spans both
columns using the colspan attribute −
<!DOCTYPE html>
<html>

<head>
<title>Web page using Table</title>
</head>

<body>
<table width = "100%" border = "0">

<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>

<td bgcolor = "#eee" width = "100" height = "200">

Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>

For More Info Visit on WWW.DPMISHRA.COM

 31
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Copyright © 2019 DPMISHRAKIDIARY.COM

</center>
</td>
</tr>

</table>
</body>

</html>

This will produce the following result −

For More IInfo Visit on WWW.DPMISHRA.COM

 32
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Unit – 3
HTML Editors and Tools
 HTML Editor Tools is a collection of free online resources that make web
content composing easier than ever. Work with HTML code directly in
your web browser without downloading and installing any suspicious
software. With a powerful cross browser and device compatibility
this HTML Editor will save you loads of time.
 An HTML editor is a tool for editing or evaluating code in hypertext
markup language (HTML).

Use of Different HTML Editors and tools like Netscape Communicator and
Microsoft Front Page –

An HTML editor. Remember: With these HTML editors, you'll want to have
more than a basic understanding of HTML. These tools can help you fix
mistakes, but they can't write your code for you.

Netscape Communicator-
 Netscape Communicator (or Netscape 4) is a discontinued Internet suite
produced by Netscape Communications Corporation, and was the fourth
major release in the Netscape line of browsers.
 It was first in beta in 1996 and was released in June 1997. Netscape
Communicator addressed the problem of Netscape Navigator 3.x being
used as both the name of the suite and the browser contained within it
by renaming the suite to Netscape Communicator. It included more
groupware features intended to appeal to enterprises.
 Netscape Composer is a WYSIWYG HTML editor initially developed by
Netscape Communications Corporation in 1997, and packaged as part of
the Netscape Communicator, Netscape 6 and Netscape 7 range of
Internet suites.
 In addition, Composer can also view and edit HTML code, preview pages
in Netscape Navigator, check spelling, publish websites, and supports
most major types of formatting.

For More Info Visit on WWW.DPMISHRA.COM

 33
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Microsoft front Page

 FrontPage is a Microsoft program used to create and edit HTML
documents.
 It can be used to create large complex Web sites.
 FrontPage is a WYSIWYG (what-you-see-is-what-you-get) editor,
meaning that you can create the Web page exactly as you want it to look
on the screen, and the program adds the HTML source code necessary to
make sure that the page looks right in a Web browser.
 FrontPage allows you to FTP, or publish, your site through FrontPage.
This section of the manual will take you through all of the necessary
steps to publish your web directly from FrontPage.

Basic Settings
To publish your Web site to our servers, you will need to use the following
information:

 Publish destination: http://www.yourdomain.com

 Username: yourdomain
 Password: yourpassword

You will need to replace the above text with your own FrontPage account
information.

Graphical and Animation Techniques

Use of Different Graphical and animation tools like Adobe Photoshop and Gif
Animator etc –

 Animation is not just for cartoons anymore. From full-screen moving

images to small hover effects, touches of animation are popping up
everywhere. Animation is trendy, fun and user friendly.
 And the obstacles to using animation have started to fall. With most
users on high-speed connections and the ease of creating anything from
simple movements or a silly gif to several minutes of action, animations
have become practical and useful web design tools.

For More Info Visit on WWW.DPMISHRA.COM

 34
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Use of Adobe Photoshop in Web design

PhotoShop is one of the most popular software programs for image editing. ...
Web designers prefer to create their designs in PhotoShop first then convert it
into HTML format. Many times, the designers do not handle the conversion
jobs themselves but it is done by the coding experts.

Use of Gif Animator in Web Design

 This software is used for creating the gif animation for web pages that
are inserted in web page by using html.
 Animated GIF inserting to HTML is similar to image inserting. For
example, you can insert animated GIF to HTML with IMG tag:
<IMG SRC="animation1.gif">. Tag IMG must be inserted between and
tags.

For More Info Visit on WWW.DPMISHRA.COM

 35
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Unit – 4
Interactivity
An interactive web design is a design for websites which uses other inbuilt
software, modules or features aimed at creating an environment for a website
or web application user to be actively engaged during visit or use as the case
may be, thereby improving his or her user experience (UX).

Clint Server Model–

The client-server model is a distributed communication framework of network
processes among service requestors, clients and service providers. The client-
server connection is established through a network or the Internet.

The client-server model is a core network computing concept also building

functionality for email exchange and Web/database access. Web technologies
and protocols built around the client-server model are:

 Hypertext Transfer Protocol (HTTP)

 Domain Name System (DNS)
 Simple Mail Transfer Protocol (SMTP)
 Telnet

Clients include Web browsers, chat applications, and email software, among
others. Servers include Web, database, application, chat and email, etc.
Static and Dynamic web pages–
 Web pages can be either static or dynamic. "Static" means unchanged or
constant, while "dynamic" means changing or lively. Therefore, static
Web pages contain the same prebuilt content each time the page is
loaded, while the content of dynamic Web pages can be generated on-
the-fly.

For More Info Visit on WWW.DPMISHRA.COM

 36
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Difference between Static vs. Dynamic web Pages

Static Website Dynamic Website

Prebuilt content is same Content is generated quickly and changes regularly.

every time the page is
loaded.

It uses the HTML code for It uses the server side languages such as PHP,SERVLET, JSP, and
developing a website. ASP.NET etc. for developing a website.

It sends exactly the same It may generate different HTML for each of the request.
response for every request.

The content is only The page contains "server-side" code which allows the server to
changed when someone generate the unique content when the page is loaded.
publishes and updates the
file (sends it to the web
server).

Flexibility is the main Content Management System (CMS) is the main advantage of
advantage of static dynamic website.
website.

For More Info Visit on WWW.DPMISHRA.COM

 37
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Creating Forms–
 HTML Form is a document which stores information of a user on a web
server using interactive controls. An HTML form contains different kind
of information such as username, password, contact number, email id
etc.
 The elements used in an HTML form are check box, input box, radio
buttons, submit buttons etc. Using these elements the information of an
user is submitted on a web server.
The form tag is used to create an HTML form.

Example of an HTML Form :

<!DOCTYPE html>

<html>

<body>

<form>

Username:<br>

<input type="text" name="username">

<br>

Email id:<br>

<input type="text" name="email_id">

<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

For More Info Visit on WWW.DPMISHRA.COM

 38
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Output :

CGI–
 The Common Gateway Interface (CGI) provides the middleware
between WWW servers and external databases and information
sources. The World Wide Web Consortium (W3C) defined the Common
Gateway Interface (CGI) and also defined how a program interacts with a
Hyper Text Transfer Protocol (HTTP) server.
 The Web server typically passes the form information to a small
application program that processes the data and may send back a
confirmation message. This process or convention for passing data back
and forth between the server and the application is called the common
gateway interface (CGI).

Features of CGI:
 It is a very well defined and supported standard.
 CGI scripts are generally written in either Perl, C, or maybe just a
simple shell script.
 CGI is a technology that interfaces with HTML.
 CGI iss the best method to create a counter because it is currently the
quickest
 CGI standard is generally the most compatible with today’s browsers

Advantages of CGI:
 The advanced tasks are currently a lot easier to perform in CGI than in
Java.
 It is always easier
ier to use the code already written than to write your
own.
 CGI specifies that the programs can be written in any language, and on
any platform, as long as they conform to the specification.

For More IInfo Visit on WWW.DPMISHRA.COM

 39
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

 CGI-based counters and CGI code to perform simple tasks are available
in plenty.

Disadvantages of CGI:
 There are some disadvantages of CGI which are given below:
 In Common Gateway Interface each page load incurs overhead by having
to load the programs into memory.
 Generally, data cannot be easily cached in memory between page loads.
 There is a huge existing code base, much of it in Perl.
 CGI uses up a lot of processing time.

Role of Databases in Web Applications–

 The primary role of a database is to store and display updated
information in a web application. Registration websites, discussion
forums and retail commerce websites are examples of web applications
that depend upon a robust database component.

Function

Database applications are used to search, sort, filter and present information
based upon web requests from users. Databases can also contain code to
perform mathematical and statistical calculations on the data to support
queries submitted from web browsers.

Features

Databases grant and limit access to data based upon criteria such as user
name, password, region or account number. Databases also enforce data
integrity by ensuring that data is collected and presented using a consistent
format.

Effects

A dynamic website displays updated information on web pages when the

database is updated by the host or when users submit information using web
forms. The database automatically updates web pages, eliminating the
requirement to manually update the HTML code on individual pages.

For More Info Visit on WWW.DPMISHRA.COM

 40
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Unit – 5
Web Technologies
The methods by which computers communicate with each other through the
use of markup languages and multimedia packages is known as web
technology. In the past few decades, web technology has undergone a
dramatic transition, from a few marked up web pages to the ability to do very
specific work on a network without interruption.

Overview of various web technologies and their

Applications
Java Script–
Introduction:
JavaScript is a lightweight, interpreted programming language with object-
oriented capabilities that allows you to build interactivity into otherwise static
HTML pages.
JavaScript code is not compiled but translated by the translator. This translator
is embedded into the browser and is responsible for translating javascript
code.
Key Points
 It is Lightweight, interpreted programming language.
 It is designed for creating network-centric applications.
 It is complementary to and integrated with Java.
 It is complementary to and integrated with HTML
 It is an open and cross-platform

JavaScript Statements:
JavaScript statements are the commands to tell the browser to what action to
perform. Statements are separated by semicolon (;).

For More Info Visit on WWW.DPMISHRA.COM

 41
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

JavaScript statement constitutes the JavaScript code which is translated by the

browser line by line.
Example of JavaScript statement:
document.getElementById("demo").innerHTML = "Welcome";
Following table shows the various JavaScript Statements −

Sr.No. Statement Description

1. switch case A block of statements in which execution of code depends upon different
cases. The interpreter checks each case against the value of the expression
until a match is found. If nothing matches, a default condition will be used.

2. If else The if statement is the fundamental control statement that allows

JavaScript to make decisions and execute statements conditionally.

3. While The purpose of a while loop is to execute a statement or code block

repeatedly as long as expression is true. Once expression becomes false,
the loop will be exited.

4. do while Block of statements that are executed at least once and continues to be
executed while condition is true.

JavaScript Data Type:

There are two kinds of data types as mentioned below −
 Primitive Data Type
 Non Primitive Data Type
The following table describes Primitive Data Types available in javaScript

Sr.No. Data type Description

1. String

Can contain groups of character as single value. It is represented in double quotes.E.g.

var x= “tutorial”.

For More Info Visit on WWW.DPMISHRA.COM

 42
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

2. Numbers
Contains the numbers with or without decimal. E.g. var x=44, y=44.56;

3. Booleans
Contain only two values either true or false. E.g. var x=true, y= false.

4. Undefined
Variable with no value is called Undefined. E.g. var x;

5. Null
If we assign null to a variable, it becomes empty. E.g. var x=null;

The following table describes Non-Primitive Data Types in javaScript

Sr.No. Datatype Description

1. Array
Can contain groups of values of same type. E.g. var x={1,2,3,55};

2. Objects
Objects are stored in property and value pair. E.g. var rectangle = { length: 5, breadth: 3};

Creating Sample Program:

Following is the sample program that shows time, when we click in button.
<html>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
<p>Click to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}</script>

<p id="demo"></p>
</script>

For More Info Visit on WWW.DPMISHRA.COM

 43
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

</body>
</html>
Output:

Active Server Pages–

 Active Server Pages (also known as ASP or classic ASP) is Microsoft’s first
server-side script engine that enabled dynamically-generated web
pages. While the initial release was an add-on to the Internet
Information Services (IIS) component of Windows NT 4.0, it was later
incorporated into the Windows Server operating system.
 ASP employs server-side scripting to dynamically produce web pages
based on a specific request from the client. The result is a HTML
webpage sent back to the client for display. VBScript is the default
scripting language used for writing ASP, although other scripting
languages can be used.
 ASP is now obsolete and replaced with ASP.NET. Though, ASP.NET is not
strictly an enhanced version of ASP; the two technologies have
completely different underlying implementations. ASP.NET is a compiled
language and relies on the .NET Framework.

For More Info Visit on WWW.DPMISHRA.COM

 44
Digital Notes on Web Designing for BCA 5th Semester created by D.P.Mishra

Macromedia Flash–
 Macromedia Flash is a tool that allows powerful animations, interactive
features and other complex elements to be embedded in Web pages.

 It got its start in the mid-'90s as an animation tool called FutureSplash,

built by a company called FutureWave. FutureWave distributed a tool
called FutureSplash Animator that content creators could use to build
cartoons. It also provided a second product called FutureSplash Player,
which was an early Web browser plugin that could make the animations
appear on websites that featured them.

Embedding Java applets in a web pages–

 An applet is a tiny application that adds dynamic content to the larger
web application in which it is embedded. Within the HTML environment,
the applet is recognized by an <applet> tag enabling the HTML browser
to invoke the applet class.
 An applet is a program written in the Java programming language that
can be included in an HTML page, much in the same way an image is
included in a page.

The HTML <applet> tag specifies an applet. It is used for embedding a Java
applet within an HTML document.

Example:

<!DOCTYPE html>
<html>

<head>
<title>HTML applet Tag</title>
</head>

<body>
<applet code = "newClass.class" width = "300" height = "200"></applet>
</body>

</html>

For More Info Visit on WWW.DPMISHRA.COM