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>
<body bgcolor="lightgray">
<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>Anil</li>
<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>
<table align="center" border="1">
<tr>
<th>Time / Day</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>09:00 - 10:00</td>
<td>Mathematics</td>
<td>English</td>
<td>History</td>
<td>Science</td>
<td>Geography</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td>Science</td>
<td>Mathematics</td>
<td>English</td>
<td>Art</td>
<td>Physical Ed</td>
</tr>
<!-- Lunch Break Row using Colspan -->
<tr>
<td>11:00 - 12:00</td>
<td colspan="5">LUNCH BREAK</td>
</tr>
<tr>
<td>12:00 - 01:00</td>
<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>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<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>
<div class="container">
<h2>Student Registration Form</h2>
<form action="#" method="post">
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone Number">Phone Number:</label>
<input type="text" id="phone Number" name="phone Number" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="date">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" required>
</textarea>
<input type="submit" value="submit">
</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>
<img src="ASMVUR-Logo.png">
<img style="width:240px;height:100px;" src="Neem.jpg">
</body>
</html>
OUTPUT
5. Create a web page using frame.
File Name : First.html
<html>
<body>
<h1>The iframe element</h1>
<iframe src="innerFrame.html" title="W3Schools Free Online Web Tutorials">
</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>
<!-- Divide page into 2 equal rows -->
<frameset rows="50%,50%">
<!-- First row: 2 equal columns -->
<frameset cols="50%,50%">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
<!-- Second row: 2 equal columns -->
<frameset cols="50%,50%">
<frame src="frame3.html">
<frame src="frame4.html">
</frameset>
</frameset>
</html>
------------------------------------------
File: frame1.html
<html>
<body style="background-color: lightcoral;">
<h2>Frame 1</h2>
</body>
</html>
------------------------------------------
File: frame2.html
<html>
<body style="background-color: lightblue;">
<h2>Frame 2</h2>
</body>
</html>
------------------------------------------
File: frame3.html
<html>
<body style="background-color: lightgreen;">
<h2>Frame 3</h2>
</body>
</html>
------------------------------------------
File : frame4.html
<html>
<body style="background-color: lightyellow;">
<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>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="container">
<img src="map.png" alt="India Map">
<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>
<script>
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>
<input type="button" value="prime number" onclick="PrimeNo();">
</form>
</body>
</html>
OUTPUT
3. JavaScript Program to implement Javascript Object Concept.
<html>
<body>
<h1>JavaScript Objects</h1>
<h2>Creating an Object</h2>
<p id="demo"></p>
<script>
// 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>
<p id="demo"></p>
<script>
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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking email</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an email and Submit</h2>
<form name="form1" action="#">
<input type='text' name='text1'/></li>
<input type="submit" name="submit" value="Submit" onclick="ValidateEmail(document.form1.text1)"/>
</form>
<script src="evalid.js"></script>
</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>
<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>
<form action="display" method="get">
<label>Number:</label>
<input type="text" name="num">
<input type="submit" value="Submit">
</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>
<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>
<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
.png)
.png)
.png)
.png)
