WDD Practical File Nitya Gupta

PRACTICAL FILE
ON
WEB DESIGNING AND DEVELOPMENT
Submitted in the partial fulfilment of the degree of
Bachelor of Business Administration (CAM)

(2022)
SUBMITTED BY: NITYA GUPTA
02613401920
Under the guidance of
DR. SEEMA GUPTA
(ASSOCIATE PROFESSOR)
Ideal Institute of Management & Technology

(16 X, Karkardooma Institutional Area, Delhi-92)
CERTIFICATE
This is to certify that the Practical file of WEB DESIGNING AND

DEVELOPMENT is submitted by Nitya Gupta student of BBA (CAM)-5
Ideal Institute of Management and Technology during the year 2022, in partial
fulfilment of the requirements for the Award of the Degree of BBA CAM,
under my guidance and direction. To the best of my knowledge and belief the
data and information presented by her in the practical file has not been
submitted earlier.
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.
NITYA GUPTA
0261340192
0
INDEX
Sr.
No. PARTICULARS PAGE
NO.
TEACHER’S
SIGN
HTML
1 Introduction to HTML 7
2 Illustration of text formatting 8-10
3 A program to show all heading 11
4 Illustration of Pre tag & comment tag 12-13
5 Illustration of Div tag 14
6 Illustration of Font tag & Base font 15-16
7 All the list of HTML 17-18
8 Example of nested list 19
9 Illustration of image tag & it’s attribute 20-21
10 Illustration of Anchor tag & its 22
attributes with example
11 Design table (Colspan) with HTML tags 23-26
12 The illustration of frame with example 27
13 An application form 28-29
14 A program to demonstrate 30-32
implementation of CSS
JAVA SCRIPT
1 Factorial of a number 34
2 Greatest of 3 number 35
3 Print n number 36
4 Fibonacci Series 37
5 Implementation of IF, THEN, ELSE in JS 38
6 Implementation of function in JS 39
7 Implementation of Array in JS 40
8 Implementation of All types of loops 41-43
in JS
DREAM WEAVER
1 Implementation of bookmark 45-46
2 Implementation of Mail to link 47
3 Implementation of Image mapping 48-49
4 Implementation of creating rollover image 50-51
5 Implementation of tables 52-53
6 Implementation of Frames 54-55
7 Implementation of Form 56-57
8 Implementation of Listing 58-60
9 Implementation of Anchor Tag 61-62
10 Implementation of Image 63-64
FLASH
1 Factorial in action script 66-67
2 Grouping shapes in flash 68-69
3 Text effects in flash 70-72
4 Fibonacci series in action script 73
5 Animation with flash & editing animation 74-77
BIBLIOGRAPHY 78
HTML
1. INTRODUCTION TO HTML
HTML is the standard markup language for creating Web pages.
What is HTML?
 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
Some Common Elements:
 The <html> element is the root element of an HTML page

 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph
2. Illustration of Text Formatting
HTML contains several elements for defining text with a special meaning.
HTML Formatting Elements
Formatting elements were designed to display special types of text:
 <b> - Bold text: The HTML <b> element defines bold text, without any
extra importance.
 <strong> - Important text: The HTML <strong> element defines text
with strong importance. The content inside is typically displayed in bold.
 <i> - Italic text: The HTML <i> element defines a part of text in an
alternate voice or mood. The content inside is typically displayed in italic.
 <em> - Emphasized text: The HTML <em> element defines
emphasized text. The content inside is typically displayed in italic.
 <mark> - Marked text: The HTML <mark> element defines text that
should be marked or highlighted:
 <small> - Smaller text: The HTML <small> element defines smaller text:
 <del> - Deleted text: he HTML <del> element defines text that has been
deleted from a document. Browsers will usually strike a line through
deleted text:
 <ins> - Inserted text: The HTML <ins> element defines a text that has
been inserted into a document. Browsers will usually underline inserted
text:
 <sub> - Subscript text: The HTML <sub> element defines subscript
text. Subscript text appears half a character below the normal line, and is
sometimes rendered in a smaller font. Subscript text can be used for
chemical formulas, like H2O:
 <sup> - Superscript text: The HTML <sup> element defines superscript
