LM - Sunil Nakum

Diploma Engineering
Laboratory Manual
(Static Webpage Design)
(4311603)
[Computer Engineering, Semester II]

Enrolment No
Name
Branch
Academic Term
Institute
Directorate Of Technical Education

Gandhinagar - Gujarat
DTE’s Vision:
• To provide globally competitive technical education;
• Remove geographical imbalances and inconsistencies;
• Develop student friendly resources with a special focus on girls’ education
and support to weaker sections;
• Develop programs relevant to industry and create a vibrant pool of technical
professionals.
Institute’s Vision:
Institute’s Mission:
Department’s Vision:
Department’s Mission:
Name of institute
Certificate
This is to certify that Mr./Ms ………………………………………………………………….

Enrollment No. ………….…………….…….…….……. of 2nd Semester of Diploma in Computer
Engineering of ………………………………………………………………………. (GTU Code) has satisfactorily
completed the term work in course …………………………………………………………………………………….…….
for the academic year: …………………… Term: Odd/Even prescribed in the GTU curriculum.
Place:…………………..
Date: …………………..
Signature of Course Faculty Head of the Department

Preface
The primary aim of any laboratory/Practical/field work is enhancement of required skills as well
as creative ability amongst students to solve real time problems by developing relevant competencies in
psychomotor domain. Keeping in view, GTU has designed competency focused outcome-based
curriculum -2021 (COGC-2021) for Diploma engineering programmes. In this more time is allotted to
practical work than theory. It shows importance of enhancement of skills amongst students and it pays
attention to utilize every second of time allotted for practical amongst Students, Instructors and Lecturers
to achieve relevant outcomes by performing rather than writing practice in study type. It is essential for
effective implementation of competency focused outcome- based Green curriculum-2021. Every
practical has been keenly designed to serve as a tool to develop & enhance relevant industry needed
competency in each and every student. These psychomotor skills are very difficult to develop through
traditional chalk and board content delivery method in the classroom. Accordingly, this lab manual has
been designed to focus on the industry defined relevant outcomes, rather than old practice of conducting
practical to prove concept and theory.
By using this lab manual, students can read procedure one day in advance to actual performance
day of practical experiment which generates interest and also, they can have idea of judgement of
magnitude prior to performance. This in turn enhances predetermined outcomes amongst students. Each
and every Experiment /Practical in this manual begins by competency, industry relevant skills, course
outcomes as well as practical outcomes which serve as a key role for doing the practical. The students
will also have a clear idea of safety and necessary precautions to be taken while performing experiment.
This manual also provides guidelines to lecturers to facilitate student-centered lab activities for
each practical/experiment by arranging and managing necessary resources in order that the students
follow the procedures with required safety and necessary precautions to achieve outcomes. It also gives
an idea that how students will be assessed by providing Rubrics.
Internet is widely used in different areas such as banking, e-commerce, education and many
others. Different technologies are used to develop web applications but HTML is the core component in
all types of applications for formatting and presenting the web content. This course will impart skill sets
related to designing HTML web pages, using cascading style sheets and embedding Java script using
Kompozer. This course will also serve as a pre-requisite for the advanced web development
technologies, which students will learn in the upcoming semester.
Although we try our level best to design this lab manual, but always there are chances of
improvement. We welcome any suggestions for improvement.
Programme Outcomes (POs) :
1. Basic and Discipline specific knowledge: Apply knowledge of basic mathematics, science
and engineering fundamentals and engineering specialization to solve the engineering
problems.
2. Problem analysis: Identify and analyse well-defined engineering problems using codified
standard methods.
3. Design/ development of solutions: Design solutions for engineering well-defined technical

problems and assist with the design of systems components or processes to meet specified
needs.
4. Engineering Tools, Experimentation and Testing: Apply modern engineering tools and
appropriate technique to conduct standard tests and measurements.
5. Engineering practices for society, sustainability and environment: Apply appropriate

technology in context of society, sustainability, environment and ethical practices.
6. Project Management: Use engineering management principles individually, as a team

member or a leader to manage projects and effectively communicate about well-defined
engineering activities.
7. Life-long learning: Ability to analyze individual needs and engage in updating in the context
of technological changes in field of engineering.
Practical Outcome - Course Outcome matrix
Course Outcomes (COs):
CO1: Design webpage using formatting, image and table tags.
CO2: Use advanced HTML tags for designing interactive and semantic web pages.
CO3: Design and publish websites using the Kompozer tool.
CO4: Use CSS internal and/or external style sheets for designing web pages.
CO5: Write client-side script using Javascript.
CO1 CO2 CO3 CO4 CO5

S. No. Practical Outcome/Title of experiment
1. Use HTML text formatting tags to create √ - - - -

web page as per given sample.
2. Use hyper link tag to navigate through √ - - - -
different web pages as per given sample.
Use image tags to create web page as per
given sample. √ - - - -
3.
4. Use HTML table tags to create web page

√ - - - -
as per given sample.
5. Use sorted list to create web page as per
- √ - - -
given sample page.
Use unsorted list to create web page as
6. - √ - - -
per given sample page.
7. Use definition list to create web page as
- √ - - -
per given sample page.
8. Use semantic tags to organize web page
- √ - - -
contents as per given sample.
a. Create a student registration webpage
9.
using different HTML form elements.
- √ - - -
b. Create student feedback form using
different HTML form elements.
10. Create a bank account opening form
using different HTML form elements in - - √ - -
Kompozer.
11. Use inline, internal and external style
sheets for the student registration form
- - - √ -
and bank account form created in
previous practical.
12. a. Use different CSS elements to create
- - - √ -
and format your Profile Page (Note: use
CSS Background, Text, Font, Tables, Links,
Images, Margin etc)
b. Create and format your class time table
Page Using Different CSS Elements
(Note: use CSS Background, Text, Font,
Tables, Links, Images, Margin etc)
13. Use JavaScript to perform the following
operations:
a. find roots of quadratic equation - - - - √
b. find the highest from given three
values
Use JavaScript to check whether given
14.
character is vowel or consonant using if - - - - √
else ladder.
Use JavaScript to check whether given
15.
character is vowel or consonant using - - - - √
switch case.
Use JavaScript to print first 10 even
16. - - - - √
numbers.
Use JavaScript to calculate power of given
17. - - - - √
number.
Use JavaScript to print multiplication
18. - - - - √
table of given number.
Use JavaScript user defined functions to
19.
perform the following operations:
a. to calculate sum of 1 to n - - - - √
b. to check whether given number is
prime or not
Use JavaScript to perform the following
20.
operations:
a. take input of student name and
address and display in a dialog box. - - - - √
b. change background color of webpage
as selected by user from a list of colors
given in combo box.
Use JavaScript to perform the following
21.
operations:
a. calculate the factorial of a given
number entered into a textbox. Display
the result in another textbox. - - - - √
b. perform arithmetic operations on two
numbers entered into textboxes. Use
Radio buttons to select arithmetic
operations (Addition, Subtraction,
Multiplication and Division). Display the
result in another textbox.
Industry Relevant Skills
The following industry relevant skills are expected to be developed in the students
by performance of experiments of this course.
Develop web pages using HTML and CSS.
Develop interactive web pages using HTML and Javascript.
Guidelines to Course Faculty

