Scribd
Upload
20 views

Web Technology Lab Manual

Uploaded by

21SMS06 -MERCY. P
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Web Technology Lab Manual

Uploaded by

21SMS06 -MERCY. P
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

EX.NO.01 Develop a web page to display your education details in a tabular format.

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXNO1</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

.container {
max-width: 800px;
margin: 50px auto;
background: #fff;
padding: 20px;
box-shadow: 0px 0px 10px 0px #ccc;
}

h1 {
text-align: center;
color: #333;
}

table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}

table, th, td {
border: 1px solid #ccc;
}

th, td {
padding: 12px;
text-align: left;
}

th {
background-color: #f4f4f4;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div class="container">
<h1>Abi Education Details</h1>
<table>
<tr>
<th>Degree</th>
<th>Institution</th>
<th>Year of Passing</th>
<th>Percentage/Grade</th>
</tr>
<tr>
<td>Bachelor of Computer Applications (BCA)</td>
<td>Periyar University</td>
<td>2025</td>
<td>80%</td>
</tr>
<tr>
<td>HSC</td>
<td>St.Joseph Higher Secondary School</td>
<td>2022</td>
<td>85%</td>
</tr>
<tr>
<td>SSLC</td>
<td>St.John's Higher Secondary School</td>
<td>2020</td>
<td>90%</td>
</tr>
</table>
</div>
</body>
</html>
OUTPUT:
EX.NO.02 Develop a web page to display your CV on a web page.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCA Student CV</title>

<style>
/* Internal CSS */
body {
background-color: #e0f7fa;
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
border: 1px solid #ddd;
padding: 20px;
background-color: #f9f9f9;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #4CAF50;
text-align: center;
font-size: 28px;
}
h2 {
color: #333;
border-bottom: 2px solid #4CAF50;
padding-bottom: 10px;
margin-top: 30px;
}
.skills {
list-style-type: square;
padding-left: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>

<div class="container">
<!-- Inline CSS -->
<h1 style="color: #2E86C1;">John Doe</h1>
<p style="text-align: center;">MCA Student</p>
<p style="text-align: center;">Email: [email protected] | Phone: +91-
1234567890</p>

<h2>Education</h2>
<table>
<tr>
<th>Degree</th>
<th>Institution</th>
<th>Year</th>
<th>Percentage</th>
</tr>
<tr>
<td>MCA</td>
<td>XYZ University</td>
<td>2024</td>
<td>85%</td>
</tr>
<tr>
<td>B.Sc Computer Science</td>
<td>ABC College</td>
<td>2021</td>
<td>80%</td>
</tr>
</table>

<h2>Skills</h2>
<ul class="skills">
<li>Programming Languages: Java, Python, C++</li>
<li>Web Technologies: HTML, CSS, JavaScript</li>
<li>Database Management: MySQL, MongoDB</li>
<li>Operating Systems: Windows, Linux</li>
</ul>

<h2>Projects</h2>
<ul>
<li><strong>Online Library Management System:</strong> Developed using Java and
MySQL.</li>
<li><strong>Portfolio Website:</strong> Created using HTML, CSS, and
JavaScript.</li>
</ul>

<h2>Experience</h2>
<p>Intern at Tech Solutions Pvt. Ltd., where I worked on developing web applications
using JavaScript and Node.js.</p>

<h2>Certifications</h2>
<ul>
<li>Certified Java Developer</li>
<li>Python Programming for Beginners</li>
</ul>

<h2>Contact Information</h2>
<p>Address: 123, Street Name, City, State, Country</p>
<p>Email: [email protected]</p>
<p>Phone: +91-1234567890</p>
</div>

</body>
</html>
OUTPUT:
EX.NO.03 Design a Homepage having three links: About Us, Our Services and Contact
Us. Create separate web pages for the three links.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXNO3</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
text-align: center;
}
nav {
background-color: #333;
padding: 10px 0;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 15px;
font-size: 18px;
}
nav a:hover {
text-decoration: underline;
}
.content {
padding: 20px;
}
#about, #services, #contact {
display: none;
}
</style>
<script>
function showContent(section) {
document.getElementById('home').style.display = 'none';
document.getElementById('about').style.display = 'none';
document.getElementById('services').style.display = 'none';
document.getElementById('contact').style.display = 'none';
document.getElementById(section).style.display = 'block';
}
</script>
</head>
<body>