text. Superscript text appears half a character above the normal line, and
is sometimes rendered in a smaller font. Superscript text can be used for
footnotes, like WWW:
 <u>Underline tag: If you write anything within <u>. </u> element,
is shown in underlined text.
 <strike>tag: Anything written within <strike>.......................</strike>
element is displayed with strikethrough. It is a thin line which cross the
statement.
For example:
Output:
3. A 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.
Output:
4. Illustration of pre tag and comment tag
<pre> tag:
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font, and the text

preserves both spaces and line breaks. The text will be displayed exactly as
written in the HTML source code.
For Example:
Output:
<comment> tag:
HTML comments are not displayed in the browser, but they can help
document your HTML source code.
You can add comments to your HTML source by using the following syntax:
<! -- Write your comments here -->
Comments are also great for debugging HTML, because you can comment out
HTML lines of code, one at a time, to search for errors.
Output:
5. Illustration of div tag
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled
with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
For Example:
Output:
6. Write Illustration of font tag and base font
tag
<font> tag:
The <font> tag was used to specify the font face, font size, and colour of text.
1. colour of text
2. font of text:
3. size of text:
output:
output:
<basefont> tag:
The <basefont> tag was used to specify a default text-colour, font-
size or font-family for all the text in an HTML document.
1. text-colour for a page:
2. font-family for a page:
3. font-size for a page:

7. All the list of html
Unordered 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:
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:
Definition List
HTML Description List or Definition List displays elements in definition form
like in dictionary. The <dl>, <dt> and <dd> tags are used to define description
list.
The 3 HTML description list tags are given below:
1. <dl> tag defines the description list.

2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).
Directory List
The DIR element is similar to the UL element. It represents a list of short items,
typically up to 20 characters each. Items in a directory list may be arranged in
columns, typically 24 characters wide.
Output:
8. Example of Nested list
Nested List
A list within another list is termed as nested list. If you want a bullet list
inside a numbered list then such type of list will call as nested list.
For Example:
Output:
9. Illustration of image tag and its attribute
HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an
empty tag that contains attributes only, closing tags are not used in HTML
image element.
Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of
HTML image tag are given below.
1) src
It is a necessary attribute that describes the source or path of the image. It

instructs the browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed.
The value of the alt attribute describes the image in words. The alt attribute is
considered good for SEO prospective.
3) width
It is an optional attribute which is used to specify the width to display the

image. It is not recommended now. You should apply CSS in place of width
attribute.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe,
image and object elements. It is not recommended now. You should apply CSS
in place of height attribute.
For Example:
Output:
10. Illustration of anchor tag and its
attribute with the help of example
HTML Anchor
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.
Link Attributes
1. Href: Specify the link's target URL

2. Name: Link to an anchor mark within the page
3. Target: Specify how the target document should be opened, e.g., in a new tab
4. Title: Provide text that will be displayed when the user hovers over a link
For Example:
Output:
11. Design table(colspan) with html tags
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.
We can create a table to display data in tabular form, using <table> element, with
the help of <tr>, <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and
table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g., header section,
navigation bar, body content, footer section etc. But it is recommended to use div
tag over table to manage the layout of the page.
For Example:
Output:
Design table(colspan)
Output:
12. The Illustration of frame with example
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.
Output:
13. An application form
An HTML form is a section of a document which contains controls such as text
fields, password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc.
HTML Form Tags

1. <input>: The HTML <input> element is fundamental form element. It is used to
create form fields, to take input from user. We can apply different input filed to gather
different information form user. Following is the example to show the simple text
input.
2. <textarea>: The <textarea> tag in HTML is used to insert multiple-line text in a

form. The size of <textarea> can be specify either using "rows" or "cols" attribute or
by CSS.
3. <select>: The <select> element is used to create a drop-down list.

The <select> element is most often used in a form, to collect user input.
Output:
14. A program to demonstrate
implementation of CCS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web
pages all at once.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the colour, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what
background images or background colours are to be used, different displays
for different devices and screen sizes, and much more!
CSS can be added to HTML documents in 3 ways:
1. Inline CSS: An inline CSS is used to apply a unique style to a single