1. Couse faculty should demonstrate experiment with all necessary
implementation strategies described in curriculum.
2. Couse faculty should explain industrial relevance before starting of each experiment.
3. Course faculty should Involve & give opportunity to all students for hands on
experience.
4. Course faculty should ensure mentioned skills are developed in the students
by asking.
5. Utilise 2 hrs of lab hours effectively and ensure completion of write up with quiz
also.
6. Encourage peer to peer learning by doing same experiment through fast
learners.
Instructions for Students

1. Organize the work in the group and make record of all observations.
2. Students shall develop maintenance skill as expected by industries.
3. Student shall attempt to develop related hand-on skills and build confidence.
4. Student shall develop the habits of evolving more ideas, innovations,
skills etc.
5. Student shall refer technical magazines and data books.
6. Student should develop habit to submit the practical on date and time.
7. Student should well prepare while submitting write-up of exercise.
Continuous Assessment Sheet
Enrolment No: Name
Term:
Sr no Practical Outcome/Title of experiment Marks

Page Sign
Date (25)
1 To use HTML text formatting tags to create web

page as per given sample.
2 To use hyper link tag to navigate through different
web pages as per given sample.
To use image tags to create web page as per given
3 sample.
4 To use HTML table tags to create web page as per

given sample.
5 To use sorted list to create web page as per given
sample page.
6
To use unsorted list to create web page as per given
sample page.
7 To use definition list to create web page as per given
sample page.
8 To use semantic tags to organize web page contents
as per given sample.
9 a. To create a student registration webpage using

different HTML form elements.
b. To create student feedback form using different
HTML form elements.
10 To create a bank account opening form using

different HTML form elements in Kompozer.
11 Use inline, internal and external style sheets for the
student registration form and bank account form
created in previous practical.
12 a. To use different CSS elements to create and
format your Profile Page (Note: use CSS Background,
Text, Font, Tables, Links, Images, Margin etc)
b. To create and format your class time table Page
Using Different CSS Elements
(Note: use CSS Background, Text, Font, Tables, Links,
Images, Margin etc)
13 To use JavaScript to perform the following

operations:
a. find roots of quadratic equation
b. find the highest from given three values
14 To use JavaScript to check whether given character
is vowel or consonant using if else ladder.
15 To use JavaScript to check whether given character
is vowel or consonant using switch case.
16 To use JavaScript to print first 10 even numbers.
17 To use JavaScript to calculate power of given

number.
18 To use JavaScript to print multiplication table of
given number.
19 To use JavaScript user defined functions to perform
the following operations:
a. to calculate sum of 1 to n
b. to check whether given number is prime or not

operations:
a. take input of student name and address and
display in a dialog box.
b. change background color of webpage as selected
by user from a list of colors given in combo box.
operations:
a. calculate the factorial of a given number entered
into a textbox. Display the result in another textbox.
b. perform arithmetic operations on two numbers
entered into textboxes. Use Radio buttons to select
arithmetic operations (Addition, Subtraction,
Multiplication and Division). Display the result in
another textbox.
Total
Static Web Page Design (4311603)
Date: ……………
Practical No.1: Use HTML text formatting tags to create web page as per given sample.
A. Objective:
To apply text formatting tags in a webpage.
B. Expected Program Outcomes (POs)
PO1: Basic and Discipline specific knowledge: Be able to apply engineering
knowledge of computing appropriate to the problem
PO4: Engineering Tools, Experimentation and Testing: Be able to use and apply
current technical concepts and best practices in information technologies
C. Expected Skills to be developed based on competency:

This practical is expected to develop the following skills for the industry-
identified competency: ‘Develop webpages using HTML’
1. HTML tags identification skills.
2. Webpage development skills.
D. Expected Course Outcomes(Cos)

E. Practical Outcome(PRo)
Use HTML text formatting tags to create web page as per given sample.
F. Expected Affective domain Outcome(ADos)

a. Handle computer systems carefully with safety and necessary precaution
b. Turn off systems after completion of practical lab to save power
G. Prerequisite Theory:
HTML ELEMENTS:
HTML Formatting Elements
Formatting elements were designed to display special types of text:
1|Page
• <b> - Bold text

• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:

Note: Comments are not displayed by the browser, but they can help document your HTML
source code.
H. Resources/Equipment Required
Sr.No. Instrument/Equipment
Specification Quantity
/Components/Trainer kit
1 Computer system with 1
operating system and
browser
2. HTML IDE or Code Editor 1
(Open source: Kompozer)
I. Safety and necessary Precautions followed

a. Turn off power switch only after computer is shut down.
b. Do not plug out any computer cables
J. Procedure to be followed/Source code :
2|Page
K. Observations and Calculations/Input-Output:
OUTPUT (PREVIEW ON BROWSER):
L. Practical related Quiz.

a. What are different heading tags in HTML?
b. How to execute a webpage?
c. Explain formatting tags of HTML.
3|Page
M. References / Suggestions
a. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
b. https://www.w3schools.com/html/
N. Assessment-Rubrics
% of
Criteria Rubrics Marks
point
Excellent (10-8 marks): Completed programs/scripts
correctly as per the requirements.
C1: Adequate (7-6 marks): Completed programs/scripts
Program correctly with approx. 70% requirements.
50 %
Completeness/ Poor (5-4 marks): Completed programs/scripts correctly
Correctness with 70% - 50% requirements.
Unsatisfactory (0-3 marks): Completed programs/ scripts
correctly with less than 50% requirements.
Excellent (10-8 marks): The code is clean, well-organized
and very easy to understand.
Adequate (7-6 marks): The code is fairly easy to read and
C2: understand.
25 %
Readability Poor (5-4 marks): The code is readable only by someone
who knows what it is supposed to be doing.
Unsatisfactory (0-3 marks): The code is poorly organized
and very difficult to understand.
Excellent (10-8 marks):
● Coding standards are followed in complete code while
naming variables/functions/ classes, explaining the
C3: purpose of variables/ functions/classes.
Coding ● The Complete code is well-documented with comments
25 %
Standards/ explaining the code.
Documentation Adequate (7-6 marks):
● Coding standards are followed in most of the code while
purpose of variables/ functions/classes.
4|Page
● Most of the code is documented with comments

