PRACTICAL FILE

WEB DESIGNING AND DEVELOPMENT

Submitted in the partial fulfillment of the degree of

BACHELOR OF BUSINESS ADMINISTRATION
COMPUTER AIDED MANAGEMENT
BBA (CAM)
(2018-2021)

SUBMITTED BY: ANJALI PRASAD

ROLL NO: 00213401918

Under the guidance of

Dr. Seema Gupta
(Associate Professor)

Ideal Institute of Management & Technology

16-x Karkardooma Institutional Area, Delhi-92
(Affiliated to Guru Gobind Singh Indraprastha University)
 CERTIFICATE

This is to certify that the Practical file of WEB DESIGNING AND

DEVELOPMENT is submitted by Anjali Prasad in partial fulfillment of the
requirement for the award of degree of Bachelor of Business Administration
(CAM) to Ideal Institute of Management and Technology & School of Law
(affiliated to GGSIP University, Delhi) is a record of the candidate’s own work
carried out by him/her under my supervision. The matter embodied in this
report is bonafide and has not been submitted for the award of any other degree.

Dr. Seema Gupta

(Associate Professor)
 ACKNOWLEDGEMENT

Behind every task undertaken, there are several people whose

gracious motivation leads to its success. I take it as my privilege to
express my gratitude and few words of thanks and thanks to all those
who directly or indirectly guided and inspired me in the task of
learning.

I express my great sense of gratitude to my mentor Dr. Seema Gupta

for her personal involvement in every facet of this work and readiness
to resolve any point of confusion by mutual discussion and
encouragement.

ANJALI PRASAD
ENROLLMENT NO.:00213401918
 INDEX

SNO. Particular Page no sign

1 Introduction to HTML 6
2 Give Illustration of text formatting 7
3 Write a program to show all headings 12
4 Give illustration of pre tag and comment tag 13
5 Give illustration of div tag 15
6 Write illustration of font tag and base font 16
7 Explain Ordered List, Unordered List, Definition List, Directory List & 18
Menu List with the help of an example with its attributes
8 Give example of nested list 24
9 Illustrate Image Tag with its attribute 26
10 Explain Anchor Tag with the help of an example with its attribute 27
11 Make the following table with help of html tags 29
12 Make following table with the help of html code through Colspan 31
13 Illustrate Frame Tag with the help of html code 32
14 Prepare an Application form 34
15 Write a program to demonstrate implementation of CSS 37
HTML
 INTRODUCTION TO HTML.
HTML stands for Hyper Text Markup Language. It is used to design web pages
using markup language. HTML is the combination of Hypertext and Markup
language. Hypertext defines the link between the web pages. Markup language
is used to define the text document within tag which defines the structure of
web pages. This language is used to annotate (make notes for the computer) text
so that a machine can understand it and manipulate text accordingly. Most of
markup (e.g. HTML) languages are human readable. Language uses tags to
define what manipulation has to be done on the text.
HTML is a markup language which is used by the browser to manipulate text,
images and other content to display it in required format. HTML was created by
Tim Berners-Lee in 1991. The first ever version of HTML was HTML 1.0 but
the first standard version was HTML 2.0 which was published in 1999.

Elements and Tag: HTML uses predefined tags and elements which tells the
browser about content display property. If a tag is not closed then browser
applies that effect till end of page. Eg: <p>introduction to HTML</p>

HTML page structure: The Basic structure of HTML page is given below. It

contains some elements like head, title, body, … etc. These elements are used to
build the blocks of web pages.

<DOCTYPE! html>: This tag is used to tells the HTML version. This

currently tells that the version is HTML 5.
 1. GIVE ILLUSTRATION OF TEXT FORMATTING
HTML contains several elements for defining text with a special meaning.

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text &<big>- Bigger Text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

<b>- Bold Text-(Bold Tag)

<strong> - Important Text –(Strong Tag)

<i> - Italic text–(Italic Tag)

 <em> -

Emphasized text–(Emphasized Tag)

<mark> - Marked text

<small> - Smaller text &<big>- Bigger Text

<del> - Deleted text

<ins> - Inserted text

