DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE

Programme: B.E. CIE: ASSIGNMENT – 2 Semester: I

Course Title: INTRODUCTION TO WEB PROGRAMMING Course Code: BPLCK205A

Date: 19/12/2024 Submission: 27/12/2024 Section: A,B,C,D & E

G1 1 Illustrate the use of reset() method in JavaScript, creating a simple HTML document into
which create a form with the id = "myForm". In this form, there are four text fields: "First
Name", "Last Name", "Age", and "E-mail Id". There are two buttons that are "Submit",
and "Reset data". When we click the Reset data button, it should reset the field. (M4)
2 Create an example to display the sum of given numbers using JavaScript. (M5)
G2 1 Demonstrate the JavaScript event handler for “Click Event”. (M5)
2 Create following web page using HTML and CSS with tabular layout (M4)

G3 1 What is an HTML form tag? Discuss the different form attributes and design a simple form to
register for new user including username, password, email, mobile number, gender and
Hobbies. Create a simple form by using tags. (M4)
2 Demonstrate the following HTML5 Semantic tags- <article>, <aside>, <details>, <figcaption>,
<figure>, <footer>, <header>, <main>, <mark>, <section> for a webpage that gives
information about our college website. (M3)
G4 1 Demonstrate the JavaScript event handler for “MouseOver Event” (M5)
2 Create an Rotating ellipses using SVG (M2)
G5 1 Create following calculator interface with HTML and CSS (M3)
 2 Create a webpage to display a counter that counts the number of times an onmouseover event
was triggered. Initially, the counter will display the number 0. The value of this number will
increase whenever the user triggers an onmouseover event. (M5)
G6 1 Create a simple response web design. (M5)
2 Create an HTML page using JavaScript a click event to the page. When user clicks the
paragraph element, the text of the paragraph gets changed. On click the paragraph the
background color and font-size of elements will also change. (M5)
G7 1 create a resume using html and CSS. (M3)
2 What is positioning in CSS? Also explain margin and padding with snippet code. (M3)
G8 1 Create the animation will last for 10 seconds, and it will gradually change the background-color
of the element from "green" to "blue". (M3)
2 Create HTML page for the following table (M3)

What is the use of Border, width and Cellpadding attributes used in the table? (M4)
G9 1 What do you mean by RWD and demonstrate with snippet code? (M4)
2 Write HTML code to display following irregular table. (M4)

G10 1 Create polygon using SVG (M3)

2 What is style sheet? Explain various ways to write style rules in CSS with
example. (With snippet code). (M3)
G11 1 Create following calculator interface with HTML and CSS (M4)

2 What do you mean by “class” and “id” in CSS? Create a webpage using these class selectors
with snippet code. (M3)
G12 1 Create a data table using HTML and CSS using Pseudo class selector. (M4)
 2 Create An ellipse with a horizontal linear gradient from yellow to red (M3)

G13 1 Write the HTML snippet to show each letter of a word with new color, giving a rainbow
effect (M3)
2 create a testimonial page that shows the reviews of the customers along with their profile
pictures, name and designation. (M5)
G14 1 Create simple rotation using SVG (M2)

2
Create the equation using MathML (M3)
G15 1 Create a JavaScript project that will display a digital clock on the web page. The clock will
show the current time in the format of hours, minutes, and seconds. The clock will be updated
every second. We will also display the date and day of the week just below the clock. (M5)
2 Create the following object using SVG (M3)

G16 1

Create the equation using MathML (M2)

2 write HTML code for registration form with validation in JavaScript. (M3)
G17 1 Create aa Rounded Table Corners using CSS Only. (M4)

2 Explain with an example the use of hover when there is change in color whenever the cursor
enters the element. (M5)
G18 1 Create a webpage and demonstrate color and font properties. (M3)
2 Demonstrate the JavaScript event handler for “Focus Event”. (M5)
G19 1 Create a blink content using JavaScript. (M5)
2 Write a webpage with cascading style sheet to get following formatting for the paragraph.

Text color-green, Text-indentation – 2 cm, Font-courier, Font style-italic, Text case-uppercase

(M3)
G20 1 Create a HTML page using Java Script, which gives functionality of calculator like addition,
multiplication, division and subtraction. (M5)

2 Create following calculator interface with HTML and CSS (M3)

G21 1 Create presentation table using CSS. (M3)

