Diploma Engineering

Laboratory Manual
(Static Webpage Design)
(4311603)

[Diploma Information Technology Semester-1]

Enrolment No
Name
Branch Computer Engineering
Academic Term 2023-2024(EVEN)
Institute A.V.Parekh Technical Institute

Directorate Of Technical Education

Gandhinagar - Gujarat
DTE’s Mission:
 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:
 To cater skilled engineers having potential to convert global challenges into opportunities
through embedded values and quality technical education.

Institute’s Mission:
 M1: Impart quality technical education and prepare diploma engineering professionals to
meet the need of industries and society.
 M2: Adopt latest tools and technologies for promoting systematic problem solving skills to
promote innovation and entrepreneurship
 M3: Emphasize individual development of students by incalculating morals, ethical and life
skills.

Department’s Vision:
 Develop globally competent Computer Engineering Professionals to achieve excellence in an
environment conducive for technical knowledge, skills, moral values and ethical values with
a focus to serve the society.

Department’s Mission:
 M1: To provide state of the art infrastructure and facilities for imparting quality education
and computer engineering skills for societal benefit.
 M2: Adopt industry oriented curriculum with an exposure to technologies for building
systems & application in computer engineering.
 M3: To provide quality technical professional as per the industry and societal needs,
encourage entrepreneurship, nurture innovation and life skills in consonance with latest
interdisciplinary trends.
 A. V. PAREKH TECHNICAL INSTITUTE, RAJKOT

Certificate

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

Enrolment No. ………….…………….…….…….……. of 2ND Semester of Diploma in Computer Engineering
has satisfactorily completed the term work in course Static Webpage Design (4311603) for the
academic year :2023-24 (EVEN) as prescribed in the GTU curriculum.

Place:……………..

Date: ……………………

Signature of Faculty
Static Webpage Design (4311603)

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.

4 | Page
Static Webpage Design (4311603)

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.

5 | Page
Static Webpage Design (4311603)

Practical Outcome - Course Outcome matrix

Course Outcomes (COs):

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

b. CO2: Use advanced HTML tags for designing interactive and semantic web pages.

c. CO3: Design and publish websites using the Kompozer tool.

d. CO4: Use CSS internal and/or external style sheets for designing web pages.

e. 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,

6 | Page
Static Webpage Design (4311603)

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.

7 | Page
Static Webpage Design (4311603)

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.
Static Webpage Design (4311603)

Continuous Assessment Sheet

Enrolment No:
Name:
Term: 2023-2024(EVEN)

Marks
Sr no Practical Outcome/Title of experiment 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
Static Webpage Design (4311603)

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

20 To 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.
21 To 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.
Total
Static Webpage Design (4311603)

Rubrics for Continuous Assessment- CA (25 Marks)

Component Criteria Marks Assessment

Demonstrates exceptional
proficiency in laboratory work and
Excellent (23-25) questionnaire assessments,
consistently applying skills and
understanding effectively.
Shows a strong command of both
laboratory work and questionnaire
Proficient (18-22)
assessments, with minor areas for
improvement.
Achieves a satisfactory level of
Laboratory
performance in laboratory work and
Work and
Satisfactory (13-17) questionnaire assessments, with
Questionnaire
room for improvement in some
areas.
Demonstrates limited proficiency in
Needs both laboratory work and
(8-12)
Improvement questionnaire assessments, with
significant areas for improvement.
Fails to meet acceptable standards in
both laboratory work and
Inadequate (0-7)
questionnaire assessments;
significant improvement is required.
 Static Webpage Design (4311603)

Rubrics for ESE (25 Marks)

Component Criteria Marks Assessment

Demonstrates exceptional proficiency in the micro

project, delivering an innovative, well-executed,
Excellent (23-25) and thoroughly documented project with
outstanding results.

Displays a strong grasp of the viva exam topics,

providing clear and well-reasoned answers, with
Proficient (18-22) minor areas for improvement.

Provides satisfactory responses during the viva

exam, covering the essential topics, with room for
Viva improvement in some areas.
Satisfactory (13-17)
Examination