<sub> -

Subscript text
 <sup> -
Superscript
text

2. WRITE AN HTML PROGRAM TO SHOW ALL

HEADINGS
HTML headings are titles or subtitles that you want to display on a webpage.
HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most
important heading. <h6> defines the least important heading.

3. GIVE ILLUSTRATION OF PRE-TAG AND COMMENT

TAG?

Pre-Tag:

The
HTML <pre> 
element
defines
preformatted
text. The text
inside
a <pre> eleme
nt is displayed
in a fixed-
width font
and it
preserves both

spaces and line breaks.

Comment Tag
HTML comments are not displayed in the browser, but they can help document
your HTML source code. With comments you can place notifications and
reminders in your HTML code. Comments are also great for debugging HTML,
because you can comment out HTML lines of code, one at a time, to search for
errors.
 4. GIVE ILLUSTRATION OF DIV TAG
Div tag:
The div tag is known as Division tag. The div tag is used in HTML to make
divisions of content in the web page like (text, images, header, footer,
navigation bar, etc). Div tag has both open(<div>) and closing (</div>) tag and
it is mandatory to close the tag. The Div is the most usable tag in web
development because it helps us to separate out data in the web page and we can
create a particular section for particular data or function in the web pages.
 Div tag is Block level tag
 It is a generic container tag
 It is used to the group of various tags of HTML so that sections can be
created and style can be applied to them.
 5. WRITE AN ILLUSTRATION OF FONT TAG AND BASE
FONT TAG

Font Tag: The HTML <font> tag defines the font size, color and
face of text in the HTML document. This tag is also commonly
referred to as the <font> element.
Basefont tag
The HTML <basefont> tag defines the default font-family, font-size
and color for the text in the HTML document. This tag is also
commonly referred to as the <basefont> element.
 6. EXPLAIN ORDERED LIST, UNORDERED LIST,
DEFINITION LIST, DIRECTORY LIST & MENU LIST
WITH THE HELP OF AN EXAMPLE WITH ITS
ATTRIBUTES.
Ordered 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.

RESULT:
Unordered list:
An unordered list is a collection of related items that have no special order or
sequence. This list is created by using HTML <ul> tag. Each item in the list is
marked with a bullet (disc), square, circle.
Definition / Description list:
HTML supports a list style which is called definition lists where entries are
listed like in a dictionary or encyclopedia. The definition list is the ideal way to
present a glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.

 <dl> − Defines the start of the list

 <dt> − A term
 <dd> − Term definition
 </dl> − Defines the end of the list

Directory list:
The <dir> (short for directory) tag specifies a directory list. It was designed to
be used for creating multicolumn directory lists.

Menu list:
The <menu> tag defines a list/menu of commands.

The <menu> tag is used for context menus, toolbars and for listing form
controls and commands.
 7. GIVE EXAMPLE OF NESTED LIST

Nested list:
A nested list or a sub list is a list within a list. The trick to marking nested
lists up correctly in HTML is to recognize that the sub list is actually a child of
a list item and not of a list. Start by creating a list. It can be unordered or
ordered: 

Unordered html:

Ordered List:
 8. 8. ILLUSTRATE IMAGE TAG WITH ITS ATTRIBUTE

Image tag:
The <img> tag is
used to embed an
image in an
HTML page.

Images are not

technically
inserted into a
web page; images
are linked to web
pages.
The <img> tag
creates a holding
space for the
referenced image.

The <img> tag
has two required
attributes:

 src - Specifies the path to the image

  alt - Specifies an alternate text for the image, if the image for some reason
cannot be displayed

9. EXPLAIN ANCHOR TAG WITH THE HELP OF AN

EXAMPLE WITH ITS ATTRIBUTE

Anchor Tag
The HTML anchor tag defines a hyperlink that links one page to another page.
It can create hyperlink to other web page as well as files, location, or any URL.
The "href" attribute is the most important attribute of the HTML a tag. and

which links to destination page or URL.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other
words, it points out the destination page.
10. MAKE THE FOLLOWING TABLE WITH THE HELP OF
HTML TAGS

BBA BBA BA LLB