<nav>
<a href="javascript:void(0);" onclick="showContent('home');">Home</a>
<a href="javascript:void(0);" onclick="showContent('about');">About Us</a>
<a href="javascript:void(0);" onclick="showContent('services');">Our Services</a>
<a href="javascript:void(0);" onclick="showContent('contact');">Contact Us</a>
</nav>

<div class="content" id="home">


<h1>Welcome to Viswa Tech</h1>
<p>This is the homepage. Use the navigation links above to learn more about us.</p>
</div>
<div class="content" id="about">
<h1>About Us</h1>
<p>Our company was founded in 2020 with a mission to provide high-quality services to
our customers.</p>
<p>We are dedicated to excellence and strive to exceed our clients' expectations in every
project we undertake.</p>
</div>

<div class="content" id="services">


<h1>Our Services</h1>
<p>We offer a wide range of services to meet the needs of our diverse clientele.</p>
<ul>
<ol>Web Development</ol>
<ol>Mobile App Development</ol>
<ol>Digital Marketing</ol>
<ol>SEO Optimization</ol>
</ul>
</div>

<div class="content" id="contact">


<h1>Contact Us</h1>
<p>If you have any questions or would like to learn more about our services, please feel
free to reach out to us.</p>
<p>Email: [email protected]</p>
<p>Phone: +1-234-567-8901</p>
</div>

<script>
// Show the home section by default
showContent('home');
</script>
</body>
</html>

OUTPUT:
EX.NO.04 Design a web page to demonstrate the usage of inline CSS, internal CSS and
external CSS.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXNO4</title>

<!-- Internal CSS -->


<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
h1 {
color: darkblue;
}
.internal-css {
color: green;
padding: 10px;
border: 1px solid green;
background-color: #d0f0d0;
}
.external-css {
color: blue;
padding: 10px;
border: 1px solid blue;
background-color: #d0d0f0;
margin-top: 20px;
}
</style>
</head>
<body>

<!-- Inline CSS -->


<h1 style="color: red;">This is a Heading with Inline CSS</h1>
<p>This paragraph is styled using inline CSS.</p>

<!-- Internal CSS -->


<div class="internal-css">
This div is styled using Internal CSS.
</div>

<!-- External CSS (simulated as internal for this example) -->


<div class="external-css">
This div is styled using External CSS (included as internal for demonstration).
</div>

</body>
</html>

OUTPUT:
EX.NO.07 Design a web page to perform input validation using Angular Java script.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngularJS Input Validation</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* Basic Reset */
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}

/* Form Container */
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
box-sizing: border-box;
}

h1 {
text-align: center;
margin-bottom: 20px;
font-size: 1.5em;
}

/* Form Styling */
form {
display: flex;
flex-direction: column;
}

form div {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input, select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}

button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}

button:hover {
background-color: #0056b3;
}

