Mahesh Bidarkar: WEB TECHNOLOGIES

PART A

1] Design web pages for your college containing college name and logo, departments list using, list tags.

<html>

<head>

<title>

College Department Details

</title>

</head>

<h1 align="center" style="color: black;">GFGC Shahapur</h1>

<hr>

<h2 align="center" style="color: black;">About College </h2>

<p style="font-family:courier";>GFGC Shahapur serves a predominantly socially and economically disadvantaged student body. Students are from all communities, with more than 50% being women. The college is supported by a highly qualified faculty, most of whom hold advanced degrees like Ph.D. and M.Phil., and many serve as research supervisors recognized by Adikavi Sri Maharshi Valmiki University, Raichur.

</p>

<h2><b>Courses Offered</b></h2>

<ul>

<li>Bsc Computer Science</li>

<li>Bsc Physics</li>

</ul>

<h2>Department of Computer Science</h2>

<p style="font-family:courier">To educate the young

minds with the ability to manage real world problem with the latest technology,

to inculcate professional behaviors, strong ethical values, innovative research capability and leadership ability.

Help the students to explore the depths of computer science, exalt in them and at the same time join hands with the other

branches of science to turn something virtual into real and vice versa.</p>

<h2>Faculties of Computer Science</h2>

<ol>

<li>Rajesh</li>

<li>Sangeeta</li>

<li>Keerti</li>

</ol>

<h3>Condact as </h3>

<p>Phone Number: 223344</p>

<p>Email: gfgcs@gmail.com</p>

</body>

</html>

OUTPUT

=================================================

2] Create a class timetable using table tag

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2 align="center">Class Timetable</h2>

<tr>

<th>Monday</th>

<th>Tuesday</th>

<th>Wednesday</th>

<th>Thursday</th>

<th>Friday</th>

</tr>

<tr>

<td>Mathematics</td>

<td>English</td>

<td>History</td>

<td>Science</td>

<td>Geography</td>

</tr>

<tr>

<td>Science</td>

<td>Mathematics</td>

<td>English</td>

<td>Physical Ed</td>

</tr>

<tr>

<td colspan="5">LUNCH BREAK</td>

</tr>

<tr>

<td>History</td>

<td>Geography</td>

<td>Science</td>

<td>Mathematics</td>

<td>English</td>

</tr>

</table>

</body>

</html>

OUTPUT

======================================================

3. Write a HTML code to design Student registrations form for your college Admission.

<html>

<head>

<title>Student Registration Form</title>

<style>

body{

font-family:Arial,Sans-serif;

background-color:#f4f4f4;

margin:0;

padding:0;

}

.container{

max-width:600px;

margin:20px auto;

background-color:#fff;

padding:20px;

border-radius:8px;

box-shadow:0010pxrgba(0,0,0,0.1);

}

h2{

text-align:center;

margin-bottom:20px;

}

label{

font-weight:bold;

}

input[type="text"],

input[type="email"],

Select{

width:100%;

padding:10px;

margin:5px 0;

border:1pxsolid#ccc;

border-radius:5px;

box-sizing:border-box;

}

input[type="submit"]{

width:100%;

background-color:#4CAF50;

color:white;

padding:12px 20px;

margin:8px 0;

border:none;

border-radius:4px;

Cursor:pointer;

}

input[type="submit"]:hover{

background-color:#45a049;

}

</style>

</head>

<body>

<h2>Student Registration Form</h2>

<label for="email">Email:</label>

<label for="phone Number">Phone Number:</label>

<label for="gender">Gender:</label>

<option value="">Select</option>

<option value="female">Female</option>

<option value="other">Other</option>

</select>

<label for="date">Date of Birth:</label>

<label for="address">Address:</label>

</textarea>

</form>

</div>

</body>

</html>

OUTPUT

4. Design Web Pages with includes Multi-Media data (Image, Audio, Video, GIFs etc)

<html>

<head>

</head>

<body>

<h1>Multimedia Demo</h1>

</body>

</html>

OUTPUT

5. Create a web page using frame.

File Name : First.html

<html>

<body>

<h1>The iframe element</h1>

</iframe>

</body>

</html>

File Name : innerFrame.html

<html>

<body>

<h1>This is inner frame web page</h1>

</body>

</html>

OUTPUT

6. Write code in HTML to develop a webpage having two frames that divide the webpage intotwo equal rows and then divide the row into equal columnsfill each frame with a different background color.