CAM

Sem 1 Sem 1 Sem 1

Sem 2 Sem 2 Sem 2

Sem 3 Sem 3 Sem 3

Sem 4 Sem 4 Sem 4

Sem 5 Sem 5 Sem 5

Sem 6 Sem 6 Sem 6

Sem 7

Sem 8

Sem 9

Sem 10
11. MAKE FOLLOWING TABLE WITH THE HELP OF HTML
CODE THROUGH
  Colspan
WDD

SDM FM

MIS CB STP

WDD LAB

12. ILLUSTRATE FRAME TAG WITH THE HELP OF HTML

CODE
Frame Tag
HTML frames are used to divide your browser window into multiple sections
where each section can load a separate HTML document. A collection of frames
in the browser window is known as a frameset. The window is divided into
frames in a similar way the tables are organized: into rows and columns.

Vertical Frame:
Horizontal Frame:
PREPARE AN APPLICATION FORM.
Coding:
<html>
<head>
<title>ApplicationForm</title>
</head>
<body bgcolor="grey">
<h1>ApplicationForm</h1>
<br>
<br>
<form>
<label> Firstname</label>
<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>
<label>
Course:
</label>
<select>
<option value="Course">Course</option>
<option value="BBA">BBA</option>
<option value="BBA(CAM)">BBA(CAM)</option>
<option value="LLB">LLB</option>
</select>
<br>
<br>
<label>
Gender:
</label><br>
<input type="radio" name="male"/> Male<br>
<input type="radio" name="female"/> Female<br>
<input type="radio" name="other"/> other
<br>
<br>
<label>
phone:
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address:
<br>
<textarea cols="80"rows="5"value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="password" id="pass" name="pass"> <br>
<br> <br>
Re-type password:
<input type="password" id="repass" name="repass"> <br> <br>
<input type="button" value= "submit"/>
</form>
</body>
</html>
Result:
13. WRITE A PROGRAM TO DEMONSTRATE
IMPLEMENTATION OF CSS.

Inline CSS:

External CSS:
Internal CSS:
JAVASCRIPT
S.No Topic Page Sign And
No Remarks
1 Implementation of looping in JavaScript 44
Program to display Fibonacci: for loop
2 Program to display factorial of a number 45
3 Program to display Armstrong: while loop 46
4 Program to check whether the given number is 47
prime number: for loop
5 Program to check whether given year is leap year 49

6 Program to display the implementation of if, if else, 50

if else if, statement.
7 Program to display the implementation of Switch 52
statement
8 Program to display implementation of functions in 53
JavaScript
9 Program to display implementation of Arrays in 55
JavaScript
10 Program to Display Implementation of JavaScript 56
String
11 Program to display implementation of JavaScript 61
string methods

12 Program to display implementation of JavaScript 67

math object.
13 Program to display implementation of events. 72

14 Program to display implementation of external file 73

in JavaScript
15 Program to display implementation of date object 74

INDEX

INTRODUCTION TO JAVASCRIPT
JavaScript is used mainly for enhancing the interaction of a user with the
webpage. In other words, you can make your webpage livelier and more
interactive, with the help of JavaScript. JavaScript is also being used widely in
game development and Mobile application development.

JAVASCRIPT HISTORY

JavaScript was developed by Brendan Eich in 1995, which appeared in

Netscape, a popular browser of that time.

The language was initially called LiveScript and was later renamed JavaScript.
There are many programmers who think that JavaScript and Java are the same.
In fact, JavaScript and Java are very much unrelated. Java is a very complex
programming language whereas JavaScript is only a scripting language. The
syntax of JavaScript is mostly influenced by the programming language C.

Modern JavaScript is a “safe” programming language. It does not provide low-

level access to memory or CPU, because it was initially created for browsers
which do not require it. JavaScript’s capabilities greatly depend on the
environment it’s running in.

FEATURES OF JAVASCRIPT

There are following features of JavaScript:

  All popular web browsers support JavaScript as they provide built-in
execution environments.
 JavaScript follows the syntax and structure of the C programming
language. Thus, it is a structured programming language.
 JavaScript is a weakly typed language, where certain types are implicitly
