KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE

END SEMESTER PRACTICAL EXAMINATION

Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Design the following list using HTML with CSS according to following specification

Font : Times New Roman

Font Size : 40 Pixel
Text color : Red for hi
Text color : yellow for z and x
Back ground color : Green
2. Design a web page using bootstrap following grid system with below specifications in
the columns.

Demo for bootstrap grid system : Pink color

First column : Orange color
Second and third column : Blue color
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Design a web page HTML along with CSS draw the below box with following
specifications

Border color : Red color

Back ground color : Aqua
Font size : 30 pixel
Text decoration : Underline
Sample output

[Link] a Java Script program to get the two input from user using prompt window
and calculate sum Sample Input and Output
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Write an external css ([Link]) using the properties given below:

Element Property Style
Background color #FAFAD2
Text color #E8DEE5
Font Times New Roman, Arial
Text size 12 pixels
Text case Uppercase
Text alignment Center
Font style Italic
Padding 10 pixels, 20 pixels, 12 pixels,
22 pixels

2. Write a Java Script code to validate the above form’s mail ID

Mail ID with @ and dot (.) symbols
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Design a webpage layout using Flexbox that meets the following criteria:
The webpage should contain a div element with a class of "container". Inside the
"container", there should be three div elements with classes "box1", "box2", and
"box3". Each "box" should be distinctly styled and should display text indicating its
name (e.g., "Box 1", "Box 2", "Box 3"). The boxes should be aligned horizontally
across the container. "Box 1" should take up twice the space compared to "Box 2" and
"Box 3". The boxes should have equal spacing between them, including space at the
start and end of the container.

2. Write a Java Script program to validate Phone Number. It is non-empty Must contains
and the number must be in 10 digits.
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Design a following table using HTML with following CSS Properties

Element Property Style
Background color red
Text color green
Font Times New Roman, Arial
Text size 12 pixels
Text case Uppercase

Match Team Result

Type

Test India Australia India won by 132 runs

England South Africa Draw
ODI New Zealand West Indies New Zealand won by 5
wickets
Pakistan Sri Lanka Sri Lanka won by 70 runs
Bangladesh India India won by 3 wickets

2. Write a JavaScript program to get the Date of Birth using form and It must be in
dd/mm/yyyy format.
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Write HTML code along with external CSS design and display the text “Computer
Science and Engineering”

Element Property Style

Text color YELLOW

Font ARIAL

Text size 12 pixels

Letter Space 30px

Line Thickness 20px

Line Style Wavy

2. Write a Java Script program to get birth year from user using prompt window and
calculate the age.
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Design the following Grid system using HTML along with CSS

2. Write a HTML code to display the various typographical effects using Bootstrap as shown
below:

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text:

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Write a HTML with external CSS to design a following image with repeat option and
disable non repeat option

2. Design the following table using HTML and include following Bootstrap classes.
• "table table-hover table-dark" – First Row
• "table-active" - Second Row
• "table-danger" - Third Row
• "table-bordered" - Fourth Row and Fifth row

KCE EEE CSE

IT MECH CSD CY

ECE CST ECE

EEE ETE

WEB DESIGN WEB PAGE

 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Create a web page to display the following list (Border – Blue Color)

2. Write a Javascript code to perform the following array methods().

• Create an Array of 7 items including number and string, stored inside a variable
called myArr and display it in console window.
• Add a new number item to the beginning of the array.
• Display it in the console window.
• Remove the last item in the array.
• Arrange the array in ascending order.
• Join the arrays together in a single array.
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. A pet shop keeper wants to develop a website for his sales. In that shop two cats are
available namely “tom”, “tim”. You have to help to shop keeper to create website.

The website contains following styles

Text color : Red

Border : 20px
Border color for Tom : Red
Border color for Tim : Green
Transparent : 0.5
Make the image as rounded image

2. Design the following web page using HTML and validate the form using
JavaScript based on given specification.

Specification to validate the form:

1. Name and email field should not be null.

2. Name should not exceed five single characters
3. Email id should not be less than 10 characters before @
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Develop a web page to display the following list

2. Write a Javascript BOM to display the below.

[Link]()
[Link]()
[Link]
[Link]
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Design the following webpage using grid layout

2. Write a Javascript
code to Element Property Style perform the
following font-family: "Lucida Sans", sans-serif; array
methods(). 1. Blue , [Link] , [Link] blue
• Create Background Colors , [Link] , 5. Purple , [Link] , a Mixed Array
(myarray) [Link] Brown , [Link] green , with 10
[Link] brown
Elements.
• Create a Sub array with 5 elements (using slice() myarray1)
• Display it in the console window.
• Remove the First item in the array.
• Join the above two arrays together in a single array (myarray2).
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Design the following web page with conditions.