HTML element. An inline CSS uses the style attribute of an HTML
element. The following example sets the text colour of the <h1>
element to blue, and the text colour of the <p> element to red:
Output:
2. Internal CSS: An internal CSS is used to define a style for a single
HTML page. An internal CSS is defined in the <head> section of an
HTML page, within a <style> element. The following example sets the
text colour of ALL the <h1> elements (on that page) to blue, and the
text colour of ALL the <p> elements to red. In addition, the page will
be displayed with a "powder blue" background colour:
output:
3. External CSS: An external style sheet is used to define the style
for many HTML pages. To use an external style sheet, add a link to
it in the <head> section of each HTML page:
Output:
Here is what the "styles.css" file looks like:

JAVASCRIPT
JavaScript
JavaScript is a scripting language that enables you to create dynamically updating content,
control multimedia, animate images, and pretty much everything else. (Okay, not everything,
but it is amazing what you can achieve with a few lines of JavaScript code.)
To include JavaScript in your HTML document you’ll have to use the tag
<script>………</script>.
Programs in JavaScript
1. Factorial
Below is the program to find the factorial of a number.
2. Greatest of 3 numbers
Below is the code to find the greatest of 3 numbers.
3. Print “n” numbers
Below is the code to print n numbers in JS.
4. Fibonacci Series
Below is the code to find the Fibonacci Series of number” n”
5. Implementation of If, then, Else
Below is the code of an IF, THEN, ELSE program.
6. Implementation of functions in JS.
A JavaScript function is defined with the function keyword, followed by a name, followed
by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same rules as
variables).
The parentheses may include parameter names separated by commas:

(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
Below is a program of a multiplying 2 numbers using a function.

7. Implementation of Arrays in JS
An array is a special variable which can hold more than one values. Below is the syntax to
create an array
const array_name = [item1, item2, ...];
8. Implementation of all types of Loops in JS.
Below is a list of loops in JS, along with their programs.
1. for - loops through a block of code a number of times
Syntax:
for (expression 1; expression 2; expression 3) {

// code block to be executed
}
2. for/in - loops through the properties of an
object Syntax:
for (key in object) {

}
3. for/of - loops through the values of an iterable object
Syntax:
for (variable of iterable) {

}
4. while - loops through a block of code while a specified condition

is true
Syntax:
while (condition) {
}
5. do/while - also loops through a block of code while a specified
condition is true
Syntax:
do {
}
while (condition);
DREAMWEAVER
Dreamweaver
Adobe Dreamweaver is a website creation program that allows you
to build and publish web pages almost anywhere with software that supports
HTML, CSS, JavaScript and more. Dreamweaver is useful for a variety of
web designers, from beginners to advanced professionals.
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 simple sites.
1. Implementation of Bookmark
Steps to create Bookmark in Dreamweaver:
1) Create a new or open an existing document on Macromedia
Dreamweaver.
2) To insert the bookmark select insert at the top of your 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. You can do
this for as many book marks as needed.
2. Implementation of Mail to Link
1. Under the Insert panel’s Common category, click the “Email link”
icon, which looks like an envelope
2. In the Text field, type the text that you want to appear on the web page.
3. Type an email address into the Email field.
4. Click OK.
3. Implementation of Image Mapping
An image map is an image that has been divided into regions or
hotspots.
1. Insert your image into your page using Insert > Image.
2. Now select the image with the Properties panel open.
3. Give your image map an appropriate name in the text box.

4. Now click on either of the blue icons which are hotspots drawing
tools (Rectangular, Oval and Polygon hotspot tools)
5. Hotspots are like links and the only difference is that they have
location co-ordinates on the image.
6. Now draw your hotspot area in the part of the image you want to
make into a link.
7. Give the link details (link= the page you want to link to, target=
how you want the page to be shown, Target _new opens it in a new
window and alt= the text that show if the picture is not able load).
8. After you have drawn and defined all your hotspots, just click on
the black arrow icon below the map name to get back the arrow
cursor.
Example of an Image map

4. Implementation of Creating Rollover Image
Dreamweaver makes it easy to create a rollover image.
1. Go to the Insert menu and down to the Interactive Image sub-menu.

