Scribd
Upload
8 views29 pages

Webtechnology

The document contains various HTML code examples for web development tasks, including creating education details tables, CVs, home pages with navigation links, login and registration forms, and a student record form with validation. Each section provides a specific coding task related to web technology as part of a BCA course. The document serves as a practical guide for implementing basic web pages and forms using HTML and JavaScript.

Uploaded by

Gaurav singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views29 pages

Webtechnology

The document contains various HTML code examples for web development tasks, including creating education details tables, CVs, home pages with navigation links, login and registration forms, and a student record form with validation. Each section provides a specific coding task related to web technology as part of a BCA course. The document serves as a practical guide for implementing basic web pages and forms using HTML and JavaScript.

Uploaded by

Gaurav singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 29

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>&copy; 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>&copy; 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>&copy; 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>&copy; 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>&copy; 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>&copy; 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>&copy; 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>

You might also like