explaining the code.
Poor (5-4 marks):
● Coding standards are followed in very little code while
● Very little code is documented with comments
Unsatisfactory (0-3 marks):
● Coding standards are not followed properly.
● Proper comments are not written explaining the code.
Total Marks for Practical = 0.5 * (Marks of C1) + 0.25 * (Marks of C2) + 0.25 * (Marks of C3)
Signature with Date:
5|Page
Date: ……………
Practical No.2: Use hyper link tag to navigate through different web pages as per given sample.
A. Objective:
To apply hyperlinks in a webpage.
PO1: Basic and Discipline specific knowledge: Be able to apply engineering knowledge
of computing appropriate to the problem

1. Webpage inter-connection skills.

Use hyper link tag to navigate through different web pages as per given sample.

a. Handle computer systems carefully with safety and necessary precaution
b. Turn off systems after completion of practical lab to save power
HTML Links - 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.
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
6|Page
• A visited link is underlined and purple

• An active link is underlined and red
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To change this, you
must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:_self - Default. Opens the document in
the same window/tab as it was clicked
• _blank - Opens the document in a new window or tab

• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window
browser

7|Page
K. Observations and Calculations/Input-Output (CE & IT software subjects):


a. What are the attributes of <a> tag?
b. What is the difference between absolute and relative URL?
M. References / Suggestions ( lab manual designer should give)

% of
point
C1: 50 %
8|Page
Program Adequate (7-6 marks): Completed programs/scripts

Completeness/ correctly with approx. 70% requirements.
Correctness
Poor (5-4 marks): Completed programs/scripts correctly
with 70% - 50% requirements.
C2: understand.
25 %
● The Complete code is well-documented with comments
Adequate (7-6 marks):
C3:
Coding
25 % ● Most of the code is documented with comments
Standards/
Documentation
Poor (5-4 marks):
9|Page
Date: ……………
Practical No.3: Use image tags to create web page as per given sample.
A. Objective:
To place image in a webpage.
PO4: Engineering Tools, Experimentation and Testing: Be able to use and
apply current technical concepts and best practices in information
technologies

1. Webpage image management skills.
Use image tags to create web page as per given sample.

Handle computer systems carefully with safety and necessary precaution
Turn off systems after completion of practical lab to save power
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web 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 is empty, it contains attributes only, and does not have a closing
tag.
The <img> tag has two required attributes:
• src - Specifies the path to the image

• alt - Specifies an alternate text for the image
<img src="url" alt="alternatetext">
10 | P a g e
browser

• Turn off power switch only after computer is shut down.
• Do not plug out any computer cables
11 | P a g e
OUTPUT (PREVIEW ON BROWSER)

1. What are the attributes of <img> tag?
2. Explain image maps in HTML

HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
https://www.w3schools.com/html/
% of
point
C1: Excellent (10-8 marks): Completed programs/scripts
Program correctly as per the requirements.
50 %
Completeness/ Adequate (7-6 marks): Completed programs/scripts
Correctness correctly with approx. 70% requirements.
12 | P a g e

C2: understand.
25 %
C3:
Coding
Standards/
Documentation
Poor (5-4 marks):
13 | P a g e
Date: ……………
Practical No.4: Use HTML table tags to create web page as per given sample.
A. Objective:
To create table in a webpage.

1. Webpage table management skills.

Use table tags to create web page as per given sample.

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Table Rows
Each table row starts with a <tr> and end with a </tr> tag.
tr stands for table row.
Table Headers
Sometimes you want your cells to be headers, in those cases use the <th> tag instead of
the <td> tag:
14 | P a g e
HTML Table Borders
HTML tables can have borders of different styles and shapes.
To add a border, use the CSS border property on table, th, and td elements:
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
th, td {
background-color: #96D4D4;
}
</style>
</head>
<body>
Dotted Table Borders

With the border-style property, you can set the appereance of the border.
The following values are allowed:
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden
15 | P a g e
browser

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables
K. Observations and Calculations/Input-Output :
OUTPUT (PREVIEW ON BROSWER):
16 | P a g e
1. How to create a table in a webpage? Explain necessary tags.
2. Explain the use of colspan and rowspan attributes.

% of
point
50 %
C2: understand.
25 %
C3: 25 % Excellent (10-8 marks):
17 | P a g e
Coding ● Coding standards are followed in complete code while

Standards/ naming variables/functions/ classes, explaining the
Documentation purpose of variables/ functions/classes.
Poor (5-4 marks):
18 | P a g e
Practical No.5: Use sorted (ordered) list to create web page as per given sample page.
A. Objective:
To apply ordered list in a webpage.
PO3: . Design/ development of solutions: Design solutions for engineering
well-defined technical problems and assist with the design of systems
components or processes to meet specified needs.

This practical is expected to develop the following skills for the
industry-identified competency: ‘Develop webpages using HTML’
List identification skill
Webpage development skills.

Use ordered list to create web page as per given sample.

HTML Ordered Lists
The HTML <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical.
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:
Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:
19 | P a g e
browser

Turn off power switch only after computer is shut down.
Do not plug out any computer cables
20 | P a g e

OUTPUT (PREVIEW)

Explain <ol> tag with its attributes.

% of
point
C1:
50 %
Correctness Poor (5-4 marks): Completed programs/scripts correctly
21 | P a g e

C2: understand.
25 %
C3:
Coding
Standards/
Documentation
Poor (5-4 marks):
22 | P a g e
Practical No.6: Use unsorted (unordered) list to create web page as per given sample page.
A. Objective:
To apply unordered list in a webpage.
PO1: Basic and Discipline specific knowledge: Be able to apply engineering knowledge
of computing appropriate to the problem
PO3: . Design/ development of solutions: Design solutions for engineering well-
defined technical problems and assist with the design of systems components or
processes to meet specified needs.


Use unordered list to create web page as per given sample.

Turn off systems after completion of practical lab to save power.
HTML Unordered Lists
The HTML <ul> tag defines an unordered (bulleted) 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:
23 | P a g e
Unordered HTML List - The Type Attribute

The CSS list-style-type property is used to define the style of the list item marker. It can have one
of the following values:
browser

Turn off power switch only after computer is shut down.
Do not plug out any computer cables
24 | P a g e

Output (Preview on browser):

Explain <ul> tag with its attributes.
M. References / Suggestions
% of
point
C1: 50 %
25 | P a g e

Correctness
C2: understand.
25 %
C3:
Coding
Standards/
Documentation
Poor (5-4 marks):
26 | P a g e
Practical No.7: Use definition (description) list to create web page as per given sample page.
A. Objective:
To apply definition list in a webpage.
PO3: . Design/ development of solutions: Design solutions for engineering well-
defined technical problems and assist with the design of systems components or
processes to meet specified needs.