File: home.html

<!DOCTYPE html>

<html>

<head>

<title>Frames Example</title>

</head>

</frameset>

</frameset>

</html>

------------------------------------------

File: frame1.html

<html>

<h2>Frame 1</h2>

</body>

</html>

------------------------------------------

File: frame2.html

<html>

<h2>Frame 2</h2>

</body>

</html>

------------------------------------------

File: frame3.html

<html>

<h2>Frame 3</h2>

</body>

</html>

------------------------------------------

File : frame4.html

<html>

<h2>Frame 4</h2>

</body>

</html>

OUTPUT

7. Write CSS code to Use Inline CSS to format your ID Card.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"content="width=device-width,initial-scale=1.0">
	<title>Id card</title>
	<style>
	/Incline CSS for IDcard for matting/
	#id-card{
	width:300px;
	height:200px;
	border:2px solid#333;
	border-radius:10px;
	padding:20px;
	box-sizing:border-box;
	font-family:Arial,Sans-Serif;
	}
	#id-card h2{
	margin-bottom:10px;
	font-size:16px;
	margin-bottom:5px;
	}
	#id-card
	photo{
	width:100px;
	height:100px;
	border-radius:50%;
	background-color:#333;
	margin-right:10px;
	float:left;
	}
	</style>
	</head>
	<body>
	<div id="id-card">
	<div class="photo">
	</div>
	<h2>JOhn Doe</h2>
	<p>Occupation:Developer</p>
	<p>Address:123MainStreet,city,Country</p>
	<p>Email:johndoe@Example.com</p>
	<p>phone:+1234567890</p>
	</div>
	</body>
	</html> OUTPUT

=====================================================

8. Using HTML, CSS create display a text called -Hello India !! on top of an image of India- Map using an overlay.

<!DOCTYPE html>

<head>

<title>Hello India Overlay</title>

<style>

body {

margin: 0;

font-family: Arial, sans-serif;

}

.container {

position: relative;

width: 100%;

max-width: 600px;

margin: auto;

}

.container img {

width: 100%;

height: auto;

display: block;

}

.overlay-text {

position: absolute;

top: 20px; /* adjust position */

left: 50%;

transform: translateX(-50%);

color: white;

font-size: 40px;

font-weight: bold;

background: rgba(0, 0, 0, 0.5); /* optional background */

padding: 10px 20px;

border-radius: 8px;

}

</style>

</head>

<body>

<div class="overlay-text">Hello India</div>

</div>

</body>

</html>

OUTPUT

Part B

1. Write a JavaScript Program to perform Basic Arithmetic operations.

	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"content="width=device-width,initial-scale=1.0">
	<title>Airthmetic Operations</title>
	<style>
	body{
	font-family:Arial,Sans-Serif;
	margin:0;
	padding:20px;
	}
	input[type="number"]{
	width=100px;
	padding:5px;
	margin-right:10px;
	}
	button{
	padding:5px 10px;
	Cursor:pointer;
	}
	#result{
	margin-top:10px;
	}
	</style>
	</head>
	<body>
	<h2>Airthmetic operations</h2>
	<input type="number" id="num1" placeholder="enter first number">
	<input type="number" id="num2" placeholder="enter second number">
	<button onclick="add()">Add</button>
	<button onclick="subtract()">Subtract</button>
	<button onclick="multiply()">Multiply</button>
	<button onclick="divide()">Divide</button>
	<div id="result"></div>
	<script>
	function add(){
	const num1=parseFloat(document.getElementById('num1').value);
	const num2=parseFloat(document.getElementById('num2').value);
	document.getElementById('result').innerText="Result:"+(num1+num2);
	}
	function subtract(){
	const num1=parseFloat(document.getElementById('num1').value);
	const num2=parseFloat(document.getElementById('num2').value);
	document.getElementById('result').innerText="Result:"+(num1-num2);
	}
	function multiply(){
	const num1=parseFloat(document.getElementById('num1').value);
	const num2=parseFloat(document.getElementById('num2').value);
	document.getElementById('result').innerText="Result:"+(num1*num2);
	}
	function divide(){
	const num1=parseFloat(document.getElementById('num1').value);
	const num2=parseFloat(document.getElementById('num2').value);
	if(num2==0){
	document.getElementById('result').innerText="cannot divide by zero!";
	}else{
	document.getElementById('result').innerText="Result:"+(num1/num2);
	}
	}
	</script>
	</body>
	</html>
	OUTPUT

=======================================================

2. JavaScript Program to Check Prime Number.

<html>

<body>

function PrimeNo()

{

var i,flag=0;

var n=prompt("enter a number");

for(i=1;i<=n;i++)

{

if(n%i==0)

{

flag+=1;

}

if(flag==2)

{ document.write(n+" is prime number"); }

else{ document.write(n+" is not a prime number"); }

}

</script>

<form>

</form>

</body>

</html>

OUTPUT

3. JavaScript Program to implement Javascript Object Concept.

<html>

<body>

<h1>JavaScript Objects</h1>

<h2>Creating an Object</h2>

// Create an Object:

const car = {

type:"Fiat",

model:"500",

color:"white"

};

// Display Data from the Object:

document.getElementById("demo").innerHTML = "The car type is " + car.type;

</script>

</body>

</html>

OUTPUT

4. JavaScript Program to Create Array and inserting Data into Array.

<html>

<body>

<h1>JavaScript Arrays</h1>

const cars = ["Saab", "Volvo", "BMW"];

document.getElementById("demo").innerHTML = cars;

</script>

</body>

</html>

OUTPUT

5. JavaScript Program to Validate an Email Address.

FIRST PART: WEB PAGE

<!DOCTYPE html>

<head>

<title>JavaScript form validation - checking email</title>

</head>

<h2>Input an email and Submit</h2>

</form>

</body>

</html>

SECOND PART: JavaScript code

function ValidateEmail(inputText)

{

var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

if(inputText.value.match(mailformat))

{

alert("Valid email address!");

document.form1.text1.focus();

return true;

}

else

{

alert("You have entered an invalid email address!");

document.form1.text1.focus();

return false;

}

OUTPUT

6. Write a Program for printing System Date & Time using SERVLET.

Servlet code

import java.io.*;

import java.util.Date;

import javax.servlet.*;

import javax.servlet.http.*;

public class DateTimeServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// Set response content type

response.setContentType("text/html");

// Get writer object

PrintWriter out = response.getWriter();

// Get current date and time

Date currentDate = new Date();

// HTML response

out.println("<html><body>");

out.println("<h2>System Date & Time</h2>");

out.println("<h3>" + currentDate.toString() + "</h3>");

out.println("</body></html>");

}

web.xml code

<web-app>

<servlet-name>DateTimeServlet</servlet-name>

<servlet-class>DateTimeServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>DateTimeServlet</servlet-name>

<url-pattern>/datetime</url-pattern>

</servlet-mapping>

</web-app>

OUTPUT

7. Write a server side SERVLET program for accept number from HTML file and Display.

HTML code

<!DOCTYPE html>

<html>

<head>

<title>Enter Number</title>

</head>

<body>

<h2>Enter a Number</h2>

<label>Number:</label>

</form>

</body>

</html>

Servlet code

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class DisplayServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

// Get value from form

String number = request.getParameter("num");

out.println("<html><body>");

out.println("<h2>Entered Number is:</h2>");

out.println("<h3>" + number + "</h3>");

out.println("</body></html>");

}

web.xml

<web-app>

<servlet-name>DisplayServlet</servlet-name>

<servlet-class>DisplayServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>DisplayServlet</servlet-name>

<url-pattern>/display</url-pattern>

</servlet-mapping>

</web-app>

OUTPUT

8. Write a program to Creating the Life-Cycle Servlet Application.

Servlet code

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class LifeCycleServlet extends HttpServlet {

// 1. Initialization method

public void init() throws ServletException {

System.out.println("Servlet Initialized (init method called)");

}

// 2. Service method (handling request)

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

out.println("<html><body>");

out.println("<h2>Servlet Life Cycle Demo</h2>");

out.println("<h3>Service Method Executed</h3>");

out.println("</body></html>");

System.out.println("Service method executed (doGet called)");

}

// 3. Destroy method

public void destroy() {

System.out.println("Servlet Destroyed (destroy method called)");

}

web.xml

<web-app>

<servlet-name>LifeCycleServlet</servlet-name>

<servlet-class>LifeCycleServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>LifeCycleServlet</servlet-name>

<url-pattern>/lifecycle</url-pattern>

</servlet-mapping>

</web-app>

OUTPUT

Mahesh Bidarkar

Wednesday, 1 April 2026

WEB TECHNOLOGIES

No comments:

Post a Comment