Demonstrates limited understanding of the viva

exam topics, providing answers that may lack
Needs clarity or depth, with significant areas for
(8-12)
Improvement improvement.

Fails to meet acceptable standards in the viva

exam, providing answers that are unclear,
Inadequate (0-7) incorrect, or lacking substance;significant
improvement is required.

*Note: This Rubric is applied to the ESE Components of the Courses where End Semester Examination is
conducted by Institute Faculty Internally. For the Final Year Courses, ESE Exam is conducted by an External
Faculty appointed by university. So, for those courses the marks are converted from the GTU Grade and
equally divided into all the Cos.
Static Webpage Design (4311603)

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)
1. PO1: Basic and Discipline specific knowledge: Be able to apply
engineering knowledge of computing appropriate to the
problem
2. 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)

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

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

F. Expected Affective domain

Outcome(ADos)
1. Handle computer systems carefully with safety and necessary
precaution
2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:
HTML ELEMENTS:

1 | Page
Static Webpage Design (4311603)

HTML Formatting Elements

Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - 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:

<!-- Write your comments here -->

Note: Comments are not displayed by the browser, but they can
help document your HTML source code.

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

2 | Page
Static Webpage Design (4311603)

I. Procedure to be followed/Source code (CE & IT software subjects):

J. Observations and Calculations/Input-Output (CE & IT software subjects):

OUTPUT (PREVIEW ON BROWSER):

K. References / Suggestions ( lab manual designer should give)

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/html/

Signature of Faculty

3 | Page
Static Webpage Design (4311603)

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.
B. Expected Program Outcomes (POs)
1. PO1: Basic and Discipline specific knowledge: Be able to
apply engineering knowledge of computing appropriate
to the problem
2. 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. Webpage inter-connection skills.

2. Webpage development skills.

D. Expected Course Outcomes(Cos)

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

E. Practical Outcome(PRo)
Use hyper link tag to navigate through different web pages as per
given sample.

F. Expected Affective domain

Outcome(ADos)
1. Handle computer systems carefully with safety and
necessary precaution
2. Turn off systems after completion of practical lab to save
power
G. Prerequisite Theory:
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.

4 | Page
Static Webpage Design (4311603)

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

 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

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

5 | Page
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software

subjects):
OUTPUT (PREVIEW ON BROWSER):

K. References / Suggestions ( lab manual designer should give)

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw
Hill
2. https://www.w3schools.com/html/

Signature of Faculty

6 | Page
Static Webpage Design (4311603)

Practical No.3: Use image tags to create web page as per given sample.
A. Objective:
To place image in a webpage.
B. Expected Program Outcomes (POs)
1. PO1: Basic and Discipline specific knowledge: Be able to
apply engineering knowledge of computing appropriate
to the problem
2. 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. Webpage image management skills.

2. Webpage development skills.

D. Expected Course Outcomes(Cos)

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

E. Practical Outcome(PRo)
Use image tags to create web page as per given sample.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and
necessary precaution
2. Turn off systems after completion of practical lab to save
power
G. Prerequisite Theory:

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:

7 | Page
Static Webpage Design (4311603)

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image

<img src="url" alt="alternatetext">

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

J. Observations and Calculations/Input-Output (CE & IT software

subjects):
OUTPUT (PREVIEW ON BROWSER)

8 | Page
Static Webpage Design (4311603)

K. References / Suggestions ( lab manual designer should give)

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw
Hill
2. https://www.w3schools.com/html/

Signature of Faculty

9 | Page
Static Webpage Design (4311603)

Practical No.4: Use HTML table tags to create web page as per given
sample.
A. Objective:
To create table in a webpage.
B. Expected Program Outcomes (POs)
1. PO1: Basic and Discipline specific knowledge: Be able to
apply engineering knowledge of computing appropriate
to the problem
2. 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. Webpage table management skills.

2. Webpage development skills.

D. Expected Course Outcomes(Cos)

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

E. Practical Outcome(PRo)
Use table tags to create web page as per given sample.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and
necessary precaution
2. Turn off systems after completion of practical lab to save
power
G. Prerequisite Theory:

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.