Use definition list to create web page as per given sample.

HTML 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).
27 | P a g e
browser

J. Procedure to be followed/Source code (CE & IT software subjects):
Output (Preview on browser):
28 | P a g e

a. Explain definition list with all necessary tags.

29 | P a g e
% of
point
50 %
C2: understand.
25 %
C3:
Coding
Standards/
Documentation
Poor (5-4 marks):
30 | P a g e
31 | P a g e
Practical No.8: Use semantic tags to organize web page contents.
A. Objective:
To apply semantic tags to organize the web page contents.
Basic and Discipline specific knowledge: Be able to apply engineering
Design/ development of solutions: Be able to design, implement, and
evaluate a computer based system, process, component, or program to
meet the desired needs
Engineering practices for society, sustainability and environment: Apply
appropriate technology in context of society, sustainability, environment
and ethical practices.
Life-long learning: Ability to analyse individual needs and engage in
updating in the context of technological changes.

identified competency: ‘Develop webpages using HTML semantics’
2. Organization of web page.

Use semantic tags to organize web page contents as per given sample.

A semantic element clearly describes its meaning to both the browser and the
developer.
32 | P a g e
Examples of non-semantic elements: <div> and <span> - Tells nothing about its
content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines

its content.
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div
id="footer"> to indicate navigation, header, and footer.
In HTML there are some semantic elements that can be used to define different
parts of a web page:
• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>
HTML <section> Element

The <section> element defines a section in a document.
<section>
<h1>GP Rajkot</h1>
<p>Best polytechnic college in Saurashtra region.</p>
</section>
HTML <article> Element

The <article> element specifies independent, self-contained content.
<article>
<h2>Mozilla Firefox</h2>
33 | P a g e
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox

has been the second most popular web browser since January, 2018.</p>
</article>
HTML <header> Element

The <header> element represents a container for introductory content or a set of
navigational links.
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural
environment.
</p>
</article>
HTML <footer> Element

The <footer> element defines a footer for a document or section.
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
browser
34 | P a g e

Using sematic tags develop HTML page having following layout:
<header>
<nav>
<section> <aside>
<article>
<footer>
35 | P a g e
K. Observations and Calculations/Input-Output :

Observe the output on browser and compare it with the given layout.
36 | P a g e

1. What are different semantic tags in HTML?
2. How to display a footer in the web page?
3. Explain navigation tags of HTML.

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/html/
Max 25 marks
% of
point
C1:
Program
Complet Adequate (7-6 marks): Completed programs/scripts
50 %
eness/ correctly with approx. 70% requirements.
Correctn Poor (5-4 marks): Completed programs/scripts correctly
ess
37 | P a g e

C2:
understand.
Readabi 25 %
lity Poor (5-4 marks): The code is readable only by someone
C3:
Coding
Standar
ds/
Docume
Poor (5-4 marks):
ntation
Total Marks for Practical = 0.5 * (Marks of C1) + 0.25 * (Marks of C2) + 0.25 *
(Marks of C3)
Sign with Date
38 | P a g e
Static Webpage Design (4311603)
Practical No.9:
a. Create a student registration webpage using different HTML form elements.
b. Create student feedback form using different HTML form elements.
A. Objective:
To apply different form elements for designing interactive HTML web page .
1. Basic and Discipline specific knowledge: Be able to apply engineering
2. Design/ development of solutions: Be able to design, implement, and
evaluate a computer based system, process, component, or program to
meet the desired needs
3. Engineering practices for society, sustainability and environment: Apply
appropriate technology in context of society, sustainability, environment
and ethical practices.
4. Life-long learning: Ability to analyse individual needs and engage in
updating in the context of technological changes.

identified competency: ‘Develop webpages using HTML form elements
2. Use of various form elements.

a. Create a student registration webpage using different HTML form elements.
b. Create student feedback form using different HTML form elements.

39 | Page
The HTML <form> Elements
The HTML <form> element can contain one or more of the following form elements:
• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>
The <input> Element

One of the most used form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.
Example:
<form action="/action_page.html">
<label for="fname">First name:</label> <br>

<input type="text" id="fname" name="fname"> <br><br>
<input type="submit" value="Submit">
</form>
40 | Page
Output:
The <label> Element
The <label> element defines a label for several form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud
the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as radio
buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles
the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind
them together.
The <select> Element
The <select> element defines a drop-down list:
Example:
<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
41 | Page
Output:
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example:
<option value="fiat" selected>Fiat</option>
Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:
Example:

<select id="cars" name="cars" size="4" multiple>
</select> <br> <br>
42 | Page
</form>
Output:
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):
Example:
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser:
43 | Page
The <button> Element

The <button> element defines a clickable button:
Example:
<button type="button" World!')">Click Me!</button>
The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example:
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</fieldset>
</form>
44 | Page
The <datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
Example:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Output:
45 | Page
The <output> Element

The <output> element represents the result of a calculation (like one performed by a script).
<form action="/action_page.html"
> 0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
Output
46 | Page
Specification Quanti
/Components/Trainer kit ty

browser

1. Decide and list fields to be kept in the registration and feed back form. Eg.
Name, Email , Mobile No Etc.
2. Decide which form element will you keep for field.
3. Design student registration web page.
4. Design student feed back web page.
5. Observe the output and do the necessary corrections.
47 | Page
48 | Page
K. Observations and Calculations/Input-Outpu:


1. Which element is used to create multi-line text input?
2. What is button tag?
3. Explain use of select tag.
4. Explain use of output element.
5. What is fieldset?

49 | Page
Max 25 marks
% of
point
C1:
Complet correctly with approx. 70% requirements.
50 %
eness/ Poor (5-4 marks): Completed programs/scripts correctly
Correctn with 70% - 50% requirements.
ess
C2:
understand.
Readabi 25 %
C3: Adequate (7-6 marks):
Coding ● Coding standards are followed in most of the code while
Standar naming variables/functions/ classes, explaining the
25 %
ds/ purpose of variables/ functions/classes.
Docume ● Most of the code is documented with comments
ntation explaining the code.
Poor (5-4 marks):
50 | Page

(Marks of C3)
Sign with Date
51 | Page
Practical No.10:
Create a bank account opening form using different HTML form elements in
Kompozer.
A. Objective:
To apply different form elements for designing interactive bank account opening
web page using kompozer open source tool .
1. Basic and Discipline specific knowledge: Apply knowledge of basic mathematics,

science and engineering fundamentals and engineering specialization to solve the
engineering problems.
2. Problem analysis: Identify and analyse well-defined engineering problems using

codified standard methods.
3. Design/ development of solutions: Design solutions for engineering well-defined