2. Select Image rollover or Rollover image.
3. Dreamweaver pops a dialog box with the fields you need to fill in
to create your rollover image.
Setting properties of a rollover image
Image Name
The name of the rollover image.
Original image
The image you want to display when the page loads. Enter the path in the text box,
or click Browse and select the image.
Rollover Image
The image you want to display when the pointer rolls over the original image. Enter
the path or click Browse to select the image.
Preload Rollover Image

Preloads the images in the browser’s cache so no delay occurs when the user rolls
the pointer over the image.
When clicked, Go to URL

The file that you want to open when a user clicks the rollover image. Enter the path
or click Browse and select the file.
4. To preview the rollover image, select File > Real-time Preview, or press F12.
5. In the browser, move the pointer over the original image to see the rollover image.
5. Implementation of Tables
To create a table in Dreamweaver:
1. Start Dreamweaver.
2. On the "File" menu, click on "New". This will open up a new, blank web
page for you to work on.
3. Now it's time to insert the table. Logically enough, any time you want to
insert something on your page, you click on the "Insert" menu. Select the
"table option."
4. The "Insert table" dialog box, which looks like this, will open up.
5. When you have filled out the "Insert table" box, click OK. The table will be
inserted on the page.
6. Implementation of Frames
HTML Frames are used to divide the web browser window into multiple sections where
each section can be loaded separately. A frameset tag is the collection of frames in the
browser window. Creating Frames: Instead of using body tag, use frameset tag in HTML
to use frames in web browser.
There are two ways to create a frameset in Dreamweaver: You can select from
several predefined framesets or you can design it yourself. Below are the steps
to implement frames in Dreamweaver using the Insert option.
Predefined Framesets
Design it yourself
7. Implementing of Form
Create a Form
1. Click "File," then choose "New" and "Blank Page." A fresh HTML page
appears.
2. Select "Insert," then "Form." Click "Form" again. The form area becomes
visible. If you cannot see it, click "View," then "Visual Aids" and
"Invisible Elements."
3. Click on the "<form>" tag, located near the bottom of the Document
window. Select the "Window" menu and choose "Properties." Enter a
name for the form in the area marked "Form Name."
4. Select the "Insert" menu and click "Form." Choose a form element to
insert, such as "Text Field" or "Radio Button." Repeat this step until the
form has all the elements you want.
5. Click "Insert," then "Form" and "Button." This button is required so that
users can submit the form. If you want to change the name of the button,
select the button and click "Window," then "Properties." Change the
name in the "Label" box.
8. Implementing of Listing
Lists bring order and structure to text on the Web. Large blocks of text are
difficult to read onscreen, so lists break things into manageable highlights.
Lists items are formatted in <li>...</li> tag pairs for each item. The list in its
entirety also needs to be defined. The manner in which this is done depends on
the type of list.
1. Unordered (Bulleted) List

An unordered list is used when the sequence of the items isn't important.
Bulleted lists can be created from text you've already entered, or the list can be
created as you type the text. Here's how to make an unordered list:
I. To configure the list and then type the list items, position the cursor
where you want to start the list. If you're converting existing text into
a list, select the text.
II. In the Property inspector, click the Unordered List button. You can
also select Text, List, Unordered List.
III. Type in the text of your list.
2. Ordered (Numbered) List

Ordered lists are used when items should be followed sequentially. Create
these lists in the same manner as unordered lists, but simply click the
Ordered List button instead. Examining the code, you'll see that ordered
lists are defined by the <ol>...</ol> tag pair.
I. To configure the list and then type the list items, position the
cursor where you want to start the list. If you're converting existing
text into a list, select the text.
II. In the Property inspector, click the Ordered List button. You
can also select Text, List, Unordered List.
3. Definition List
The <dl> tag defines a description list. The <dl> tag is used in conjunction
with <dt> (defines terms/names) and <dd> (describes each term/name).
I. To configure the list and then type the list items, position the cursor
where you want to start the list. If you're converting existing text
into a list, select the text.
II. In the Property inspector, click the Definition List button. You
can also select Text, List, Unordered List.