10 | Page
Static Webpage Design (4311603)

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:

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:

11 | Page
Static Webpage Design (4311603)

 dotted
 dashed
 solid
 double
 groove
 ridge
 inset
 outset
 none
 hidden

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

12 | Page
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software subjects):

OUTPUT (PREVIEW ON BROSWER):

K. References / Suggestions ( lab manual designer should give)

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/html/

Signature of Faculty

13 | Page
Static Webpage Design (4311603)

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.
B. Expected Program Outcomes (POs)
1. PO1: Basic and Discipline specific knowledge: Be able to
apply engineering knowledge of computing appropriate
to the problem
2. 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.

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. List identification skill

2. Webpage development skills.

D. Expected Course Outcomes(Cos)

CO2: Use advanced HTML tags for designing interactive and semantic
web pages.

E. Practical Outcome(PRo)
Use ordered list to create web page as per given sample.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and
necessary precaution
2. Turn off systems after completion of practical lab to save
power
G. Prerequisite Theory:

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:

14 | Page
Static Webpage Design (4311603)

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of
the list item marker:

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

15 | Page
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software subjects):

OUTPUT (PREVIEW)

K. References / Suggestions ( lab manual designer should give)

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/html/

Signature of Faculty

16 | Page
Static Webpage Design (4311603)

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.
B. Expected Program Outcomes (POs)
1. PO1: Basic and Discipline specific knowledge: Be able to
apply engineering knowledge of computing appropriate
to the problem
2. 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.

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. List identification skill

2. Webpage development skills.

D. Expected Course Outcomes(Cos)

CO2: Use advanced HTML tags for designing interactive and semantic
web pages.

E. Practical Outcome(PRo)
Use unordered list to create web page as per given sample.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and
necessary precaution
2. Turn off systems after completion of practical lab to save
power
G. Prerequisite Theory:

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:

17 | Page
Static Webpage Design (4311603)

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:

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

18 | Page
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software subjects):

Output (Preview on browser):

K. References / Suggestions ( lab manual designer should give)

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/html/

Signature of Faculty

19 | Page
Static Webpage Design (4311603)

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.
B. Expected Program Outcomes (POs)
1. PO1: Basic and Discipline specific knowledge: Be able to
apply engineering knowledge of computing appropriate
to the problem
2. 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.

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. List identification skill

2. Webpage development skills.

D. Expected Course Outcomes(Cos)

CO2: Use advanced HTML tags for designing interactive and semantic
web pages.

E. Practical Outcome(PRo)
Use definition list to create web page as per given sample.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and
necessary precaution
2. Turn off systems after completion of practical lab to save
power
G. Prerequisite Theory:

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:

20 | Page
Static Webpage Design (4311603)

1. <dl> tag defines the description list.

2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

21 | Page
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software subjects):

Output (Preview on browser):

K. References / Suggestions ( lab manual designer should give)

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/html/

Signature of Faculty

22 | Page
Static Webpage Design (4311603)

Practical No.8: Use semantic tags to organize web page contents.

A. Objective:
To apply semantic tags to organize the web page contents.
B. Expected Program Outcomes (POs)
1. Basic and Discipline specific knowledge: Be able to apply engineering
knowledge of computing appropriate to the problem
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.

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 semantics’
1. HTML tags identification skills.
2. Organization of web page.
3. Webpage development skills.

D. Expected Course Outcomes(Cos)

CO2: Use advanced HTML tags for designing interactive and semantic web pages.

E. Practical Outcome(PRo)
Use semantic tags to organize web page contents as per given sample.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

23 | Page
Static Webpage Design (4311603)

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>
<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>

24 | Page
Static Webpage Design (4311603)

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:[email protected]">[email protected]</a></p>
</footer>

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

Using sematic tags develop HTML page having following layout:

<header>
<nav>
<section> <aside>
<article>
<footer>

25 | Page
Static Webpage Design (4311603)

26 | Page
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software subjects):

Observe the output on browser and compare it with the given layout.

K. References / Suggestions ( lab manual designer should give)

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/html/