.error {
color: red;
font-size: 0.9em;
margin-top: 5px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="FormController">

<div class="form-container">
<h1>Input Validation Example</h1>
<form name="myForm" ng-submit="submitForm()" novalidate>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" ng-model="user.username"
required>
<span class="error" ng-show="myForm.username.$touched &&
myForm.username.$error.required">Username is required.</span>
</div>

<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" ng-model="user.email" required>
<span class="error" ng-show="myForm.email.$touched &&
myForm.email.$error.required">Email is required.</span>
<span class="error" ng-show="myForm.email.$touched &&
myForm.email.$error.email">Invalid email address.</span>
</div>

<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" ng-
model="user.password" ng-minlength="6" required>
<span class="error" ng-show="myForm.password.$touched &&
myForm.password.$error.required">Password is required.</span>
<span class="error" ng-show="myForm.password.$touched &&
myForm.password.$error.minlength">Password must be at least 6 characters long.</span>
</div>

<div>
<label for="age">Age:</label>
<input type="number" id="age" name="age" ng-model="user.age" min="0"
required>
<span class="error" ng-show="myForm.age.$touched &&
myForm.age.$error.required">Age is required.</span>
<span class="error" ng-show="myForm.age.$touched &&
myForm.age.$error.min">Age must be a positive number.</span>
</div>

<div>
<label for="gender">Gender:</label>
<select id="gender" name="gender" ng-model="user.gender" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<span class="error" ng-show="myForm.gender.$touched &&
myForm.gender.$error.required">Gender is required.</span>
</div>

<button type="submit">Submit</button>
</form>
</div>

<script>
angular.module('myApp', [])
.controller('FormController', function($scope) {
$scope.user = {};

$scope.submitForm = function() {
if ($scope.myForm.$valid) {
alert('Form submitted successfully!');
$scope.user = {}; // Clear the form data
$scope.myForm.$setPristine(); // Reset form to pristine state
$scope.myForm.$setUntouched(); // Reset form fields to untouched state
} else {
alert('Please correct the errors in the form.');
}
};
});
</script>

</body>
</html>
OUTPUT:
EX.NO.09 Design a web page to hide paragraph using JQuery.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide and Show Paragraph with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}

.container {
text-align: center;
}

p{
margin: 20px 0;
font-size: 18px;
}

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
}

button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>

<div class="container">
<button id="toggle-button">Hide Paragraph</button>
<p id="paragraph">This is a paragraph that can be hidden or shown using jQuery.</p>
</div>

<script>
$(document).ready(function() {
// Event handler for button click
$('#toggle-button').click(function() {
// Select the paragraph element
var $paragraph = $('#paragraph');

// Check if the paragraph is currently visible


if ($paragraph.is(':visible')) {
// If visible, hide the paragraph
$paragraph.hide();
// Change button text to "Show Paragraph"
$(this).text('Show Paragraph');
} else {
// If not visible, show the paragraph
$paragraph.show();
// Change button text to "Hide Paragraph"
$(this).text('Hide Paragraph');
}
});
});
</script>

</body>
</html>
OUTPUT:
EX.NO.10 Create a web page and add Java script to handle mouse events and form events
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Events Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}

.container {
text-align: center;
}

#hover-box {
width: 200px;
height: 200px;
background-color: #007bff;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.3s;
}

#hover-box:hover {
background-color: #0056b3;
}

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: #007bff;
color: white;
margin-top: 20px;
transition: background-color 0.3s;
}

button:hover {
background-color: #0056b3;
}

.message {
font-size: 18px;
color: #333;
margin-top: 20px;
}
</style>
</head>
<body>

<div class="container">
<!-- Mouse Event Box -->
<div id="hover-box">Hover Over Me!</div>
<!-- Click Button -->
<button id="click-button">Click Me!</button>
<!-- Message Display -->
<div id="message" class="message"></div>
</div>

<script>
$(document).ready(function() {
const hoverBox = $('#hover-box');
const messageDiv = $('#message');

// Mouseover Event
hoverBox.on('mouseover', function() {
$(this).text('Mouse Over!').css('background-color', '#28a745');
});

// Mouseout Event
hoverBox.on('mouseout', function() {
$(this).text('Hover Over Me!').css('background-color', '#007bff');
});

// Click Event
$('#click-button').on('click', function() {
messageDiv.text('Button Clicked!').css('color', '#007bff');
});
});
</script>

</body>
</html>

OUTPUT:

You might also like