technical problems and assist with the design of systems components or processes to
meet specified needs.
4. Engineering Tools, Experimentation and Testing: Apply modern engineering tools

and appropriate technique to conduct standard tests and measurements.

appropriate technology in context of society, sustainability, environment and ethical
practices.
6. Project Management: Use engineering management principles individually, as a

team member or a leader to manage projects and effectively communicate about
well-defined engineering activities.
7. Life-long learning: Ability to analyze individual needs and engage in updating in the
context of technological changes in field of engineering.

identified competency: ‘Develop webpages using HTML form elements
2. Use of various form elements.
52 | Page

CO3: Design and publish websites using the Kompozer tool.
Create a bank account opening form using different HTML form elements in Kompozer.

The HTML <form> Elements
The HTML <form> element can contain one or more of the following form elements:
• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>
The <input> Element

One of the most used form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.
Example:
<label for="fname">First name:</label> <br>

<input type="text" id="fname" name="fname"> <br><br>
</form>
53 | Page
Output:
The <label> Element
The <label> element defines a label for several form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud
the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as radio
buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles
the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind
them together.
The <select> Element
The <select> element defines a drop-down list:
Example:

<select id="cars" name="cars">
</select>
</form>
54 | Page
Output:
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example:
<option value="fiat" selected>Fiat</option>
Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:
Example:

<select id="cars" name="cars" size="4" multiple>
</select> <br> <br>
55 | Page
</form>
Output:
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):
Example:
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
56 | Page
The <button> Element

The <button> element defines a clickable button:
Example:
<button type="button" World!')">Click Me!</button>
The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example:
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</fieldset>
</form>
57 | Page
The <datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
Example:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Output:
58 | Page
The <output> Element

The <output> element represents the result of a calculation (like one performed by a script).
<form action="/action_page.html"
> 0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
Output
Installing KompoZer for Windows
• Downoad KompoZer (use version 0.7.10, not 0.8), free software available at http://kompozer.net/
• Save the downloaded kompozer-0.7.10-win32.zip file 1
59 | Page
• Right-click on the saved zip file and choose extract all, creating the kompozer-0.7.10-win32
directory.
• The kompozer-0.7.10-win32 directory contains the kompozer-0.7.10 directory, which contains all
of the extracted KompoZer files.
• To run, click on kompzer.exe in the kompozer-0.7.10 directory. This will only work if you have first
done the extract all in step 3.
Advantages of KompoZer
• WYSIWYG editing of pages, making web creation as easy as typing a letter with your word
processor.
• Integrated file management via FTP. Simply login to your web site and navigate through your files,
editing web pages on the fly, directly from your site.
• Reliable HTML code creation that will work with all of today’s most popular browsers.
• Jump between WYSIWYG Editing Mode and HTML using tabs.
• Tabbed editing to make working on multiple pages a snap.
• Powerful support for forms, tables, and templates.
• The easiest-to-use, most powerful Web Authoring System available for Desktop Linux, Microsoft
Windows and Apple Macintosh users.
60 | Page
KompoZer tool in Windows
Key features and capabilities of Kompozer
• FTP Site Manager

• New Color Picker
• Tabs
• CSS Editor
• Dash of style
• Customizable Toolbars
• Forms
• Cleaner Markup
• Visible Marks
• Table/Cell resizing rulers
• Automated Spell Checker
61 | Page

browser

1. Decide and list fields to be kept in bank account opening form. Eg. Name,
Email , Mobile No Etc.
2. Decide which form element will you keep for field.
3. Design bank account opening form using kompozer.
4. Observe the output and do the necessary corrections.
62 | Page
63 | Page


1. Which element is used to create multi-line text input?
2. What is button tag?
3. Explain use of select tag.
4. Explain use of output element.
64 | Page

Max 25 marks
% of
point
C1:
50 %
ess
C2:
understand.
Readabi 25 %
C3: purpose of variables/ functions/classes.
Coding ● The Complete code is well-documented with comments
Standar explaining the code.
25 %
ds/ Adequate (7-6 marks):
Docume ● Coding standards are followed in most of the code while
ntation naming variables/functions/ classes, explaining the
65 | Page
Poor (5-4 marks):

(Marks of C3)
Sign with Date
66 | Page
Practical No.11:
Use inline, internal and external style sheets for the student registration form and bank
account form created in previous practical.
A. Objective:
To create and apply inline . internal and external style sheets in the student registration
form and the bank account opening registration form .



practices.

identified competency: ‘Design and apply CSS to the HTML pages.’
1. Create CSS file for HTML web pages.
2. Use of various CSS tags.
3. Apply CSS to the developed HTML Page.

Use inline, internal and external style sheets for the student registration form and bank
account form created in previous practical.
67 | Page
What is CSS?
• CSS is the language we use to style a Web page.

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
CSS Syntax
A CSS rule consists of a selector and a declaration block.
• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded
by curly braces.
Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any
CSS property.
Inline styles are defined within the "style" attribute of the relevant element:
Example:
<!DOCTYPE html>
68 | Page
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Browser Output:
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
69 | Page
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Browser Output:
External CSS
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside
the head section.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
</body>
</html>
An external style sheet can be written in any text editor, and must be saved with a .css extension. The
external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:
70 | Page
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Browser Output:
H. Experimental set up/ Program Logic-Flow chart:

Start computer system and Open your HTML code editor Kompozer.
I. Resources/Equipment Required

browser
71 | Page
J. Safety and necessary Precautions followed

K. Procedure to be followed/Source code (CE & IT software subjects):
1. Open student registration form developed in Practical -9.

2. Design inline CSS, External CSS for the elements used in student registration
form.
3. Apply created CSS to the student registration form.
4. Observe the output in browser.
5. Open bank account opening form developed in Practical -10.
6. Design inline CSS, External CSS for the elements used in bank account opening
form.
7. Apply created CSS to the student registration form.
72 | Page
L. Observations and Calculations/Input-Output (CE & IT software subjects):

73 | Page
M. Practical related Quiz.

1. What is CSS?
2. Write syntax of CSS for button.
3. Compare inline CSS with external CSS.
4. What is the extension of CSS file?
N. References / Suggestions ( lab manual designer should give)

O. Assessment-Rubrics
Max 25 marks
% of
point
C1: Excellent (10-8 marks): Completed programs/scripts
Program correctly as per the requirements.
50 %
Complet Adequate (7-6 marks): Completed programs/scripts
eness/ correctly with approx. 70% requirements.
74 | Page
Correctn Poor (5-4 marks): Completed programs/scripts correctly

