Scribd
Upload
19 views

Web Tech File

The document contains examples of HTML and CSS code for creating registration forms, lists, text formatting, style sheets, form validation, DOM manipulation, and a prime number checker program. The first example shows code for a registration form with various input fields and styling. The second example demonstrates ordered and unordered lists. The third uses text formatting tags like <strong> and <em>. Later examples implement internal and external style sheets, form validation in JavaScript, disabling buttons after 5 seconds, and a prime number checker.

Uploaded by

uday vaidya
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
19 views

Web Tech File

The document contains examples of HTML and CSS code for creating registration forms, lists, text formatting, style sheets, form validation, DOM manipulation, and a prime number checker program. The first example shows code for a registration form with various input fields and styling. The second example demonstrates ordered and unordered lists. The third uses text formatting tags like <strong> and <em>. Later examples implement internal and external style sheets, form validation in JavaScript, disabling buttons after 5 seconds, and a prime number checker.

Uploaded by

uday vaidya
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/ 25

Page |1

1. Design a Registration form with html and css.


HTML code :
<!DOCTYPE html>
<html>
<head>
<title>REGISTRATION FORM</title>
<link rel="stylesheet" href="form.css">
<script src="form.js"></script>
</head>
<body>

<h2>REGISTRATION FORM</h2>

<div class="my-div">
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br>

<label for="phone">Phone Number:</label><br>


<input type="tel" id="phone" name="phone" required><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>

<label for="country">Country:</label><br>
<input type="text" id="country" name="country" required><br>

<label for="city">City:</label><br>
<input type="text" id="city" name="city" required><br>

<label for="gender">Gender:</label><br>
<div class="radio-container">
<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><br>
</div>

<input type="submit" value="Submit">


Page |2

</form>
</div>
</body>
</html>

CSS code :
3

/* Styling for the form container */


.my-div {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #36454F;
border-radius: 5px;
}

/* Styling for the form heading */


h2 {
text-align: center;
color: #36454F ;
}

/* Styling for the form labels */


label {
display: block;
margin-top: 10px;
color: #f2f2f2;
}

/* Styling for the form input fields */