Signature of Faculty

27 | Page
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 .
B. Expected Program Outcomes (POs)
1. Basic and Discipline specific knowledge: Be able to apply engineering
knowledge of computing appropriate to the problem
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.

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 form elements
1. HTML tags identification skills.
2. Use of various form elements.
3. Webpage development skills.

D. Expected Course Outcomes(Cos)

CO2: Use advanced HTML tags for designing interactive and semantic web pages.

E. Practical Outcome(PRo)
a. Create a student registration webpage using different HTML form elements.
b. Create student feedback form using different HTML form elements.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:
The HTML <form> Elements

The HTML <form> element can contain one or more of the following form elements:

28 | Page
Static Webpage Design (4311603)

 <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>

Output:

The <label> Element

The <label> element defines a label for several form elements.

29 | Page
Static Webpage Design (4311603)

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:

<form action="/action_page.html">

<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>
<input type="submit" value="Submit">
</form>

Output:

The <option> elements defines an option that can be selected.

30 | Page
Static Webpage Design (4311603)

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:

<form action="/action_page.html">

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> <br> <br>
<input type="submit" value="Submit">
</form>
Output:

31 | Page
Static Webpage Design (4311603)

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:

The <button> Element

The <button> element defines a clickable button:
Example:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
This is how the HTML code above will be displayed in a browser:

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.

32 | Page
Static Webpage Design (4311603)

Example:
<form action="/action_page.html">
<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>
<input type="submit" value="Submit">
</fieldset>
</form>

This is how the HTML code above will be displayed in a browser:

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:

<form action="/action_page.html">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">

33 | Page
Static Webpage Design (4311603)

<option value="Safari">
</datalist>
</form>

Output:

The <output> Element

The <output> element represents the result of a calculation (like one performed by a script).

<form action="/action_page.html"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
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>

34 | Page
Static Webpage Design (4311603)

Output

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

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.

35 | Page
Static Webpage Design (4311603)

36 | Page
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software subjects):

Observe the output on browser and compare it with the given layout.

K. References / Suggestions ( lab manual designer should give)

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/html/

Signature of Faculty

37 | Page
Static Webpage Design (4311603)

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 .
B. Expected Program 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.

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 form elements
1. HTML tags identification skills.
2. Use of various form elements.
3. Webpage development skills.

38 | Page
Static Webpage Design (4311603)

D. Expected Course Outcomes(Cos)

CO3: Design and publish websites using the Kompozer tool.

E. Practical Outcome(PRo)
Create a bank account opening form using different HTML form elements in Kompozer.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:
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>

39 | Page
Static Webpage Design (4311603)

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:

<form action="/action_page.html">

<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>
<input type="submit" value="Submit">
</form>

40 | Page
Static Webpage Design (4311603)

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:

<form action="/action_page.html">

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> <br> <br>
<input type="submit" value="Submit">

41 | Page
Static Webpage Design (4311603)

</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:

42 | Page
Static Webpage Design (4311603)

The <button> Element

The <button> element defines a clickable button:
Example:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
This is how the HTML code above will be displayed in a browser:

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:
<form action="/action_page.html">
<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>
<input type="submit" value="Submit">
</fieldset>
</form>

This is how the HTML code above will be displayed in a browser:

43 | Page
Static Webpage Design (4311603)

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:

<form action="/action_page.html">
<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:

44 | Page
Static Webpage Design (4311603)

The <output> Element

The <output> element represents the result of a calculation (like one performed by a script).

<form action="/action_page.html"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
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/

45 | Page
Static Webpage Design (4311603)

 Save the downloaded kompozer-0.7.10-win32.zip file 1

 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.

46 | Page
Static Webpage Design (4311603)

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

47 | Page
Static Webpage Design (4311603)

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

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.

48 | Page
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software subjects):

Observe the output on browser and compare it with the given layout.

49 | Page
Static Webpage Design (4311603)

K. References / Suggestions ( lab manual designer should give)

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/html/

Signature of Faculty

50 | Page
Static Webpage Design (4311603)

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.