ess with 70% - 50% requirements.
C2:
understand.
Readabi 25 %
C3:
Coding
Standar
ds/
Docume
Poor (5-4 marks):
ntation
(Marks of C3)
Sign with Date
75 | Page
Practical No.12:
a. Use different CSS elements to create and format your Profile Page (Note: use CSS Background,
Text, Font, Tables, Links, Images, Margin etc)
b. Create and format your class time table Page Using Different CSS Elements (Note: use CSS
Background, Text, Font, Tables, Links, Images, Margin etc)
A. Objective:
a. To create the profile page and, create CSS elements and apply it on the profile
page.
b. To create the class time table page and, create CSS elements and apply it on the
page.



practices.

identified competency: ‘Design and apply CSS elements to the HTML
pages.’
• Create CSS elements in the css file.

• Apply CSS to the developed HTML Page.
76 | Page
• Use different CSS elements to create and format your Profile Page.
• Create and format your class time table Page Using Different CSS Elements.

What is CSS?
• CSS is the language we use to style a Web page.

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
CSS Syntax
A CSS rule consists of a selector and a declaration block.
• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded
by curly braces.
77 | Page
Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any
CSS property.
Inline styles are defined within the "style" attribute of the relevant element:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Browser Output:
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
Example:
<!DOCTYPE html>
<html>
<head>
78 | Page
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
</body>
</html>
Browser Output:
External CSS
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside
the head section.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
79 | Page
</body>
</html>
An external style sheet can be written in any text editor, and must be saved with a .css extension. The
external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Browser Output:
<html>
<head>
<link rel="stylesheet" href="pract12.css">
</head>
<body>
<h1> Hello World of H1 </h1>
<h2> Hello World of H2 </h2>
<table>
<tr><th> Table Title 1</th> <th> Table Title 2</th></tr>
80 | Page
<tr><td> Table Value 1</td> <td> Table Value 1</td></tr>

</table>
</body>
</html>
“pract12.css”
html {
overflow-x: hidden; }
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: #000;
background-color: #f4ede5; }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400; color:green;}
h1, h2 {
font-weight: 700; }
table, th, td {
border: 3px solid black;
color: blue;
text-align: center;
}
Browser Output:
81 | Page


browser

1. Design profile Page in HTML.

2. Design External CSS for the elements used in profile page.
3. Apply created CSS to the profile page.
82 | Page
5. Design class time table Page in HTML.

6. Design External CSS for the elements used in time table page.
7. Apply created CSS to the time table page.
83 | Page

84 | Page

1. What is CSS?
2. Write syntax of CSS for button.
3. Compare inline CSS with external CSS.
4. What is the extension of CSS file?

Max 25 marks
% of
point
C1: 50 %
85 | Page

eness/
Correctn
C2:
understand.
Readabi 25 %
C3:
Coding
Standar
ds/
Docume
Poor (5-4 marks):
ntation
(Marks of C3)
Sign with Date
86 | Page
Practical No.13:
Use JavaScript to perform the following operations:
a. find roots of quadratic equation
b. find the highest from given three values
A. Objective:
a. To create java script that finds roots of quadratic equation
b. To create java script that finds the highest from given three values



practices.

identified competency: ‘Create Java script for the web pages.’

CO5: Write client-side script using JavaScript
Use JavaScript to perform the following operations: a. find roots of quadratic equation b.
find the highest from given three values

87 | Page
This program computes roots of a quadratic equation when its coefficients are known.
The standard form of a quadratic equation is:
ax2 + bx + c = 0, where
a, b and c are real numbers and
a≠0
To find the roots of such equation, we use the formula,

(root1,root2) = (-b ± √b2-4ac)/2
The term b2-4ac is known as the discriminant of a quadratic equation. It tells the nature of the
roots.
If the discriminant is greater than 0, the roots are real and different.
If the discriminant is equal to 0, the roots are real and equal.
If the discriminant is less than 0, the roots are complex and different.
88 | Page
What are Variables?
Variables are containers for storing data (storing data values).
In this example, x, y, and z, are variables, declared with the var keyword:
Example
var x = 5;
var y = 6;
var z = x + y;
All JavaScript variables must be identified with unique names.
These unique names are called identifiers.
Identifiers can be short names (like x and y) or more descriptive names (age, sum, totalVolume).
The general rules for constructing names for variables (unique identifiers) are:
• Names can contain letters, digits, underscores, and dollar signs.

• Names must begin with a letter.
• Names can also begin with $ and _ (but we will not use it in this tutorial).
• Names are case sensitive (y and Y are different variables).
• Reserved words (like JavaScript keywords) cannot be used as names.


browser
89 | Page

90 | Page

a. Expected Input: - Enter the values of a, b and c.
Calculate the roots based on the given values.
Expected output: - Print the roots.
b. Expected input: - Enter three numbers.

Find the greatest number.
Expected output: - ___ is the Greatest Number.

1. Explain if .. else in Java Script.
2. How to declare a variable in java script?
3. What is the use of let in Java Script?
91 | Page
4. Explain different arithmetic operators in JavaScript.

1. Javascript – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/js/
Max 25 marks
% of
point
C1:
50 %
ess
C2:
understand.
Readabi 25 %
C3: ● Coding standards are followed in complete code while
Coding naming variables/functions/ classes, explaining the
25 %
Standar purpose of variables/ functions/classes.
ds/ ● The Complete code is well-documented with comments
92 | Page
Docume Adequate (7-6 marks):

ntation ● Coding standards are followed in most of the code while
Poor (5-4 marks):
(Marks of C3)
Sign with Date
93 | Page
Practical No.14:
Use JavaScript to check whether given character is vowel or consonant using if else ladder.
A. Objective:
To create to check whether given character is vowel or consonant using if else
ladder.



practices.

identified competency: ‘Create Java script for the web pages.’

Use JavaScript to check whether given character is
vowel or consonant using if else ladder.

94 | Page
Very often when you write code, you want to perform different actions for different
decisions. You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
• Use if to specify a block of code to be executed, if a specified condition is true

• Use else to specify a block of code to be executed, if the same condition is false
• Use else if to specify a new condition to test, if the first condition is false
The else if Statement

Use the else if statement to specify a new condition if the first condition is false.
Syntax
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
Example
If time is less than 10:00, create a "Good morning" greeting, if not, but time is less than
20:00, create a "Good day" greeting, otherwise a "Good evening"
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
95 | Page
VOWELS and CONSONANTS
In alphabet from a to z, there are five vowels e.g. ‘a’, ‘e’, ‘i’, ‘o’, ‘u’
All other alphabet other than vowels are considered as Consonants.


browser

96 | Page
Given Input : characters from a to z.

Expected output: “Entered Character is CONSONANT” or “Entered Character is VOWEL”
based on the character you have entered.

1. Explain if .. else ladder in Java Script.

Max 25 marks
% of
point
C1: 50 %
97 | Page