cast (depending on the operation).
 JavaScript is an object-oriented programming language that uses
prototypes rather than using classes for inheritance.
 It is a light-weighted and interpreted language.
 It is a case-sensitive language.
 JavaScript is supportable in several operating systems including,
Windows, macOS, etc.
 It provides good control to the users over the web browsers.

APPLICATION OF JAVASCRIPT

 JavaScript is used to create interactive websites. It is mainly used for:

 Client-side validation,
 Dynamic drop-down menus,
 Displaying date and time,
 Displaying pop-up windows and dialog boxes (like an alert dialog box,
confirm dialog box and prompt dialog box),
 Displaying clocks etc.
1. Implementation of looping in JavaScript
Program to display Fibonacci: for loop

2. Program to display factorial of a number

3. Program to display Armstrong: while loop
4. Program to check whether the given number is prime
number: for loop
5. Program to check whether the give

6. Program to check whether given year is leap year

 7. Program to display the implementation of if, if else, if else if,
statement.
IF STATEMENT
If else Statement:
If else if statement:

8. Program to display the implementation of Switch statement:

9. Program to display implementation of functions in JavaScript.
A function is a group of reusable code which can be called anywhere in your
program. This eliminates the need of writing the same code again and again.
CALLING A FUNCTION
The call() method is a predefined JavaScript method. It can be used to invoke
(call) a method with an owner object as an argument (parameter).

Syntax:

Output:

Function Parameters
Function parameters are the names listed in the function definition.
 10. Program to display implementation of Arrays in JavaScript
Array
An array is used to store a collection of data, but it is often more
useful to think of an array as a collection of variables of the same
type.
 11. Program to Display Implementation of JavaScript String
JavaScript strings are used for storing and manipulating text.
Output:
 12. Program to display implementation of JavaScript string
methods
JavaScript String charAt(index) Method
The JavaScript String charAt() method returns the character at the
given index.

JavaScript String lastIndexOf(str) Method

The JavaScript String lastIndexOf(str) method returns the last index
position of the given string
JavaScript String toUpperCase() Method
The JavaScript String toUpperCase() method returns the given string
in uppercase letters

JavaScript String toLowerCase() Method

The JavaScript String toLowerCase() method returns the given string
in lowercase letters.
JavaScript String slice (beginIndex, endIndex) Method
The JavaScript String slice beginIndex, endIndex) method returns the

parts of string from given beginIndex to

endIndex. In slice() method, beginIndex is
inclusive and endIndex is exclusive.

JavaScript String split() Method

It splits a string into substring array, then
returns that newly created array.
JavaScript String trim() Method
The JavaScript String trim() method removes leading and trailing
whitespaces from the string.

13. Program to display implementation of JavaScript math

object.
The JavaScript math object provides several constants and methods to perform
mathematical operation. Unlike date object, it doesn't have constructors.
Math.round(n)

The JavaScript math.round(n) method returns the rounded integer nearest for
the given number. If fractional part is equal or greater than 0.5, it goes to upper
value 1 otherwise lower value 0. For example, 4 for 3.7, 3 for 3.3, 6 for 5.9 etc.

Math.pow(m,n)

The JavaScript math.pow(m,n) method returns the m to the power of n that is

mn.
Math.sqrt(n)
The JavaScript math.sqrt(n) method returns the square root of the given number.

Math.abs(n)

The JavaScript math.abs(n) method returns the absolute value for the given
number. For example 4 for -4, 6.6 for -6.6 etc.
Math.ceil(n)

The JavaScript math.ceil(n) method returns the largest integer for the given
number. For example 4 for 3.7, 6 for 5.9 etc.

Math.floor(n)

The JavaScript math.floor(n) method returns the lowest integer for the given
number. For example 3 for 3.7, 5 for 5.9 etc.
JavaScript Math max() method

The JavaScript math max() method compares the given numbers and returns the
maximum value.
JavaScript Math min() method

The JavaScript math min() method compares the given numbers and returns the
minimum value.

JavaScript Math sin() method

