Web - Tech Record

WEB TECHNOLOGIES LAB
WEEK-1 & WEEK -2 (HTML TAGS)

1.AIM: Design static web pages for home page that comprises of 3 frames. Top
frame consists of Logo and title of the web page. Left frame comprises of links
to different web pages and Right frame is used to display the content of web
pages.
SOURCE CODE:
*Frame1 code*
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="http://www.gvpcdpgc.edu.in/gvplogo2021.jpg" width="1500px" height="120px"
position:center>
</body>
</html>
*Frame2 code*
<!DOCTYPE html>
<html>
<head>
<style>
li {
margin-bottom: 10px;
font-weight: bold;
}
</style>
</head>
<body bgcolor="C8A1E0">
<ul>
<li><a href="https://www.geeksforgeeks.org/artificial-intelligence/" target="b">CSM</a></li>
<li><a href="https://www.w3schools.com/html/" target="a">HTML</a></li>
<li><a href="https://www.justdial.com/Mumbai/Tutorials-For-Civil-Engineering/nct-10502616"
target="c">CIVIL</a></li>
<li><a href="https://www.mechanicaltutorial.com/" target="a">/MECH</a></li>
</ul>
</body>
</html>
*Frame3 code*
<html>
<body text="black" bgcolor="#d84a2c ">
<h1>K.V.S MOHITH</h1>
</body>
</html>
*Main Frame code*
<frameset rows="20%,*">
<frame name="fr1" src="Frame1.html">
<frameset cols="25%,*">
<frame name="fr2" src="Frame2.html">
<frame name="fr3" src="frame3.html">
</frameset>
</frameset>
Output:
2.AIM: Left frame has links to Registration page, Login page, Contact us etc.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Left Frame with Links</title>
</head>
<body style="display: flex; margin: 0; font-family: Arial, sans-serif;">
<div style="width: 200px; background-color: #2596be; padding: 15px; box-shadow: 2px 0 5px
rgba(0, 0, 0, 0.1); height: 100vh;">
<h2>Menu</h2>
<a href="registration.html" style="display: block; color: #333; padding: 10px; text-decoration:
none; margin-bottom: 10px; border-radius: 5px;">Registration Page</a>
<a href="login.html" style="display: block; color: #333; padding: 10px; text-decoration: none;
margin-bottom: 10px; border-radius: 5px;">Login Page</a>
<a href="contact.html" style="display: block; color: #333; padding: 10px; text-decoration: none;
margin-bottom: 10px; border-radius: 5px;">Contact Us</a>
</div>
<div style="flex: 1; padding: 20px;">

<h1>Welcome to Our Website</h1>
<p>This is the main content area. Click on the links in the left frame to navigate to different
pages.</p>
</div>
</body>
</html>
Output:
3.AIM: Login page has username and password fields along with submit
button, forgot password and sign up hyperlinks.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Page</title>
</head>
<body bgcolor='red'>
<div class="form-container">
<form action="#" method="post">
<p align="center">
<label for="username">Username:</label>
<input type="text" id="username" maxlength="30" size="15" required>
</p>
<p align="center">
<label for="password">Password:</label>
<input type="password" id="password" maxlength="10" size="15" required>
</p>
</form>
<p align="center">
<a href="#">Forgot Password?</a><br>
<a href="#">Sign Up</a><br>
<input type="submit" name="s" value="Submit">
</p>
</div>
</body>
</html>
Output:
4.AIM: Registration page has username, password, confirm password, email-id,

Mobile Number, Date of birth, Address, Gender fields, submit button etc.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Page</title>
</head>
<body bgcolor=green align='center'text=white>
<div class="form-container">
<h2>Registration</h2>
<form action="#" method="post">
<p>
<label for="username">Username:</label>
<input type="text" id="username" name="username" maxlength="30">
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" name="password" maxlength="10">
</p>
<p>
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password"
maxlength="10">
</p>
<p>
<label for="email">Email ID:</label>
<input type="email" id="email" name="email" >
</p>
<p>
<label for="mobile">Mobile Number:</label>
<input type="tel" id="mobile" name="mobile" pattern="[0-9]{10}" >
</p>
<p>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" >
</p>
<p>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" ></textarea>
</p>
<p>Gender:</p>
<p>
<input type="radio" id="male" name="gender" value="male" >
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</p>
<p>
<input type="submit" value="Register">
</p>
</form>
</div>
</body>
</html>
Output:
WEEK-3
CSS(CASCADING STYLE SHEETS)
5.AIM: Apply styles to web pages using inline.
SOURCE CODE:
<html>
<head>
<title>Inline style</title>
</head>
<body bgcolor=#138d75>
<h1 align="center" style="color:black;background-color:#fdfefe">
Inline Style Sheet
</h1>
<hr>
<p>Normal Para graph</p>
<p style="font-size:15pt"><b>WEB TECHNOLOGIES<b></p>
</body>
</html>
Output:
6. AIM:Apply styles to web pages using embedded.