9. Implementation of Anchor Tag
1. Place the cursor at the beginning of the main content section of
the web page and choose Insert, Named Anchor.
2. Enter a name for the named anchor and choose OK.
3. An anchor point appears as an element in the Design view as a

yellow shield with the image of an anchor on it. The anchor
point is not displayed when your page is viewed in a browser.
10. Implementation of Image
When you insert an image into a Dreamweaver document, a reference to the
image file is generated in the HTML source code.
Insertion of image is only possible in Design view. To insert an image, follow the
steps:
1. Place the insertion point where you want the image to appear in the Document
window and select Insert>Image or click on the image icon in the Common
insert bar at the top of the screen.
2. Browse to select the image or content source that you want to insert.
3. Click OK.
FLASH
Flash
Flash, also known as Adobe Flash is a multimedia graphic software that is
used to create animations. The animations are made for so many purposes,
for example, movies, games, desktop presentations, web applications, etc.
Flash is compatible with all web browsers and is one of the most popular
technologies on the internet. It was created by Macromedia, and initially, it
was created for web applications only.
1. Factorial in action script.

Factorials are commonly encountered in the evaluation of permutations and
combinations and in the coefficients of terms of binomial expansions.
Factorials have been generalized to include nonintegral values.
Factorial, in mathematics, the product of all positive integers less than or
equal to a given positive integer and denoted by that integer and an
exclamation point. Thus, factorial seven is written 7! meaning 1 × 2 × 3 × 4
× 5 × 6 × 7. Factorial zero is defined as equal to 1.
Factorial in action script
example: Code for Factorial of 10
Output
2. Grouping shapes in flash.
GROUPING
 the act or process of combining in groups.
 a set of objects combined in a group.
Grouping shape in flash:

To manipulate elements as a single object, group them. For example, after
creating a drawing, you might group the elements of the drawing so that you
can easily select and move the drawing as a whole.
When you select a group, the Property inspector displays the x and y
coordinates of the group and its pixel dimensions.
You can edit groups without ungrouping them. You can also select an
individual object in a group for editing without ungrouping the objects.
Steps of grouping shapes in flash
1. Select the objects to group. You can select shapes, other groups,
symbols, text, and so on.
2. To group objects, select Modify > Group, or press Control +

G (Windows) or Command + G (Macintosh).
3. To ungroup objects, select Modify > Ungroup, or press Control + Shift
+ G (Windows) or Command + Shift + G (Macintosh).
3. Text effects in flash.
Text animation is one of the methods to provide certain effects to the text. It
can be easily done by using shape tweens with masking functionality. Text
animation is used mainly in intro videos and presentations. Rolling of text,
sliding of text, revealing text, etc. are different text animations that can be
made easily using flash functionalities.
Steps to do text effects:
Step 1: Open the flash and create a new project
Step 2: The work screen will appear, now select the Text Tool from the
toolbar and write Web Development and Designing on the stage.
Step 3: Now select the text and then go to modify and click to break apart.
Step 4: Then it will convert all letters into new layers then convert all letters
to symbol by going to modify and click to convert to symbol.
Step 5: Enter a new frame at 10 seconds
Step 6: Click on layer of symbol (W) Go to properties Change color from

none to Alpha
Step 7: The output will be shown as a blinking text

4. Fibionic series in action script.
The Fibonacci sequence, also known as Fibonacci numbers, is
defined as the sequence of numbers in which each number in the
sequence is equal to the sum of two numbers before it.
The Fibonacci Sequence is:
Fibonacci Sequence = 0, 1, 1, 2, 3, 5, 8, 13, 21, ….
Here, the third term “1” is obtained by adding the first and second term.
(i.e., 0+1 = 1)
Similarly,
“2” is obtained by adding the second and third term (1+1 = 2)
“3” is obtained by adding the third and fourth term (1+2) and so on.
For example, the next term after 21 can be found by adding 13 and 21.
Therefore, the next term in the sequence is 34.
The illustration of Fibonacci sequence;
Coding and Output:
5. Animation with flash & editing animation.
Animating in Flash requires certain understanding of motion and a lot of
patience. Figuring out how the animation will work is not so hard, but
achieving the desirable result is usually painstaking.
Adobe Flash is a software program used to create animations. In Flash, we
can do animation with the help of the transition of an image from one
keyframe to another which is known as tweening. Tweening means in
between, i.e., the movement of objects from one place to another between
keyframes. Keyframes are any objects or images at the starting and at the
ending of the timeline. The three types of animation in Flash are:
1. Frame-By-Frame animation
2. Motion tweening
3. Shape tweening
Steps of animating bouncing football:

Step 1: Open Flash and create a new flash document
Step 2: Download an image of a football and import it to the working space
Step 3: Create a layer of guideline

Step 4: Draw a path with the help of pencil in toolbar
Step 5: Create new frame at 50 sec to both layer

Step 6: Take the picture of football in the start of the path make sure that the
centre point of the football should align with the path
Step 7: Repeat step 6 at the end of the path in second frame (i.e., 50 seconds
frame)
Step 8: Select both the frames and add motion tween
Step 9: Now press CTR+ENTER and the output will be shown of a bouncing
football.
Bibliography
 https://www.javatpoint.com/what-is-html
 https://www.techopedia.com/definition/3929/javascript-
js#:~:text=Javascript%20%28JS%29%20is%20a%20scripting%20l
a nguages%2C%20primarily%20used,web%20pages%20in
%20an
%20interactive%20and%20dynamic%20fashion.
 https://www.geeksforgeeks.org/loops-in-javascript/
 https://www.geeksforgeeks.org/what-is-dreamweaver/
 https://helpx.adobe.com/dreamweaver/using/insert-edit-
images.html
 https://www.geeksforgeeks.org/introduction-to-macromedia-
flash-8/
 https://www.w3schools.com/

WDD Practical File Nitya Gupta

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WDD Practical File Nitya Gupta

Uploaded by

Copyright:

Available Formats

PRACTICAL FILE

Submitted in the partial fulfilment of the degree of

Bachelor of Business Administration (CAM)

SUBMITTED BY: NITYA GUPTA

Under the guidance of

DR. SEEMA GUPTA

Ideal Institute of Management & Technology

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

Dr. Seema Gupta

 HTML stands for Hyper Text Markup Language

What is an HTML Element?

<tagname> Content goes here... </tagname>

Some Common Elements:

 The <html> element is the root element of an HTML page

HTML Formatting Elements

Formatting elements were designed to display special types of text:

HTML headings are defined with the <h1> to <h6> tags.

Text in a <pre> element is displayed in a fixed-width font, and the text

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

1. text-colour for a page:

2. font-family for a page:

3. font-size for a page:

The list items will be marked with numbers by default:

The 3 HTML description list tags are given below:

1. <dl> tag defines the description list.

Attributes of HTML img tag

It is a necessary attribute that describes the source or path of the image. It

The location of image may be on the same directory or another server.

It is an optional attribute which is used to specify the width to display the

href attribute of HTML anchor tag

1. Href: Specify the link's target URL

HTML Form Tags

2. <textarea>: The <textarea> tag in HTML is used to insert multiple-line text in a

3. <select>: The <select> element is used to create a drop-down list.

CSS can be added to HTML documents in 3 ways:

1. Inline CSS: An inline CSS is used to apply a unique style to a single

Here is what the "styles.css" file looks like:

The parentheses may include parameter names separated by commas:

The code to be executed, by the function, is placed inside curly brackets: {}

Below is a program of a multiplying 2 numbers using a function.

1. for - loops through a block of code a number of times

for (expression 1; expression 2; expression 3) {

2. for/in - loops through the properties of an

for (key in object) {

for (variable of iterable) {

4. while - loops through a block of code while a specified condition

Dreamweaver was originally developed and published

4) A Book type logo should then be inserted in the workspace area of

2. Now select the image with the Properties panel open.

3. Give your image map an appropriate name in the text box.

Example of an Image map

1. Go to the Insert menu and down to the Interactive Image sub-menu.

Setting properties of a rollover image

Preload Rollover Image

When clicked, Go to URL

1. Unordered (Bulleted) List

III. Type in the text of your list.

2. Ordered (Numbered) List

III. Type in the text of your list.

III. Type in the text of your list.

2. Enter a name for the named anchor and choose OK.

3. An anchor point appears as an element in the Design view as a