The JavaScript math sin() method returns the sine of the given number. The
value returned by sin() method ranges between -1 to 1, which represents the sine
of the angle.

JavaScript Math cos() method

The JavaScript math cos() method returns the cosine of the given number. The
value returned by cos() method ranges -1 to 1, which represents the cosine of
the angle.

JavaScript Math random() method

The JavaScript math random() method returns the random number between 0

(inclusive) and 1 (exclusive).
 14. Program to display implementation of events.

JavaScript Events
The change in the state of an object is known as an Event. In html, there are
various events which represents that some activity is performed by the user or
by the browser. When javascript code is included in HTML, js react over these
events and allow the execution. This process of reacting over the events is
called Event Handling. Thus, js handles the HTML events via Event Handlers.

For example, when a user clicks over the browser, add js code, which will
execute the task to be performed on the event.

On Click Event

MouseOver Event
Keydown Event
Load event
15. Program to display implementation of external file in
JavaScript
 16. Program to display implementation of date object

JavaScript Date Object

The JavaScript date object can be used to get year, month and day. You can
display a timer on the webpage by the help of JavaScript date object.
You can use different Date constructors to create date object. It provides
methods to get and set day, month, year, hour, minute and seconds.

New date()

JavaScript Date getMilliseconds() method

The JavaScript date getMilliseconds() method returns the value of milliseconds

in specified date on the basis of local time.
New Date(Year, Month, ...)
New data(datastring)
Dreamweaver
 INDEX

Sno. Particular Page no Sign

1 Introduction to Dreamweaver 79
2 Program to display Implementation of Table 80
3 Program to display Implementation of rollover image 81
4 Program to display Implementation of imagemapping 83
5 Program to display Implementation of forms in Dreamweaver 85
6 Program to export data from table. 87
7 Program to split a webpage into frames 88
8 Program to display hyperlink. 89
9 Program to display formatting. 90
10 Program to display Bookmark 91
 INTRODUCTION TO DREAMWEAVER

Adobe Dreamweaver is a software program for designing web pages, essentially

a more fully featured HTML web and programming editor. The program
provides a WYSIWYG (what you see is what you get) interface to create and
edit web pages. Dreamweaver supports many markup languages,
including HTML, XML, CSS, and JavaScript. As for human languages, it
supports English, Spanish, French, German, Japanese, Chinese (both simplified
and traditional), Italian, Russian, and many more.

Dreamweaver was originally developed and published

by Macromedia in 1997. Adobe purchased Macromedia (which included the
rights to Dreamweaver) in 2005 and continued the development of the program.
The many features of Dreamweaver make it a versatile web editing tool, where
it be for creating complex or very simples’ sites.

Dreamweaver is a web development application originally created by

macromedia, and is now developed by adobe systems, which acquired
macromedia in 2005.Dreamweaver is available for both MAC and windows OS.
Dreamweaver allows users to preview websites in locally installed we browsers.
It provides transfer and synchronization features, the ability to find and replace
lines of text or code by search terms and regular expressions across the entire
site, and a templating feature that allows single source update of shared code
and layout across entire sites without server side includes or scripting.
Dreamweaver is supported by a large community of extension developers who
make extensions available for most web development tasks from simple rollover
effects to full featured shopping carts. Dreamweaver, like other HTML editor,
edit files locally then uploads them to the remote web server using FTP, SFTP
or webdev. Dreamweaver supports syntax highlighting for the following
languages out of the box: Action script, ASP, C#, CSS, Cold Fusion, EDML,
XHTML, XML, XSLT(Extensible stylesheet language transformations), html,
java, javascript, PHP:Hypertext Preprocessor(PHP), VB, VB Scipt edition,
wireless Markup Language. 8.2 Interfaces: The Dreamweaver user interface
consists of main menu, insert menu, document menu and work area, along with
all the properties inspector, panels and windows you view on opening the
application.
1. Program to display Implementation of Table
2. Program to Display Implementation of Rollover Image
(i) Go to insert option, select Insert > HTML > Rollover Image. (You could
also use the Common Insert panel.)
(ii) In the Insert Rollover Image dialog box enter the following:

 Image name: Image names cannot contain spaces.

 Original image: Browse and choose an image to use.
