UNIVERSITY OF PETROLEUM & ENERGY STUDIES

School of Computer Science

Dehradun

LAB FILE

Programme : B.Tech CSE

Course : Web Technologies

No. of credits : 3

Semester :4

Batch :1

Faculty : Dr. Rohit Srivastava

 Submitted By:

Roll No :R2142220169

Name : Shrey Sharma

________________________

Faculty Signature

INDEX
Experiment 1: Basic HTML Tags

Q1. Design a webpage to describe your university. The webpage should have properly
aligned paragraphs to show textual information and images wherever required.

Q2. Design a webpage to show your timetable in proper format.

Q3. Create a webpage that should have a menu to show different tourist places in
Dehradun. Use different fore ground, background colors, images and other properties.

Experiment 2: Creating HTML forms using different form elements.

1. Create a login page using different form elements.

 2. Create a HTML form for a student for course registration which should have following
fields:

1. Student Name (textbox)

2. Age (textbox with numbers only)
3. Date of Birth (Calendar)
4. Select Course (Drop Down)
5. Submit (Button)

3. Create HTML form for selecting sports in your university. The form should have fields
like Name, Password, Address, Select Game, Gender, Age etc.

Experiment 3: Use of Inline, Internal and External stylesheets and incorporating styles
in HTML document.

1. Use Inline style sheet and create a webpage.

2. Create a CSS based Sticky footer.
3. Using HTML and CSS, create a custom hover and focus effect for navigation items,
using CSS transformations.
4. Using HTML, CSS creates a zoom in zoom out animation.

Experiment 4: Responsive Design with Media Queries

1. Add a CSS media query and appropriate styles so that the webpage looks similar even
when resized to smaller widths. Specifically:
2. The sidebar should be hidden.
3. The body should have no padding.
4. The images shouldn't exceed the width of the window.
5. The navigation items should each be on their own line.
6. The header should be fixed, so that it stays at the top after scrolling.

Experiment 5: Client-side Programming using Java Script – Use of control statements

1. Write a JavaScript program that displays the largest integer among two integers.
2. Write a JavaScript function that accepts a string as a parameter and converts the first
letter of each word into upper case.
 3. Write a Java Script to create a simple calculator.
4. Write a JavaScript function that accepts a string as a parameter and finds the longest
word within the string.
5. Write a JavaScript program to find odd and even numbers from 1 to 100.
6. Write a JavaScript program to generate a random string.
7. Write a JavaScript Program to Print All Prime Numbers in an Interval.
8. Write a JavaScript program to populate a drop-down box from 1 to 1000.

Experiment 6: Java Script Event Handling and Functions

1. Write a Java script program to Generate a Random Number and display it in a textbox.
2. Write a JavaScript function that changes the background color of an element on a
particular event.
3. Write a Java script to validate course registration form.
4. Write a JavaScript program that adds a keydown event listener to a text input to detect
when the "Enter key" is pressed.
5. Write a program to show the use of alert, prompt and confirm dialog boxes.
6. Write a JavaScript function to extract a specified number of characters from a string.
7. Write a function to accept date of birth from a user and calculate the difference till
current date

Experiment 1

Q1. Design a webpage to describe your university. The webpage should have properly
aligned paragraphs to show textual information and images wherever required.
[email protected]</p
</html>

Q2. Design a webpage to show your timetable in proper format.

<td>10:00 AM - 11:00 AM</td>
Q3. Create a webpage that should have a menu to show different tourist places in Dehradun.
Use different fore ground, background colors, images and other properties.
<a href="https://maps.app.goo.gl/XGEyXd1GjvncHwFGA">Visit Mussoorie</a></li>

</menu>

</body>

</html>
 2:

1. Create a login page using different form elements.

2. Create a HTML form for a student for course registration which should have following
fields:

1. Student Name (textbox)

2. Age (textbox with numbers only)
3. Date of Birth (Calendar)
4. Select Course (Drop Down)
5. Submit (Button)
3. Create HTML form for selecting sports in your university. The form should have fields
like Name, Password, Address, Select Game, Gender, Age etc.
Experiment 3
Use of Inline, Internal and External stylesheets and incorporating styles in HTML
document.

1. Use Inline style sheet and create a webpage.

2. Create a CSS based Sticky footer.<html>
https://www.shutterstock.com/image-photo/these-mountains-makes-dehradun-
3. Using HTML and CSS, create a custom hover and focus effect for navigation items,
using CSS transformations.
4. Using HTML, CSS creates a zoom in zoom out animation.
 Experiment 4:

Responsive Design with Media Queries

1. Add a CSS media query and appropriate styles so that the webpage looks similar
even when resized to smaller widths. Specifically:
2. The sidebar should be hidden.
3. The body should have no padding.
4. The images shouldn't exceed the width of the window.
5. The navigation items should each be on their own line.
6. The header should be fixed, so that it stays at the top after scrolling.
 Experiment 5

Client-side Programming using Java Script – Use of control statements

1. Write a JavaScript program that displays the largest integer among two integers.
 2. Write a JavaScript function that
accepts a string as a parameter and
converts the first letter of each word into upper case.
3. Write a Java Script to create a simple calculator.
4. Write a JavaScript function that accepts a string as a parameter and finds the longest
word within the string.
 5. Write
a

JavaScript program to find odd and even numbers from 1 to 100.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Odd and Even Numbers</title>

<script>

function findOddEvenNumbers() {

var oddNumbers = [];

var evenNumbers = [];

 for (var i = 1; i <= 100; i++) {

if (i % 2 === 0) {

evenNumbers.push(i);

} else {

oddNumbers.push(i);

document.getElementById("odd").textContent = "Odd numbers from 1 to 100: " +

oddNumbers.join(", ");

document.getElementById("even").textContent = "Even numbers from 1 to 100: " +

evenNumbers.join(", ");

</script>

</head>

<body>

<h1>Odd and Even Numbers</h1>

<button onclick="findOddEvenNumbers()">Find Odd and Even Numbers</button>

<div id="odd"></div>

<div id="even"></div>

</body>

</html>
6. Write a JavaScript program to generate a random string.
7. Write a JavaScript Program to Print All Prime Numbers in an Interval.
8. Write a JavaScript program to populate a drop-down box from 1 to 1000.
}

</script>

</body>

</html>
 Experiment 6

Java Script Event Handling and Functions

1. Write a Java script program to Generate a Random Number and display it in a textbox.
 Write a JavaScript function that changes the background color of an
element on a particular event.
Write a Java script to validate course registration form.
 Write a JavaScript program that adds a keydown event listener to a text input to detect
when the "Enter key" is pressed.
 Write a program to
show the use of alert,
prompt and confirm
dialog boxes.
Write a JavaScript function to extract a specified number of characters from a string.
 Write a function to accept date of birth from a user and calculate the difference till current
date.