eness/
Correctn
C2:
understand.
Readabi 25 %
C3:
Coding
Standar
ds/
Docume
Poor (5-4 marks):
ntation
(Marks of C3)
Sign with Date
98 | Page
Practical No.15: To use JavaScript to check whether given character is vowel or

consonant using switch case.
A. Objective:
To demonstrate usage of Switch case in JavaScript.
evaluate a computer based system, process, component, or program to meet
the desired needs
3. Engineering Tools, Experimentation and Testing: Be able to use and apply
current technical concepts and best practices in information technologies.
4. Life-long learning: Ability to analyze individual needs and engage in
updating in the context of technological changes in field of engineering.

This practical is expected to develop the following skills for the industry-identified
competency: ‘Develop client side script using JavaScript for the webpages’

Use JavaScript to check whether given character is vowel or consonant using switch case.

The switch statement is used to perform different actions based on different

conditions.
Syntax
switch(expression) {
case x:
99 | Page
// code block
break;
case y:
// code block
break;
default:
// code block
}
This is how it works:
• The switch expression is evaluated once.

• The value of the expression is compared with the values of each case.
• If there is a match, the associated block of code is executed.
• If there is no match, the default code block is executed.


browser
2. HTML IDEs and Code 1

Editors Open Source:
Kompozer

100 | Page
101 | Page

1. What is a switch case statement in JavaScript?
2. How do you handle uppercase and lowercase characters when checking for vowels or
consonants using a switch case statement?
3. What are some other use cases for switch case statements in JavaScript?

102 | Page
% of
point
50 %
C2: understand.
25 %
C3:
Coding
Standards/
Documentation
Poor (5-4 marks):
103 | Page
Date: ……………
Practical No.16: To use JavaScript to print first 10 even numbers.
A. Objective:
To demonstrate usage of for loop in JavaScript.
the desired needs


Use JavaScript to print first 10 even numbers.

Loops can execute a block of code several times.
The For Loop
For statement creates a loop with 3 optional expressions:
104 | Page
Syntax:
for (expression 1; expression 2; expression 3)
{
// code block to be executed
}
• Expression 1 is executed (one time) before the execution of the code block.
• Expression 2 defines the condition for executing the code block.
• Expression 3 is executed (every time) after the code block has been
executed.

browser

Kompozer

105 | Page

1. List different type of loops supported in JavaScript ?
2. Perform the same practical using a different looping statement.
106 | Page
M. References / Suggestions (lab manual designer should give)

% of
point
50 %
C2: understand.
25 %
C3: ● Coding standards are followed in most of the code while
25 %
Standards/ purpose of variables/ functions/classes.
Documentation ● Most of the code is documented with comments
Poor (5-4 marks):
107 | Page

108 | Page
Date: ……………
Practical No.17: To use JavaScript to calculate power of given number.
A. Objective:
To demonstrate usage of function in JavaScript.
the desired needs


Use JavaScript to calculate power of given number.

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: {}
109 | Page
function name(parameter1, parameter2, parameter3)

{
// code to be executed
}
Function parameters are listed inside the parentheses () in the function definition.
Function arguments are the values received by the function when it is invoked.
Inside the function, the arguments (the parameters) behave as local variables.
Function Invocation
The code inside the function will execute when "something" invokes (calls) the
function:
• When an event occurs (when a user clicks a button)

• When it is invoked (called) from JavaScript code
• Automatically (self invoked)

browser

Kompozer

110 | Page
111 | Page

1. Why do we use functions?
2. What happens when JavaScript reaches a return statement?

112 | Page
% of
point
50 %
C2: understand.
25 %
C3:
Coding
Standards/
Documentation
Poor (5-4 marks):
113 | Page
114 | Page
Date: ……………
Practical No.18: To use JavaScript to print multiplication table of given number.
A. Objective:
To demonstrate usage of for loop in JavaScript.
the desired needs


Use JavaScript to print multiplication table of given number.

The 'for' loop is the most compact form of looping. It includes the following three
important parts −
The loop initialization where we initialize our counter to a starting value. The
initialization statement is executed before the loop begins.
The test statement which will test if a given condition is true or not. If the condition is
true, then the code given inside the loop will be executed, otherwise the control will
come out of the loop.
115 | Page
The iteration statement where you can increase or decrease your counter.
You can put all the three parts in a single line separated by semicolons.
Syntax
The syntax of for loop is JavaScript is as follows −
for (initialization; test condition; iteration statement)
Statement(s) to be executed if test condition is true

browser

Kompozer

116 | Page
117 | Page

1. How would you modify this program to print the multiplication table up to a higher
number than 10?
2. How does the for loop work in this program?

118 | Page
% of
point
Excellent (10-8 marks): Completed programs/scripts correctly
as per the requirements.
C1: Adequate (7-6 marks): Completed programs/scripts correctly
Program with approx. 70% requirements.
50 %
Completeness/ Poor (5-4 marks): Completed programs/scripts correctly with
Correctness 70% - 50% requirements.
Excellent (10-8 marks): The code is clean, well-organized and
very easy to understand.
C2: understand.
25 %
Readability Poor (5-4 marks): The code is readable only by someone who
knows what it is supposed to be doing.
Unsatisfactory (0-3 marks): The code is poorly organized and
very difficult to understand.
C3:
Coding
Standards/
Documentation
Poor (5-4 marks):
● Very little code is documented with comments explaining
the code.
119 | Page
Date: ……………
Practical No.19: Use JavaScript user defined functions to perform the following operations:
a. to calculate sum of 1 to n
b. to check whether given number is prime or not.
A. Objective:
To demonstrate usage of user defined functions in JavaScript.
the desired needs


Use JavaScript to create user defined functions for calculating sum of 1 to n numbers and
to check whether a given number is prime or not.

JavaScript User-Defined Functions:
An user-defined function saves us from rewriting the same code again and again and
helps us to make our application smaller.
120 | Page
JavaScript has so many built-in functions, besides that you can make your own as per
the need.
Syntax
General structure of the user defined function is:
function function_name(par1, par2,..)
Statement

browser

Kompozer

121 | Page
(a) To calculate sum of 1 to n
(b) To check whether given number is prime or not.
122 | Page

(a)
(b)

1. What is the difference between a function declaration and a function expression in
JavaScript?
123 | Page
2. How can you pass arguments to a function in JavaScript, and how do you access those
arguments inside the function?
3. What is the purpose of a return statement in a function, and how does it work?

124 | Page
% of
point
50 %
C2: understand.
25 %
C3:
Coding
Standards/
Documentation
Poor (5-4 marks):
the code.
125 | Page
126 | Page
Date: ……………
Practical No.20: Use JavaScript to perform the following operations:
a. take input of student name and address and display in a dialog box.
b. change background color of webpage as selected by user from a list of colors given in combo box.
A. Objective:
To use the concepts of Event handling in JavaScript.