B. Expected Program 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.

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.

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

appropriate technology in context of society, sustainability, environment and ethical
practices.

7. Life-long learning: Ability to analyze individual needs and engage in updating in the
context of technological changes in field of engineering.

C. Expected Skills to be developed based on competency:

This practical is expected to develop the following skills for the industry-
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.

D. Expected Course Outcomes(Cos)

CO4: Use CSS internal and/or external style sheets for designing web pages.

E. Practical Outcome(PRo)
Use inline, internal and external style sheets for the student registration form and bank
account form created in previous practical.
F. Expected Affective domain Outcome(ADos)
1. Handle computer systems carefully with safety and necessary precaution

51 | Page
Static Webpage Design (4311603)

2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:
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>

52 | Page
Static Webpage Design (4311603)

<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>

53 | Page
Static Webpage Design (4311603)

<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>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</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:

54 | Page
Static Webpage Design (4311603)

"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. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

J. 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.
8. Observe the output in browser.

55 | Page
Static Webpage Design (4311603)

K. bservations and Calculations/Input-Output (CE & IT software subjects):

Observe the output on browser and compare it with the given layout.

L. References / Suggestions ( lab manual designer should give)

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/html/

Signature of Faculty

56 | Page
Static Webpage Design (4311603)

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.

B. Expected Program 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.

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.

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

appropriate technology in context of society, sustainability, environment and ethical
practices.

7. Life-long learning: Ability to analyze individual needs and engage in updating in the
context of technological changes in field of engineering.

C. Expected Skills to be developed based on competency:

This practical is expected to develop the following skills for the industry-
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.
D. Expected Course Outcomes(Cos)
CO4: Use CSS internal and/or external style sheets for designing web pages.

E. Practical Outcome(PRo)

57 | Page
Static Webpage Design (4311603)

 Use different CSS elements to create and format your Profile Page.
 Create and format your class time table Page Using Different CSS Elements.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:
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.

58 | Page
Static Webpage Design (4311603)

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>

59 | Page
Static Webpage Design (4311603)

<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<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>

<h1>This is a heading</h1>

60 | Page
Static Webpage Design (4311603)

<p>This is a paragraph.</p>

</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>

61 | Page
Static Webpage Design (4311603)

<tr><td> Table Value 1</td> <td> Table Value 1</td></tr>

<tr><td> Table Value 2</td> <td> Table Value 2</td></tr>
<tr><td> Table Value 3</td> <td> Table Value 3</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:

62 | Page
Static Webpage Design (4311603)

H. Experimental set up/ Program Logic-Flow chart:

Start computer system and Open your HTML code editor Kompozer.

I. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

J. Procedure to be followed/Source code (CE & IT software subjects):

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.
4. Observe the output in browser.
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.
8. Observe the output in browser.

63 | Page
Static Webpage Design (4311603)

64 | Page
Static Webpage Design (4311603)

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

Observe the output on browser and compare it with the given layout.

L. References / Suggestions ( lab manual designer should give)

1. HTML & CSS – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/html/

Signature of Faculty

65 | Page
Static Webpage Design (4311603)

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

B. Expected Program 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.

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

appropriate technology in context of society, sustainability, environment and ethical
practices.

7. Life-long learning: Ability to analyze individual needs and engage in updating in the
context of technological changes in field of engineering.

C. Expected Skills to be developed based on competency:

This practical is expected to develop the following skills for the industry-
identified competency: ‘Create Java script for the web pages.’

D. Expected Course Outcomes(Cos)

CO5: Write client-side script using JavaScript

E. Practical Outcome(PRo)
Use JavaScript to perform the following operations: a. find roots of quadratic equation b.
find the highest from given three values

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution

66 | Page
Static Webpage Design (4311603)

2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:

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.

What are Variables?

Variables are containers for storing data (storing data values).

67 | Page
Static Webpage Design (4311603)

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.

H. Experimental set up/ Program Logic-Flow chart:

Start computer system and Open your HTML code editor Kompozer.

I. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

J. Procedure to be followed/Source code (CE & IT software subjects):

68 | Page
Static Webpage Design (4311603)

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

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.

L. References / Suggestions ( lab manual designer should give)

1. Javascript – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/js/

Signature of Faculty

69 | Page
Static Webpage Design (4311603)

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.

B. Expected Program 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.

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

appropriate technology in context of society, sustainability, environment and ethical
practices.

7. Life-long learning: Ability to analyze individual needs and engage in updating in the
context of technological changes in field of engineering.

C. Expected Skills to be developed based on competency:

This practical is expected to develop the following skills for the industry-
identified competency: ‘Create Java script for the web pages.’

D. Expected Course Outcomes(Cos)

CO5: Write client-side script using JavaScript

E. Practical Outcome(PRo)
Use JavaScript to check whether given character is
vowel or consonant using if else ladder.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power

70 | Page
Static Webpage Design (4311603)

G. Prerequisite Theory:

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";
}

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.

H. Experimental set up/ Program Logic-Flow chart:

71 | Page
Static Webpage Design (4311603)

Start computer system and Open your HTML code editor Kompozer.

I. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

J. Procedure to be followed/Source code (CE & IT software subjects):

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

Given Input : characters from a to z.

72 | Page
Static Webpage Design (4311603)

Expected output: “Entered Character is CONSONANT” or “Entered Character is VOWEL”

based on the character you have entered.

L. References / Suggestions ( lab manual designer should give)

1. Javascript – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/js/

Signature of Faculty

73 | Page
Static Webpage Design (4311603)

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.
B. Expected Program Outcomes (POs)
1. Basic and Discipline specific knowledge: Be able to apply engineering
knowledge of computing appropriate to the problem
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 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.

C. Expected Skills to be developed based on competency:

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

D. Expected Course Outcomes(Cos)

CO5: Write client-side script using JavaScript

E. Practical Outcome(PRo)
Use JavaScript to check whether given character is vowel or consonant using switch case.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:

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

conditions.
Syntax
switch(expression) {
case x:
// code block

74 | Page
Static Webpage Design (4311603)

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.
H. Safety and necessary Precautions followed
1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

75 | Page
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software subjects):

OUTPUT (PREVIEW ON BROWSER):

K. References / Suggestions ( lab manual designer should give)

1. Javascript – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/js/

Signature of Faculty

76 | Page
Static Webpage Design (4311603)

Practical No.16: To use JavaScript to print first 10 even numbers.

A. Objective:
To demonstrate usage of for loop in JavaScript.
B. Expected Program Outcomes (POs)
1. Basic and Discipline specific knowledge: Be able to apply engineering
knowledge of computing appropriate to the problem
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 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.

C. Expected Skills to be developed based on competency:

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

D. Expected Course Outcomes(Cos)

CO5: Write client-side script using JavaScript

E. Practical Outcome(PRo)
Use JavaScript to print first 10 even numbers.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:
Loops can execute a block of code several times.
The For Loop
For statement creates a loop with 3 optional expressions:

77 | Page
Static Webpage Design (4311603)

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.

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

78 | Page
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software subjects):

OUTPUT (PREVIEW ON BROWSER):

K. References / Suggestions (lab manual designer should give)

1. Javascript – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/js/

Signature of Faculty

79 | Page
Static Webpage Design (4311603)

Practical No.17: To use JavaScript to calculate power of given number.

A. Objective:
To demonstrate usage of function in JavaScript.
B. Expected Program Outcomes (POs)
1. Basic and Discipline specific knowledge: Be able to apply engineering
knowledge of computing appropriate to the problem
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 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.

C. Expected Skills to be developed based on competency:

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

D. Expected Course Outcomes(Cos)

CO5: Write client-side script using JavaScript

E. Practical Outcome(PRo)
Use JavaScript to calculate power of given number.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:

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: {}

80 | Page
Static Webpage Design (4311603)

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)

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

81 | Page
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software subjects):

OUTPUT (PREVIEW ON BROWSER):

K. References / Suggestions (lab manual designer should give)

1. Javascript – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/js/
Signature of Faculty

82 | Page
Static Webpage Design (4311603)

