Scribd
Upload
2 views

Web Technology Lab

Uploaded by

21SMS06 -MERCY. P
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Web Technology Lab

Uploaded by

21SMS06 -MERCY. P
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

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.05 Design an XML document and create a style sheet in CSS & display the
document in the browser
CODE:
students.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<students>
<student>
<name>John Doe</name>
<age>22</age>
<course>MCA</course>
<grade>A</grade>
</student>
<student>
<name>Jane Smith</name>
<age>23</age>
<course>MCA</course>
<grade>B+</grade>
</student>
<student>
<name>Sam Wilson</name>
<age>21</age>
<course>MCA</course>
<grade>A+</grade>
</student>
</students>
style.css
students {
display: block;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
border: 2px solid #ccc;
}

student {
display: block;
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
}
name {
font-size: 18px;
font-weight: bold;
color: #333;
}
age, course, grade {
display: block;
margin-top: 5px;
color: #555;
}
grade {
font-style: italic;
color: #007bff;
}
OUTPUT:
EX.NO.06 Develop a web page to Create image maps.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Map Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: #333;
}
.container {
text-align: center;
margin: 20px auto;
}
img {
width: 600px;
height: auto;
}
</style>
</head>
<body>
<h1>Explore the World - Image Map</h1>
<div class="container">
<!-- The image map -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/World_map_-
_low_resolution.svg/1200px-World_map_-_low_resolution.svg.png" alt="World Map"
usemap="#worldmap">

<!-- Defining clickable areas in the image -->


<map name="worldmap">
<area shape="rect" coords="180,130,320,200" alt="USA"
href="https://en.wikipedia.org/wiki/United_States" target="_blank">
<area shape="rect" coords="620,200,760,270" alt="India"
href="https://en.wikipedia.org/wiki/India" target="_blank">
<area shape="circle" coords="1000,400,60" alt="Australia"
href="https://en.wikipedia.org/wiki/Australia" target="_blank">
</map>
</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.08 Develop a web page in PHP to fetch details from the database.
CODE:
<?php
// Sample data simulating a database
$users = [
["id" => 1, "name" => "John Doe", "email" => "[email protected]"],
["id" => 2, "name" => "Jane Doe", "email" => "[email protected]"],
["id" => 3, "name" => "Alice Smith", "email" => "[email protected]"],
];

// Function to fetch user details


function fetchUsers($users) {
if (empty($users)) {
return "No users found.";
}

$output = "<h2>User Details:</h2>";


$output .= "<ul>";
foreach ($users as $user) {
$output .= "<li>ID: {$user['id']}, Name: {$user['name']}, Email: {$user['email']}</li>";
}
$output .= "</ul>";

return $output;
}

// Display user details


echo fetchUsers($users);
?>
OUTPUT:
ID: 1, Name: John Doe, Email: [email protected]
ID: 2, Name: Jane Doe, Email: [email protected]
ID: 3, Name: Alice Smith, Email: [email protected]
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