the desired needs


Use JavaScript to take input of student name and address and display in a dialog box and
to change background color of webpage as selected by user from a list of colors given in
combo box .

• JavaScript's interaction with HTML is handled through events that occur when the user or
the browser manipulates a page.
• When the page loads, it is called an event. When the user clicks a button, that click too is
an event. Other examples include events like pressing any key, closing a window, resizing
a window, etc.
127 | Page
• Developers can use these events to execute JavaScript coded responses, which cause
buttons to close windows, messages to be displayed to users, data to be validated, and
virtually any other type of response imaginable.
• Events are a part of the Document Object Model (DOM) Level 3 and every HTML element
contains a set of events which can trigger JavaScript Code.
• onclick Event Type
This is the most frequently used event type which occurs when a user clicks the left
button of his mouse. You can put your validation, warning etc., against this event type.
• onsubmit Event Type
onsubmit is an event that occurs when you try to submit a form. You can put your form
validation against this event type.

browser

Kompozer

128 | Page
(a) To take input of student name and address and display in a dialog box
(b) To change background color of webpage as selected by user from a list of colors given in
combo box.
129 | Page
130 | Page

(a)
(b)
131 | Page

1. How do you handle form events in JavaScript?
2. List some of the HTML 5 Standard Events?

% of
point
C1: as per the requirements.
Program Adequate (7-6 marks): Completed programs/scripts correctly
50 %
Completeness/ with approx. 70% requirements.
Correctness Poor (5-4 marks): Completed programs/scripts correctly with
70% - 50% requirements.
132 | Page

C2: understand.
25 %
C3:
Coding
Standards/
Documentation
Poor (5-4 marks):
the code.
133 | Page
Date: ……………
Practical No.21: Use JavaScript to perform the following operations:
a. Calculate the factorial of a given number entered into a textbox. Display the result in
another textbox.
b. Perform arithmetic operations on two numbers entered into textboxes. Use Radio buttons
to select arithmetic operations (Addition, Subtraction, Multiplication and Division). Display
the result in another textbox.
A. Objective:
To demonstrate usage of user defined functions and event handling in JavaScript.
the desired needs


Use JavaScript to create user defined functions for calculating sum of 1 to n numbers and
to check whether a given number is prime or not.

134 | Page
JavaScript User-Defined Functions:
An user-defined function saves us from rewriting the same code again and again and
helps us to make our application smaller.
JavaScript has so many built-in functions, besides that you can make your own as per
the need.
Syntax
General structure of the user defined function is:
function function_name(par1, par2,..)
Statement
• JavaScript's interaction with HTML is handled through events that occur when the user or the
browser manipulates a page.
• When the page loads, it is called an event. When the user clicks a button, that click too is an
event. Other examples include events like pressing any key, closing a window, resizing a window,
etc.
• Developers can use these events to execute JavaScript coded responses, which cause buttons to
close windows, messages to be displayed to users, data to be validated, and virtually any other
type of response imaginable.
• Events are a part of the Document Object Model (DOM) Level 3 and every HTML element
contains a set of events which can trigger JavaScript Code.
• onclick Event Type
This is the most frequently used event type which occurs when a user clicks the left
button of his mouse. You can put your validation, warning etc., against this event type.
• onsubmit Event Type
onsubmit is an event that occurs when you try to submit a form. You can put your form
validation against this event type.
135 | Page

browser

Kompozer

(a) To calculate the factorial of a given number entered into a textbox. Display the result in
another textbox.
136 | Page
(b) To perform arithmetic operations on two numbers entered into textboxes. Use Radio
buttons to select arithmetic operations (Addition, Subtraction, Multiplication and
Division). Display the result in another textbox.
137 | Page
138 | Page

(a)
(b)

1. What is the use of parseInt() function?
2. How do you create a custom event in JavaScript?
139 | Page
3. How do you handle errors that occur during event handling in JavaScript?

140 | Page
% of
point
50 %
C2: understand.
25 %
C3: ● Coding standards are followed in most of the code while
25 %
Standards/ purpose of variables/ functions/classes.
Documentation ● Most of the code is documented with comments
Poor (5-4 marks):
the code.
141 | Page

142 | Page

LM - Sunil Nakum

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

LM - Sunil Nakum

Uploaded by

Document Information

Original Title

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

LM - Sunil Nakum

Uploaded by

Copyright:

Available Formats

Diploma Engineering

[Computer Engineering, Semester II]

Directorate Of Technical Education

This is to certify that Mr./Ms ………………………………………………………………….

Signature of Course Faculty Head of the Department

3. Design/ development of solutions: Design solutions for engineering well-defined technical

5. Engineering practices for society, sustainability and environment: Apply appropriate

6. Project Management: Use engineering management principles individually, as a team

CO1: Design webpage using formatting, image and table tags.

CO3: Design and publish websites using the Kompozer tool.

CO5: Write client-side script using Javascript.

CO1 CO2 CO3 CO4 CO5

1. Use HTML text formatting tags to create √ - - - -

4. Use HTML table tags to create web page

Develop web pages using HTML and CSS.

Develop interactive web pages using HTML and Javascript.

Guidelines to Course Faculty

Instructions for Students

Sr no Practical Outcome/Title of experiment Marks

1 To use HTML text formatting tags to create web

4 To use HTML table tags to create web page as per

9 a. To create a student registration webpage using

10 To create a bank account opening form using

13 To use JavaScript to perform the following

17 To use JavaScript to calculate power of given

20 To use JavaScript to perform the following

C. Expected Skills to be developed based on competency:

D. Expected Course Outcomes(Cos)

F. Expected Affective domain Outcome(ADos)

HTML Formatting Elements

Formatting elements were designed to display special types of text:

• <b> - Bold text

HTML Comment Tag

2. HTML IDE or Code Editor 1

(Open source: Kompozer)

I. Safety and necessary Precautions followed

K. Observations and Calculations/Input-Output:

OUTPUT (PREVIEW ON BROWSER):

L. Practical related Quiz.

b. How to execute a webpage?

c. Explain formatting tags of HTML.

● Most of the code is documented with comments

Signature with Date:

C. Expected Skills to be developed based on competency:

1. Webpage inter-connection skills.

F. Expected Affective domain Outcome(ADos)

HTML links are hyperlinks.

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

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue

• A visited link is underlined and purple

The target attribute specifies where to open the linked document.

• _blank - Opens the document in a new window or tab

2. HTML IDE or Code Editor 1

(Open source: Kompozer)

I. Safety and necessary Precautions followed

J. Procedure to be followed/Source code :