2 Create following web page using HTML and CSS with tabular layout (M4)
G22 1 Demonstrate the JavaScript event handler for “Key down Event” (M5)
2 Create SVG which Rectangle that repeatedly fade away over 5 seconds(M2)
G23 1 Create a bootstrap button with an icon and text, also we will play with the color of the button,
icon, and text. (M5)

2 Create a webpage and demonstrate margin, padding and text properties. (M3)
G24 1 Create an example, using the HTML onclick attribute and assigning a JavaScript's function to
it. When the user clicks the given button, the corresponding function will get executed, and an
alert dialog box will be displayed on the screen. (M5)
2 Write HTML and CSS code for the following:
(i) set the background color for the active link states to "green".
(ii) Set the list style for unordered lists to "user defined logo".
(ii) Set image as logo for the page using external CSS. (M3)
G25 1 Create a webpage and demonstrate CSS properties. (M3)
2 Write a simple JavaScript that adds some numbers together, concatenates a couple of strings,
and then results in an alert () dialog and on the page. (M5)
G26 1 Create a simple HTML page using function in JavaScript that does not has arguments. (M5)
2 Write HTML code to design the page layout using table tag like header, sidebar and content
area. Head contain image as a background, menu using hyperlinks and login facility
respectively. Use External style sheet. (M3)
G27 1 Create a webpage using absolute and relative positioning. (M4)
2 Create A Top Navigation Bar using JavaScript. (M5)
G28 1 Create hoverable side navigation buttons with CSS (M3)
2 What is a function in Java JavaScript? Explain syntax for a function definition with an example.
(Snippet code) (M5)
G29 1 Create a following attributes for the link with example (snippet code)
a: link - a normal, unvisited link, a: visited - a link the user has visited, a: hover - a link when
the user mouses over it and a: active - a link the moment it is clicked (M4)
2 Create following equation using mathML (M2)

G30 1 create a resume using html and CSS and JavaScript.

2 Create a web page and provide a link element that, when clicked, causes an end user to
download an image file of a dog in a tree. Search for a real image and use its URL. (M4)
G31 1 Write a Java script to display today’s date and time on windows status bar. Time should be
updated at every one minute. (M5)
2 Create the following table using HTML and CSS (M4)

1 Create following webpage (M3)

G32
 s
2 Create an HTML page using JavaScript's onclick event. When the user clicks on
the paragraph element, the corresponding function will get executed, and the text of the
paragraph gets changed. On clicking the <p> element, the background color, size, border, and
color of the text will also get change. (M5)
1 Create following web page using HTML and CSS with tabular layout (M3)

G33

2 Create a paragraph will Changing the Color and Text Content of an Element using JavaScript.
(M5)
*M1-Module 1, M2-Module 2, M3-Module3, M4-Module 4 and M5-Module5
Roll No Group No Roll No Group No Roll No Group No Roll No Group No
01 TO 02 G1 21 TO 22 G11 41 TO 42 G21 61 To 62 G31
03 TO 04 G2 23 TO 24 G12 43 TO 44 G22 63 To 64 G32
05 TO 06 G3 25 TO 26 G13 45 TO 46 G23 65 To 66 G33
07 TO 08 G4 27 TO 28 G14 47 TO 48 G24
09 TO 10 G5 29 TO 30 G15 49 TO 50 G25
11 TO 12 G6 31 TO 32 G16 51 TO 52 G26
13 TO 14 G7 33 TO 34 G17 53 TO 54 G27
15 TO 16 G8 35 TO 36 G18 55 TO 56 G28
 17 TO 18 G9 37 TO 38 G19 57 TO 58 G29
19 TO 20 G10 39 TO 40 G20 59 TO 60 G30
Rubrics for Assessment: (Recommended)
SI. No. Criteria for Evaluation Marks
1 Punctuality in submission 2
2 Structure and format 2
3 orderliness/clarity, readability 2
4 Relevance, correctness of answers 2
5 Academic Honesty 2

Instructions to Students:
1. submit the assignment within the mentioned date.
2. Answers should be written in the assignment book only with proper question number
3. Write the assignment submission date and Assignment number on the assignment book’s front page.

Signature of Course Instructor with Date Signature of Course Coordinator with Date
Coverage of modules is adequate.

APPROVED

Signature of Senior Faculty/Expert with Date Signature of Senior Faculty/Expert with Date

Signature of Senior Faculty/Expert with Date Signature of Senior Faculty/Expert with Date

HEAD OF THE DEPARTMENT/CHAIRMAN – MODERATION COMMITTEE