SOURCE CODE:
<html>
<head>
<title>Embedded Style sheet</title>
<style>
P {color:white;font-family:arial}
.s15 {font-size:20;}
body{background-color:#28b463}
h1 {color:Black;background-color:#abebc6 }
</style>
</head>
<body>
<h1> Internal Style Sheet</h1>

<hr>
<p>Normal Paragraph</p>
<p class="s15">WEB TECHNOLOGIES</p>
</body>
</html>
Output:
7. Aim: Apply styles to web pages using external style sheets.

Source code:
<html>
<head>
<title>External Style Sheet</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="tan">
<h1 align="center">External Style Sheet</h1>
<hr>
<div align="center">
<img src="https://media.istockphoto.com/id/1371339413/photo/co-working-team-meeting-
concept-businessman-using-smart-phone-and-digital-tablet-and-laptop.jpg?
s=612x612&w=0&k=20&c=ysEsVw3q2axYt3oVZAuQjtHRlN3lY-U_e0ikK5yKIXQ=" width="600"
height="500">
</div>
<p>Normal Paragraph</p>
<p class="s5">Web Technologies</p>
</body>
</html>
Output:
Week 4 and Week 5:
JAVA SCRIPT:
8. Aim: Create a form similar to the one in previous experiment. Put validation
checks on values entered by the user using JavaScript (such as age should be a
value between 1and 150).
Source code:
<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<script>
// Function to validate the form
function validateForm() {
// Get form values
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirm_password").value;
var email = document.getElementById("email").value;
var mobile = document.getElementById("mobile").value;
var dob = document.getElementById("dob").value;
var gender = document.querySelector('input[name="gender"]:checked');
// Clear previous error messages

document.getElementById("usernameError").textContent = "";
document.getElementById("passwordError").textContent = "";
document.getElementById("confirmPasswordError").textContent = "";
document.getElementById("emailError").textContent = "";
document.getElementById("mobileError").textContent = "";
document.getElementById("dobError").textContent = "";
document.getElementById("genderError").textContent = "";
// Flag to track if validation passed

var isValid = true;
// Username validation
if (username.trim() === "") {
document.getElementById("usernameError").textContent = "Username is required.";
isValid = false;
}
// Password validation
if (password.length < 10) {
document.getElementById("passwordError").textContent = "Password must be at least 6
characters.";
isValid = false;
}
// Confirm Password validation

if (password !== confirmPassword) {
document.getElementById("confirmPasswordError").textContent = "Passwords do not match.";
isValid = false;
}
// Email validation
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
document.getElementById("emailError").textContent = "Please enter a valid email address.";
isValid = false;
}
// Mobile validation (10 digits)

var mobilePattern = /^[0-9]{10}$/;
if (!mobilePattern.test(mobile)) {
document.getElementById("mobileError").textContent = "Please enter a valid 10-digit mobile
number.";
isValid = false;
}
// Date of Birth validation

if (dob === "") {
document.getElementById("dobError").textContent = "Date of Birth is required.";
isValid = false;
}
// Gender validation
if (!gender) {
document.getElementById("genderError").textContent = "Please select a gender.";
isValid = false;
}
// If validation fails, prevent form submission

if (!isValid) {
return false;
}
// If validation passes, allow form submission

alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body bgcolor="#2874a6">
<center><h1>GET REGISTERED</h1></center>
<form onsubmit="return validateForm()" align="center">


Username: <input type="text" id="username" name="username"><br>
<span id="usernameError" style="color:red;"></span><br>

Password: <input type="password" id="password" name="password"><br>
<span id="passwordError" style="color:red;"></span><br>


Confirm Password: <input type="password" id="confirm_password"
name="confirm_password"><br>
<span id="confirmPasswordError" style="color:red;"></span><br>


Email-id: <input type="email" id="email" name="email"><br>
<span id="emailError" style="color:red;"></span><br>


Mobile Number: <input type="number" id="mobile" name="mobile"><br>
<span id="mobileError" style="color:red;"></span><br>


Date of Birth: <input type="date" id="dob" name="dob"><br>
<span id="dobError" style="color:red;"></span><br>


Address: <input type="text" id="address" name="address"><br>


Gender: <br>
<input type="radio" id="male" name="gender" value="male"> Male<br>
<input type="radio" id="female" name="gender" value="female"> Female<br>
<span id="genderError" style="color:red;"></span><br>


<center><input type="submit" value="Submit"></center>
</form>
</body>
</html>
Output:
9. Aim: Write a JavaScript program to display information box as soon as page
loads.
Source code:
<!DOCTYPE html>
<html>
<head>
<title>Information Box</title>
<style>
#infoBox {
position: fixed;
left: 30%;
background-color: #cacfd2 ;
padding: 20px;
text-align: center;
}
#infoBox button {
background-color: #f1c40f;
color: white;
}
</style>
</head>
<body>
<h1>Welcome to the Webpage!</h1>