(iii) Point your mouse at the image to see it change.
3. Program to display Implementation of Image Mapping
(i) Go to insert, optimize the image and bring it into Dreamweaver. Bring up
the Properties bar. Make sure the image is selected.

(ii) Name the image in the property bar: this a reference for the imagemap
HTML, and is distinct from the alt and id attributes of an image.

(iii) Use in the bottom left corner of the Properties bar: rectangle, ellipse.

Using the rectangular hotspot tool, draw an appropriately sized box around a
location.
(iv) When you click on the rectangular region in the image, new
image is displayed on the next window.
4. Program to display implementation of forms in Dreamweaver

RESULT:
5. Program to export data from table.
(i) Choose File > Export > Table.

(ii) Click Export.: The Export Table As dialog appears.

(iii) Give the file a name, navigate to where you want to save it, and click Save.

6. Program to split a webpage into frames.

7. Program to display hyperlink.

8. Program to display formatting

Before source formatting

After source formatting

9. Program to display Bookmark

1)  Create a new or open an existing document on Macromedia Dreamweaver. 

2)  To insert the bookmark select insert at the top of the screen and scroll down
to Invisible Tags.  Another menu will appear and select Named Anchor. 

3)  In the window dialog box that appears after selecting Named Anchor, type in
"Bookmark" in the space provided, and select ok.

4)  A Book type logo should then be inserted in the workspace area of
Dreamweaver which looks similar to the one show below. 

5) Next scroll the cursor to the top of the screen and type in the same header
which you named your bookmark. 

6)  After typing the exact header of the corresponding bookmark highlight it and
will see a link window open towards the bottom of the screen.  Select the little
navigation circle and hold it down then drag it to the bookmark want to link it
to.
FLASH
 INDEX
Sno Particular Page Sign
. no
1 Introduction to Flash 94
2 Program to display Text Effects 95
3 Program to display Implementation of Looping -for, while, do 97
while
4 Program to display animation with flash and editing 98
5 Program to display Implementation of symbols and movie clips 99
6 Program to display implementation of grouping of shapes 100
7 Program to display implementation of 101
 Factorial
 Fibonacci

8 Program to display implementation of Tweening 102

 Motion tweening
 Shape tweening
 INTRODUCTION TO FLASH

Macromedia flash is a graphic software that is used for creating presentations

and animations with images, sound, video and animation effects. It is also used
in other applications that require user interaction, for example, interactive and
animated websites. It can also be
 Flash is a tool for creating interactive and animated websites
 Flash is a multimedia graphics program specially for use on the web
 Flash enables you to create interactive movies on the web
 Flash uses vector graphics, which means that the graphics can be scaled to any
size without losing clarity/quality
 Flash does not require programming skills and is easy to learn
 Flash is an authoring tool that designers and developers use to create
presentations, applications, and other content that enables user interaction.
 Flash projects can include simple animations, video content, complex
presentations, application and everything in between.
 Individual pieces of content made with flash are called applications, even
though they might only be a basic animation.
 One can make media-rich flash applications by including pictures, sounds,
video and special effects.
Flash is extremely well suited to creating content for delivery over the internet
because its files are very small. Flash achieves this through its extensive use of
vector graphics. Vector graphics require significantly less memory and storage
space than bitmap graphics because they are represented by mathematical
formulas instead of large datasets. Bitmap graphics are larger because each
individual pixel in the image requires a separate piece of data to represent it.
1. Program to display Text Effects

(i) Write any text

(ii) Break it apart

(iii) Convert text to symbols.

(iv) Using paint tool, we can do gradient effect
2. Program to display Implementation of Looping -for, while,
do while

For loop

While loop

Do while

3. Program to display animation with flash and editing

4. Program to display Implementation of symbols and movie
clips

5. Program to display implementation of grouping of shapes

6. Program to display implementation of
 Factorial
 Fibonacci
7. Program to display implementation of Tweening
• Motion tweening

Output:

• Shape
tweening
Insert a shape

Insert keyframe
Create another shape

Select shape tween from the properties:

Output:
J