a) When the mouse cursor press on the link it redirected to the web site called
“[Link]
b) Initially the link display Red color
c) It changes to Green color when the mouse over on it
d) Yellow color will displayed when the link in clicked.
e) When the link visited again then the color will be Blue.

2. Design a web page to show Bootstrap table classes with border and color.
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Create a webpage to display the following form and apply the CSS properties

Element Property Style

Background colour Yellow
Text color Green
Font Arial
Text case Uppercase

2. Design a task to create a layout utilizing Bootstrap's grid system and set its bg-color as
“Green”.
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Design a webpage to display the following table.

2. Design the following table using Bootstrap.

 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Design the following table using HTML

Element Property Style

● Table Background : use Images & Favourite colours

● Table Width 60%

● Table Data Text alignment - Center

2. Create a Html code to display the student profile consists of Name, age ,degree ,College
name in table for 5 students. Using Javascript DOM ,Change the background color of page
into yellow and alter the table heading color to red.
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Design the following web pages using CSS box model (Border – blue violet color).

2. Create an HTML page with Bootstrap included to display the below content:

HELLO KARPAGAM FRIENDS

 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Create a web page using HTML and CSS Flexbox that includes: (90 Marks)
- A header section with a navigation bar.
- A main content area divided into three sections: a sidebar, a main content area, and an
aside.
- A footer section.
- Ensure the layout is responsive and adjusts properly for different screen sizes.

2. Write a JavaScript program to perform the following operations on the array `

var arr1 = [ -3, 8, 7, 6, 5, -4, 3, 2, 1]

- Push the element 10 to `arr1`.

- Change the element 5 to 50 in `arr1`.

- Apply the slice method to create a new array consisting of 4 elements.

- Find and display the length of `arr1`.

- Sort the array in ascending order.

- Display the final array.

 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Implement the HTML code along with CSS to design the following web page with
conditions.
a) When the mouse cursor press on the link it redirected to the web site called
“[Link]
b) Initially the link display Red color
c) It changes to Green color when the mouse over on it
d) Yellow color will displayed when the link in clicked When the link visited again then the
color will be Blue.

2. Develop an interactive Web Page with JavaScript that includes:

- An HTML form to collect user information (name, email, and phone number).

- JavaScript code to validate the form fields and display appropriate error messages if
validation fails.
- A button to submit the form and display a success message upon successful
submission.
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Design a webpage to prepare a health chart using HTML Tables

2. Create a dynamic web page that displays a greeting message based on the current time
of day (morning, afternoon, evening).
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Create a webpage with 5 links and add a hover effect to all links as below using CSS to
change their appearance when the mouse cursor is over them. (use Internal Style Sheet)

o background-color: yellow;
o unvisited link : Blue
o visited link : Purple
o mouse over link : Green
o selected link : Red

2. Write a JavaScript function to print the “Hello World” message.

 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Create an HTML table to display the profiles of 5 students. Each row should contain the
following details: Name, Age, Degree, and College Name. Use CSS to style the table with a
border, alternating row colors, and a bold header row. Implement a button that, when
clicked, changes the background color of the table.

2. Design the following web page using HTML and validate the form using
JavaScript based on given specification.

Specification to validate the form:

1. Name and email field should not be null.

 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Create a Webpage to display the below form

2. Write a Javascript BOM to display the below.

[Link]()
[Link]()
[Link]
[Link]
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Create the cells using external CSS.

2. Design a webpage with an image element. Write a JavaScript function that displays a
message when the user hovers over the image (on mouseover event) and another message
when the user moves the mouse away from the image (on mouseout event
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1.. Create the below form using HTML and Internal CSS.

2. Create a webpage with a button element. Write a JavaScript function that changes the
background color of the page when the button is clicked. Test the functionality.
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Create the following grid using HTML.

2. Design a webpage with an image element. Write a JavaScript function that displays a
message when the user hovers over the image (on mouseover event) and another message
when the user moves the mouse away from the image (on mouseout event).
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2:

1. Using Flex create the below table

Header : red color

Nav : Yellow
Content : Green
Footer : blue

2 Design the following responsive web page using Bootstrap grid system, apply your favourite color.
 KARPAGAM COLLEGE OF ENGINEERING, COIMBATORE
END SEMESTER PRACTICAL EXAMINATION
Roll No: Date:
Course: 23ITR202 - Web Technology Dept/ Section: Lab Exercise: /90

MARK STATEMENT
Particulars Max. Marks Ex. No.1 Max. Marks Ex. No.2 Viva: /10
Aim 5 5
Program 25 25
Output & Result 15 15 Grand Total: /100
Total 45 45

Signature of the Examiner-1: Signature of the Examiner-2: