SWAMI RAMA HIMALAYAN
UNIVERSITY HILL CAMPUS
TOLI DUDARKHAL
PROGRAMME NAME:-BCA
COURSE NAME: WEB TECHNOLOGY
COURSE CODE: BCP 305
SUBMITTED TO: SUBMITTED BY:
RAJAT RATURI RITIKA NEGI
ASSISTANT PROFESSOR Reg NO.:PG22111301012
1. Write an html code to display your education details in a tabular format.
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Education Details</title>
</head>
<body>
<h2>Education Details</h2>
<table>
<thead>
<tr>
<th>Degree</th>
<th>Institution</th>
<th>Year of Graduation</th>
<th>Field of Study</th> </tr>
</thead>
<tr>
<td>Bachelor of Science</td>
<td>University of Example</td>
<td>2020</td>
<td>Computer Science</td> </tr>
<tr>
<td>Master of Science</td>
<td>Example University</td>
<td>2022</td>
<td>Software Engineering</td> </tr>
</table>
</body>
</html>
2. Write an html code to display your cv on a webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - CV</title>
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
<p>LinkedIn: <a href="https://linkedin.com/in/yourprofile"
target="_blank">linkedin.com/in/yourprofile</a></p>
</header>
<section>
<h2>Objective</h2>
<p>Motivated and detail-oriented professional seeking to leverage skills in [Your Field] for
[Specific Role] at [Company Name].</p>
</section>
<section>
<h2>Education</h2>
<ul>
<li><strong>Bachelor of Science in Your Major</strong>, University Name, Year</li>
<li><strong>Relevant Coursework:</strong> Course 1, Course 2, Course 3</li> </ul>
</section>
<section>
<h2>Experience</h2>
<ul>
<li><strong>Job Title</strong>, Company Name, Location (Month Year - Month Year)
<ul>
<li>Responsibility/achievement 1</li>
<li>Responsibility/achievement 2</li> </ul>
</li>
<li><strong>Job Title</strong>, Company Name, Location (Month Year - Month Year)
<ul>
<li>Responsibility/achievement 1</li>
<li>Responsibility/achievement 2</li>
</ul> </li> </ul>
</section>
<section>
<h2>Skills</h2><ul>
<li>Skill 1</li>
<li>Skill 2</li>
<li>Skill 3</li>
<li>Skill 4</li>
<li>Skill 5</li> </ul></section>
<section>
<h2>Certifications</h2> <ul>
<li>Certification Name, Issuing Organization - Year</li>
<li>Certification Name, Issuing Organization - Year</li> </ul>
</section>
<footer>
<p>© 2023 Your Name. All rights reserved.</p>
</footer>
</body>
</html>
3. Write an html code to create a home page having three links:About us ,our
services and contact us,create separate page for the three links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to Our Website</h1>
<nav> <ul>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<h2>Home Page</h2>
<p>Welcome to our homepage. We are glad to have you here!</p>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>
ABOUT US
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>About Us</h1>
<nav> <ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<h2>Who We Are</h2>
<p>We are a company dedicated to providing excellent services.</p>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>
OUR SERVICES
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Services - My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Our Services</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<h2>What We Offer</h2>
<p>We provide a wide range of services to meet your needs.</p>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>
4. Write an Html code to create a login page form. On submitting the form
,the user should get navigated to a profile page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form action="profile.html" method="GET">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
5. Write an Html code to create a Registration form. on submitting the
form,the user should be asked to login with these new credentials .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body>
<div class="registration-form">
<h2>Register</h2>
<form id="regForm" onsubmit="return handleRegister()">
<input type="text" id="username" name="username" placeholder="Username"
required>
<input type="email" id="email" name="email" placeholder="Email" required>
<input type="password" id="password" name="password" placeholder="Password"
required>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
6. Write an Html code to create a your Institute websites,department website
and tutorial website for specific subjects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Institute Name</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to Our Institute</h1>
<nav> <ul>
<li><a href="index.html">Home</a></li>
<li><a href="department.html">Departments</a></li>
<li><a href="contact.html">Contact</a></li> </ul>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>We offer a variety of courses and programs to help students achieve their
academic goals. Join us to be a part of a vibrant learning community.</p>
</section>
</main>
<footer>
<p>© 2023 Institute Name. All rights reserved.</p> </footer>
</body>
</html>
Department Website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Department of Computer Science</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Department of Computer Science</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="department.html">Departments</a></li>
<li><a href="tutorial.html">Tutorials</a></li>
<li><a href="contact.html">Contact</a></li> </ul></nav>
</header>
<main>
<section>
<h2>Overview</h2>
<p>The Computer Science department offers a range of courses from programming
to artificial intelligence. Our faculty is dedicated to providing a high-quality education.</p>
</section> </main>
<footer>
<p>© 2023 Institute Name. All rights reserved.</p> </footer>
</body>
</html>
Tutorial Website
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorials for Programming</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Programming Tutorials</h1>
<nav> <ul>
<li><a href="index.html">Home</a></li>
<li><a href="department.html">Departments</a></li>
<li><a href="tutorial.html">Tutorials</a></li>
<li><a href="contact.html">Contact</a></li> </ul> </nav>
</header>
<main>
<section>
<h2>Available Tutorials</h2>
<ul>
<li><a href="#">Introduction to Python</a></li>
<li><a href="#">Web Development with HTML & CSS</a></li>
<li><a href="#">Data Structures and Algorithms</a></li>
<li><a href="#">Machine Learning Basics</a></li> </ul> </section>
</main>
<footer>
<p>© 2023 Institute Name. All rights reserved.</p> </footer>
</body>
</html>
7. Write an Html code to create a ordered list,unordered list,definition list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists in HTML</title>
</head>
<body>
<h1>Lists in HTML</h1>
<h2>Ordered List</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C
<ul>
<li>Sub-item C1</li>
<li>Sub-item C2</li>
</ul>
</li>
<li>Item D</li>
</ul>
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language, the standard markup language for creating web
pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used for describing the presentation of a document
written in HTML.</dd>
<dt>JavaScript</dt>
<dd>A programming language commonly used to create interactive effects within web
browsers.</dd>
</dl>
</body>
</html>
8. Write a javascript to prompt for users name and display it on the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prompt for Name</title>
<script>
function askForName() {
// Prompt the user for their name
var name = prompt("Please enter your name:");
// Check if the user entered a name
if (name) {
// Display the name on the screen
document.getElementById("displayName").innerText = "Hello, " + name + "!";
} else {
document.getElementById("displayName").innerText = "Hello, Guest!";
}
}
</script>
</head>
<body onload="askForName()">
<h1 id="displayName"></h1>
</body>
</html>
9. Design html form for keeping student record and validate it using
javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Record Form</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px; }
.error {
color: red;
font-size: 0.9em; }
</style>
</head>
<body>
<h2>Student Record Form</h2>
<form id="studentForm">
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="name" required>
<span class="error" id="nameError"></span><br><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" min="1" required>
<span class="error" id="ageError"></span><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required>
<span class="error" id="emailError"></span><br><br>
<label for="grade">Grade:</label><br>
<select id="grade" name="grade" required>
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="F">F</option>
</select>
<span class="error" id="gradeError"></span><br><br>
<button type="submit">Submit</button></form>
<script>
document.getElementById('studentForm').addEventListener('submit', function(event)
{ document.getElementById('nameError').textContent = '';
document.getElementById('ageError').textContent = '';
document.getElementById('emailError').textContent = '';
document.getElementById('gradeError').textContent = '';
const name = document.getElementById('name').value;
const age = document.getElementById('age').value;
const email = document.getElementById('email').value;
const grade = document.getElementById('grade').value;
let valid = true;
if (name.trim() === '') {
document.getElementById('nameError').textContent = 'Name is required.';
valid = false;}
if (age < 1 || age > 100) {
document.getElementById('ageError').textContent = 'Age must be between 1 and
100.';
valid = false; }
if (!validateEmail(email)) {
document.getElementById('emailError').textContent = 'Invalid email format.';
valid = false; }
if (grade === '') {
document.getElementById('gradeError').textContent = 'Grade selection is required.';
valid = false; }
if (!valid) {
event.preventDefault(); // Prevent form from submitting if not valid
} });
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase()); }
</script>
</body>
</html>
10. Write a program using javascript for web page to display browser
information.
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Browser Information</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
border: 1px solid
#ccc; border-radius:
5px;
background-color: #f9f9f9;}
h1 {
color: #333; }
.info {
margin-bottom: 10px; }
</style>
</head>
<body>
<h1>Browser Information</h1>
<div class="info"><strong>User Agent:</strong> <span id="userAgent"></span></div>
<div class="info"><strong>Browser Name:</strong> <span
id="browserName"></span></div>
<div class="info"><strong>Browser Version:</strong> <span
id="browserVersion"></span></div>
<div class="info"><strong>Platform:</strong> <span id="platform"></span></div>
<div class="info"><strong>Language:</strong> <span id="language"></span></div>
<script>
function getBrowserInfo() {
const userAgent = navigator.userAgent;
const platform = navigator.platform;
const language = navigator.language || navigator.userLanguage;
let browserName = "Unknown";
let browserVersion = "Unknown";
if (userAgent.indexOf("Chrome") > -1)
{ browserName = "Chrome";
browserVersion = userAgent.match(/Chrome\/([0-9]+\.[0-9]+)/)[1];
} else if (userAgent.indexOf("Firefox") > -1)
{ browserName = "Firefox";
browserVersion = userAgent.match(/Firefox\/([0-9]+\.[0-9]+)/)[1];
} else if (userAgent.indexOf("Safari") > -1)
{ browserName = "Safari";
browserVersion = userAgent.match(/Version\/([0-9]+\.[0-9]+)/)[1];
} else if (userAgent.indexOf("MSIE") > -1)
{ browserName = "Internet Explorer";
browserVersion = userAgent.match(/MSIE ([0-9]+\.[0-9]+)/)[1];
} else if (userAgent.indexOf("Edg") > -1)
{ browserName = "Microsoft Edge";
browserVersion = userAgent.match(/Edg\/([0-9]+\.[0-9]+)/)[1];}
return {
userAgent: userAgent,
browserName: browserName,
browserVersion: browserVersion,
platform: platform,
language: language
}; }
const browserInfo = getBrowserInfo();
document.getElementById("userAgent").innerText = browserInfo.userAgent;
document.getElementById("browserName").innerText = browserInfo.browserName;
document.getElementById("browserVersion").innerText = browserInfo.browserVersion;
document.getElementById("platform").innerText = browserInfo.platform;
document.getElementById("language").innerText = browserInfo.language;
</script>
</body>
</html>
11. Create a applet which will have a line, an oval and a rectangle.
import javax.swing.*;
import java.awt.*;
public class ShapeApplet extends JPanel {
@Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
// Draw a line
g.drawLine(50, 50, 200, 50);
// Draw an oval
g.drawOval(50, 70, 150, 100);
// Draw a rectangle
g.drawRect(50, 180, 150, 100);
}
public static void main(String[] args) {
// Create the main frame
JFrame frame = new JFrame("Shape Applet");
ShapeApplet applet = new ShapeApplet();
// Set the default close operation and add the applet
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(applet);
frame.setSize(300, 350);
frame.setVisible(true);
}
}
12. Write an XML program to display products
<?xml version="1.0" encoding="UTF-8"?>
<products>
<product>
<id>1</id>
<name>Smartphone</name>
<description>A high-end smartphone with a stunning display.</description>
<price currency="USD">999.99</price>
<category>Electronics</category> </product>
<product>
<id>2</id>
<name>Laptop</name>
<description>A powerful laptop for gaming and productivity.</description>
<price currency="USD">1499.99</price>
<category>Electronics</category>
</product>
<product>
<id>3</id>
<name>Headphones</name>
<description>Noise-cancelling over-ear headphones.</description>
<price currency="USD">299.99</price>
<category>Accessories</category>
</product>
<product>
<id>4</id>
<name>Smartwatch</name>
<description>A smartwatch with fitness tracking features.</description>
<price currency="USD">199.99</price>
<category>Wearables</category>
</product>
<product>
<id>5</id>
<name>Backpack</name>
<description>A stylish and durable backpack for everyday use.</description>
<price currency="USD">79.99</price>
<category>Accessories</category>
</product>
</products>
14.Write a program using PHP and HTML to create a form and display the
details entered by the user.
<?php
// Initialize variables to store user input
$name = '';
$email = '';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the user input from the form
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Details Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4; }
.container {
max-width: 500px;
margin: auto;
background: white;
padding: 20px;
border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
h2 {
text-align: center; }
.form-group {
margin-bottom: 15px; }
.form-group label
{ display: block;
margin-bottom: 5px; }
.form-group input
{ width: 100%;
padding: 10px;
border: 1px solid
#ccc; border-radius:
5px;}
.submit-button {
background-color: #28a745;
color: white;
border: none;
padding: 10px
15px; border-
radius: 5px; cursor:
pointer; width:
100%; }
.submit-button:hover
{ background-color: #218838;
}
.result {
margin-top: 20px;
padding: 10px;
background-color: #e7f3fe;
border-left: 6px solid #2196F3; }
</style>
</head>
<body>
<div class="container">
<h2>User Details Form</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);
?>">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required value="<?php echo $name;
?>">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required value="<?php echo $email;
?>">
</div>
<input type="submit" class="submit-button" value="Submit">
</form>
<?php if ($_SERVER["REQUEST_METHOD"] == "POST"): ?>
<div class="result">
<h3>Entered Details</h3>
<p><strong>Name:</strong> <?php echo $name; ?></p>
<p><strong>Email:</strong> <?php echo $email; ?></p>
</div>
<?php endif; ?>
</div>
</body>
</html>