input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="file"] {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
Page |3

/* Styling for the radio buttons */


input[type="radio"] {
margin-top: 5px;
margin-right: 5px;
}

/* Styling for the submit button */


input[type="submit"] {
width: 100%;
background-color: #f2f2f2;
color: #191970;
font-size: medium;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

/* Styling for the submit button on hover */


input[type="submit"]:hover {
background-color: #45a049;
}

/* Styling for the form validation error messages */


input:invalid {
border-color: #ff0000;
}

/* Styling for the form validation error messages */


input:invalid + h4 {
color: #ff0000;
margin-bottom: 10px;
}

.radio-container {
background-color: #36454F;
display: flex;
align-items: center;
margin-bottom: 20px;
Page |4

.radio-container label {
margin-right: 10px;
}

OUTPUT:

2. Practical implementation of listing.


<!DOCTYPE html>
Page |5

<html lang="en">
<head>
<title>List Example</title>
</head>
<body>
<h1>Types of Fruits</h1>

<!-- Ordered List -->


<h2>Ordered List:</h2>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Grapes</li>
</ol>

<!-- Unordered List -->


<h2>Unordered List:</h2>
<ul>
<li>Strawberries</li>
<li>Blueberries</li>
<li>Raspberries</li>
<li>Mangoes</li>
</ul>

<p>These are some common types of fruits.</p>


</ body>
</ html>

OUTPUT:
Page |6

3. Design a document using text formatting tags.


<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title>
</head>
<body>
Page |7

<h1>Text Formatting Example</h1>

<p>This is a <strong>bold</strong> text example.</p>


<p>This is an <em>italic</em> text example.</p>
<p>This is an <u>underlined</u> text example.</p>

<h2>Lists</h2>
<ul>
<li>This is an unordered list item 1</li>
<li>This is an unordered list item 2</li>
<li>This is an unordered list item 3</li>
</ul>

<ol>
<li>This is an ordered list item 1</li>
<li>This is an ordered list item 2</li>
<li>This is an ordered list item 3</li>
</ol>

<h2>Links</h2>
<p>Visit <a href="https://www.example.com">Example.com</a> for more
information.</p>

<h2>Images</h2>
<img src="https://www.example.com/image.jpg" alt="Example Image">

<h2>Blockquotes</h2>
<blockquote>
This is a blockquote. It is often used to highlight a quote from another source.
</blockquote>

<h2>Code</h2>
<pre>
<code>
function greet() {
console.log("Hello, world!");
}
</code>
</pre>
Page |8

</body>
</html>

OUTPUT:

4. WRITE A PROGRAM USING INTERNAL AND EXTERNAL STYLE SHEETS

<!DOCTYPE html>
<html>
<head>
<title>Style Example</title>
<style>
body {
Page |9

font-family: Arial, sans-serif;


background-color: #f0f0f0;
}
h1 {
color: #333;
}
p{
font-size: 18px;
color: #666;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is example for external styles</h1>
<p>This is a sample webpage with internal styles.</p>
</body>
</html>

/* External Style Sheet */


body {
margin: 0;
padding: 0;
}
h1 {
font-size: 36px;
color: #007bff;
}
p{
line-height: 1.6;
}

OUTPUT:
P a g e | 10

5. WRITE A PROGRAM THAT IMPLEMENTS VALIDATIONS IN JS IN A


REGISTRATION FORM

<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
P a g e | 11

<input type="text" id="name" name="name">


<span class="error" id="nameError"></span><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email">
<span class="error" id="emailError"></span><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password">
<span class="error" id="passwordError"></span><br><br>

<input type="submit" value="Register">


</form>

<script>
function validateForm() {
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;

let isValid = true;

// Reset error messages


document.getElementById("nameError").innerHTML = "";
document.getElementById("emailError").innerHTML = "";
document.getElementById("passwordError").innerHTML = "";

// Validate Name
if (name === "") {
document.getElementById("nameError").innerHTML = "Name is required";
isValid = false;
}

// Validate Email
if (email === "") {
document.getElementById("emailError").innerHTML = "Email is required";
isValid = false;
} else if (!isValidEmail(email)) {
document.getElementById("emailError").innerHTML = "Invalid email format";
isValid = false;
P a g e | 12

// Validate Password
if (password === "") {
document.getElementById("passwordError").innerHTML = "Password is
required";
isValid = false;
} else if (password.length < 8) {
document.getElementById("passwordError").innerHTML = "Password must be
at least 8 characters";
isValid = false;
}

return isValid;
}

function isValidEmail(email) {
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailRegex.test(email);
}
</script>
</body>
</html>
OUTPUT:
P a g e | 13

6. WRITE A PROGRAM THAT CREATES A DOM IN WHICH BUTTON GETS


DISABLED AFTER 5 SECONDS (HTML AND JS).

<!DOCTYPE html>
<html>
<head>
<title>Disable Buttons Example</title>
<script>

function disableButtons() {
var buttons = document.getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {


buttons[i].disabled = true;
}
alert("button is disabled")
P a g e | 14

setTimeout(disableButtons, 5000);
</script>
<style>
body{
background-color: #36454F;
color: white;
}
</style>
</head>
<body>
<h1>Disable Button Example</h1>
<button>Button 1</button>
</body>
</html>

OUTPUT:
P a g e | 15

7. WRITE A PROGRAM TO CHECK WHETHER A NUMBER IS PRIME OR


NOT .

<!DOCTYPE html>
<html>
<head>
<title>Prime Number Checker</title>
<script>

function isPrime()
{
var number = parseInt(document.getElementById("number").value);
if (number < 2)
{
document.getElementById("result").innerHTML = "Not a prime number";
return;
}
P a g e | 16

for (var i = 2; i <= Math.sqrt(number); i++)


{

if (number % i === 0)
{
document.getElementById("result").innerHTML = "Not a prime number";
return;
}
}

document.getElementById("result").innerHTML = "Prime number";


}
</script>
</head>
<body>
<h1>Prime Number Checker</h1>
<label for="number">Enter a number:</label>
<input type="number" id="number">
<button onclick="isPrime()">Check</button>
<p id="result"></p>
</body>
</html>
OUTPUT:
P a g e | 17

8.WRITE A PROGRAM TO IMPLIMENT SUM OF THREE NUMBER USING


FUNCTIONS .

<!DOCTYPE html>
<html>
<head>
<title>Sum of Three Numbers</title>
<script>
// Function to calculate the sum of three numbers
function sumOfThreeNumbers() {
// Get the input values
var number1 = parseInt(document.getElementById("number1").value);
var number2 = parseInt(document.getElementById("number2").value);
var number3 = parseInt(document.getElementById("number3").value);

// Calculate the sum


var sum = number1 + number2 + number3;
P a g e | 18

// Display the result


document.getElementById("result").innerHTML = "The sum is: " + sum;
}
</script>
</head>
<body>
<h1>Sum of Three Numbers</h1>
<label for="number1">Number 1:</label>
<input type="number" id="number1"><br>
<label for="number2">Number 2:</label>
<input type="number" id="number2"><br>
<label for="number3">Number 3:</label>
<input type="number" id="number3"><br>
<button onclick="sumOfThreeNumbers()">Calculate</button>
<p id="result"></p>
</body>
</html>

OUTPUT:
P a g e | 19

9.1 FILE READING

<?php
$file = "helloworld.txt";

// Check if the file exists


if (file_exists($file)) {
// Open the file for reading
$handle = fopen($file, "r");

// Read the contents of the file line by line


while (($line = fgets($handle)) !== false) {
// Process each line as needed
echo $line;
}
P a g e | 20

// Close the file handle


fclose($handle);
} else {
echo "File not found.";
}
?>

OUTPUT:

9.2 FILE READING

<?php
$file = "file.txt";
$data = "Hi how are you?";

// Open the file for writing (create if it doesn't exist)


$handle = fopen($file, "w");

// Write the data to the file


if (fwrite($handle, $data) !== false) {
echo "Data written successfully.";
} else {
echo "Error writing data to the file.";
}

// Close the file handle


P a g e | 21

fclose($handle);
?>

OUTPUT:

9.3 IF FILE NOT FOUND

<?php
$file = "example.txt";

// Check if the file exists


if (file_exists($file)) {
// File found, perform operations here
echo "File found.";
} else {
// File not found, display error message
echo "File not found.";
}
?>

OUTPUT:
P a g e | 22

10. FILE UPLOADING

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$targetDir = "uploads/"; // Directory where the uploaded files will be stored
$targetFile = $targetDir . basename($_FILES["fileToUpload"]["name"]); // Path
of the uploaded file

// Check if the file is a valid image


$imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));
$allowedExtensions = array("jpg", "jpeg", "png", "gif");
if (!in_array($imageFileType, $allowedExtensions)) {
echo "Only JPG, JPEG, PNG, and GIF files are allowed.";
exit;
}

// Check if the file already exists


P a g e | 23

if (file_exists($targetFile)) {
echo "File already exists.";
exit;
}

// Check if the file was successfully uploaded


if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $targetFile)) {
echo "File uploaded successfully.";
} else {
echo "Error uploading file.";
}
}
?>

<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
</head>
<body>
<h2>Upload a File</h2>
<form method="POST" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]); ?>" enctype="multipart/form-data">
<input type="file" name="fileToUpload" required><br><br>
<input type="submit" value="Upload">
</form>
</body>
</html>

OUTPUT:
P a g e | 24

10. WAP TO IMPLEMENT CONCEPT OF SESSIONS.

<?php
session_start();
?>
<html>
<head>
<title>session 1</title>
<body>
<?php
$_SESSION['name']="SESSION 1";
$_SESSION['id']=785;
echo "Sessions are working";
?>
</body>
</html>
P a g e | 25

OUTPUT:

You might also like