<div id="infoBox">
<h2>Information</h2>
<p>This is an important message!</p>
<button onclick="closeInfoBox()">Close</button>
</div>
<script>
// Function to close the information box
function closeInfoBox() {
document.getElementById("infoBox").style.display = "none";
}
</script>
</body>
</html>
Output:
10. Aim : Write a JavaScript program to change background color after 5
seconds of page load.
Source code:
<html>
<head>
<title>Change Background Color</title>

</head>
<body>
<h1>Page with Background Color Change</h1>

<p>The background color of this page will change after 5 seconds.</p>
<script>
// Function to change the background color
function changeBackgroundColor() {
// Change the background color to lightgreen
document.body.style.backgroundColor = "yellow";
}
// Set a 5-second delay before changing the background color

setTimeout(changeBackgroundColor, 5000); // 5000 milliseconds = 5 seconds
</script>
</body>
</html>
Output:
11. Aim : Write a JavaScript program to dynamically bold, italic and underline
words and phrases based on user actions.
Source code:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Text Styling</title>

<style>
.styled-text {
font-size: 18px;
font-family: Arial, sans-serif;
border: solid #ccc;
min-height: 100px;
}
button {
margin: 10px;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Dynamic Text Styling</h1>

<p>Click and select the given text, and use the buttons to apply styles:</p>


<div contenteditable="true" class="styled-text" >
Enter text here. You can select any word or line and apply styles like bold, italic, and
underline.
</div>


<button onclick="applyBold()">Bold</button>
<button onclick="applyItalic()">Italic</button>
<button onclick="applyUnderline()">Underline</button>
<script>
// Function to apply bold styling
function applyBold() {
document.execCommand('bold');
}
// Function to apply italic styling

function applyItalic() {
document.execCommand('italic');
}
// Function to apply underline styling
function applyUnderline() {
document.execCommand('underline');
}
</script>
</body>
</html>
Output:
12. Aim: Write a JavaScript program to display a hidden div (e.g. showing stats
of a player when user clicks on his name).
source code:
<!DOCTYPE html>
<html>
<head>
<title>Player Stats</title>
<style>
/* Hide the stats section by default */
.player-stats {
display: none;;
}
.player-name {
cursor: pointer;
color: green;
}
</style>
</head>
<body text=black>
<h1>Player List</h1>

<div>
<span class="player-name" onclick="toggleStats('player1')">Player 1</span><br>
</div>

<div id="player1" class="player-stats">
<h2>Player 1 Stats</h2>
<p>Points: 1200</p>
<p>Assists: 350</p>
<p>Rebounds: 500</p>
</div>
<p>Points: 1100</p>
<p>Assists: 400</p>
</div>
<p>Points: 1300</p>
<p>Assists: 300</p>
</div>
<script>
// JavaScript to toggle visibility of the player's stats div
function toggleStats(playerId) {
// Get the stats div for the clicked player
const statsDiv = document.getElementById(playerId);
// Check if the div is already visible
if (statsDiv.style.display === 'none' || statsDiv.style.display === '') {
statsDiv.style.display = 'block'; // Show the stats
} else {
statsDiv.style.display = 'none'; // Hide the stats
}
}
</script>
</body>
</html>
Output :
13.Aim : Create a webpage that has username and passwors using java script
that gives you error message if the username and passwors doest not match.
Source code:
<html>
<head>
<script language="javascript">
function fun()
{
var s1="vrs";
var s2="yrn";
var s3,s4;
s3=document.f1.t1.value;
s4=document.f1.t2.value;
if((s1==s3)&&(s2==s4))
window.alert("user name and password correct");
else if(!(s1==s3)&&(s2==s4))
window.alert("user name wrong");
else
if((s1==s3)&&!(s2==s4))
window.alert("password wrong");
else
if(!(s1==s3)&&!(s2==s4))
window.alert("both user name and password wrong");
}
</script>
</head>
<body>
<center>
<form name="f1" onsubmit="fun()">
<table border="1">
<tr><td>user name:<td><input type="text" name="t1" size=20></tr>
<tr><td>password:<td><input type="password" name="t2" size=20></tr>
<tr><td colspan=2 align="center"><input type="submit" value="submit"></tr>
</table>
</form>
</center>
</body>
</html>
Output:
WEEK-6 & WEEK-7

PHP
14(a).AIM: Print Hello World using php
SOURCE CODE:
<?php
echo "Hello World!";
?>
14(b). AIM: Perform basic arithmetic operations

(Addition,Subtracting,Multiplication,Division) using php.
SOURCE CODE:
<?php
$num1 = 20;
$num2 = 10;
$addition = $num1 + $num2;
$subtraction = $num1 - $num2;
$multiplication = $num1 * $num2;
$division = $num2 != 0 ? $num1 / $num2 : "Division by zero error";
echo "Numbers: $num1 and $num2<br>";
echo "Addition: $addition<br>";
echo "Subtraction: $subtraction<br>";
echo "Multiplication: $multiplication<br>";
echo "Division: $division<br>";
?>
OUTPUT:
14(c).AIM:Create an array using php

SOURCE CODE:
<html>
<body>
<?php
$numbers = array( 1, 2, 3, 4, 5);
foreach( $numbers as $value )
{
echo "Value is $value <br />";
}
</body>
</html>
OUTPUT:
14(d).AIM:Create a function using php
SOURCE CODE:
<?php
function writeMessage()
{
echo "You are really a nice person, Have a nice time!";
}
writeMessage();
?>
OUTPUT:
WEEK-8 & WEEK-9

PHP AND MYSQL
15.AIM: Perform insert, update, and retrieval and delete a record from
database using php and HTML.
SOURCE CODE:
(i)Creating a table
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testdb3";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username,
$password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "CREATE TABLE student (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP
)";
$conn->exec($sql);
echo "Table Student created successfully";
}
catch(PDOException $e)
{
echo $sql . "<br>" . $e->getMessage();
}
$conn = null;
?>
OUTPUT:
(ii)insert the values into table:

<?php
$username = "root";
$password = "";
$conn = new mysqli($servername, $username, $password,
$dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO student (firstname, lastname, email)
VALUES ('John11', 'Doe11', 'john11@example.com',2024-11-19
16:45:55)";
VALUES ('Gnaneswari', 'Kurru', 'gnanu@gmail.com',2022-11-10
16:46:06)";
if ($conn->query($sql) === TRUE) {
$last_id = $conn->insert_id;
echo "New record created successfully. Last inserted ID is: " .
$last_id;
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}$conn->close();?>
OUTPUT:
iii)update the values:

<?php
$username = "root";
$password = "";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname",
$username, $password);
// set the PDO error mode to exception
$conn->setAttribute(PDO::ATTR_ERRMODE,
PDO::ERRMODE_EXCEPTION);
$sql = "UPDATE student SET firstname='Samuel' WHERE id=2";
$stmt = $conn->prepare($sql);
$stmt->execute();
echo $stmt->rowCount() . " records UPDATED successfully";
}
{
}
$conn = null;
?>
OUTPUT:
(iv)delete the record:

<?php
$username = "root";
$password = "";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname",
$username, $password);
// set the PDO error mode to exception
$conn->setAttribute(PDO::ATTR_ERRMODE,
PDO::ERRMODE_EXCEPTION);
$sql = "DELETE FROM student WHERE id=2";
$conn->exec($sql);
echo "Record deleted successfully";
}
{
}
$conn = null;
?>
OUTPUT:
(v)retrive the record

<?php
$username = "root";
$password = "";
$conn = new mysqli($servername, $username, $password,
$dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, firstname,lastname, email,reg_date FROM
student"; // Replace 'users' with your table name
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// Output data of each row
while($row = $result->fetch_assoc()) {
echo "ID: " . $row["id"] . " - firstame: " . $row["firstname"] . " -
Email: " . $row["email"] ."-lastname:".$row["lastname"].s "<br>";
}
} else {
echo "0 results";
}
$conn->close();
?>
Output:

Web - Tech Record

Uploaded by

Copyright:

Available Formats

Web - Tech Record

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web - Tech Record

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGIES LAB

WEEK-1 & WEEK -2 (HTML TAGS)

<div style="flex: 1; padding: 20px;">

4.AIM: Registration page has username, password, confirm password, email-id,

6. AIM:Apply styles to web pages using embedded.

<h1> Internal Style Sheet</h1>

7. Aim: Apply styles to web pages using external style sheets.

// Clear previous error messages

// Flag to track if validation passed

// Confirm Password validation

// Mobile validation (10 digits)

// Date of Birth validation

// If validation fails, prevent form submission

// If validation passes, allow form submission

<form onsubmit="return validateForm()" align="center">

<title>Change Background Color</title>

<h1>Page with Background Color Change</h1>

// Set a 5-second delay before changing the background color

<title>Dynamic Text Styling</title>

<h1>Dynamic Text Styling</h1>

// Function to apply italic styling

WEEK-6 & WEEK-7

14(a).AIM: Print Hello World using php

14(b). AIM: Perform basic arithmetic operations

14(c).AIM:Create an array using php

WEEK-8 & WEEK-9

(ii)insert the values into table:

iii)update the values:

(iv)delete the record:

(v)retrive the record

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.