Practical No.18: To use JavaScript to print multiplication table of given number.

A. Objective:
To demonstrate usage of for loop in JavaScript.
B. Expected Program Outcomes (POs)
1. Basic and Discipline specific knowledge: Be able to apply engineering
knowledge of computing appropriate to the problem
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 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.

C. Expected Skills to be developed based on competency:

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

D. Expected Course Outcomes(Cos)

CO5: Write client-side script using JavaScript

E. Practical Outcome(PRo)
Use JavaScript to print multiplication table of given number.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:

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.

83 | Page
Static Webpage Design (4311603)

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

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

84 | Page
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software subjects):

OUTPUT (PREVIEW ON BROWSER):

K. References / Suggestions (lab manual designer should give)

1. Javascript – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/js/

Signature of Faculty

85 | Page
Static Webpage Design (4311603)

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.
B. Expected Program Outcomes (POs)
1. Basic and Discipline specific knowledge: Be able to apply engineering
knowledge of computing appropriate to the problem
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 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.

C. Expected Skills to be developed based on competency:

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

D. Expected Course Outcomes(Cos)

CO5: Write client-side script using JavaScript

E. Practical Outcome(PRo)
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.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:

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.

86 | Page
Static Webpage Design (4311603)

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

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

Procedure to be followed/Source code (CE & IT software subjects):

(a) To calculate sum of 1 to n

87 | Page
Static Webpage Design (4311603)

(b) To check whether given number is prime or not.

I. Observations and Calculations/Input-Output (CE & IT software subjects):

OUTPUT (PREVIEW ON BROWSER):
(a)

88 | Page
Static Webpage Design (4311603)

(b)

J. References / Suggestions (lab manual designer should give)

1. Javascript – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/js/

Signature of Faculty

89 | Page
Static Webpage Design (4311603)

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.

B. Expected Program Outcomes (POs)

1. Basic and Discipline specific knowledge: Be able to apply engineering
knowledge of computing appropriate to the problem
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 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.

C. Expected Skills to be developed based on competency:

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

D. Expected Course Outcomes(Cos)

CO5: Write client-side script using JavaScript

E. Practical Outcome(PRo)
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 .

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:
 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.
Static Webpage Design (4311603)

 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.

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

(a) To take input of student name and address and display in a dialog box
Static Webpage Design (4311603)

(b) To change background color of webpage as selected by user from a list of colors given in
combo box.

J. Observations and Calculations/Input-Output (CE & IT software subjects):

OUTPUT (PREVIEW ON BROWSER):
(a)

(b)
Static Webpage Design (4311603)

K. References / Suggestions (lab manual designer should give)

1. Javascript – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/js/

Signature of Faculty
Static Webpage Design (4311603)

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.
B. Expected Program Outcomes (POs)
1. Basic and Discipline specific knowledge: Be able to apply engineering
knowledge of computing appropriate to the problem
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 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.

C. Expected Skills to be developed based on competency:

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

D. Expected Course Outcomes(Cos)

CO5: Write client-side script using JavaScript

E. Practical Outcome(PRo)
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.

F. Expected Affective domain Outcome(ADos)

1. Handle computer systems carefully with safety and necessary precaution
2. Turn off systems after completion of practical lab to save power

G. Prerequisite Theory:

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.
Static Webpage Design (4311603)

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.

H. Safety and necessary Precautions followed

1. Turn off power switch only after computer is shut down.
2. Do not plug out any computer cables

I. Procedure to be followed/Source code (CE & IT software subjects):

(a) To calculate the factorial of a given number entered into a textbox. Display the result in
another textbox.
Static Webpage Design (4311603)

(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.
Static Webpage Design (4311603)
Static Webpage Design (4311603)

J. Observations and Calculations/Input-Output (CE & IT software subjects):

OUTPUT (PREVIEW ON BROWSER):
(a)

(b)

K. References / Suggestions (lab manual designer should give)

1. Javascript – The Complete Reference, Thomas A. Powell, McGraw Hill
2. https://www.w3schools.com/js/

Signature of Faculty