Scribd
Upload
6 views14 pages

WT Practical 6 to 10

Uploaded by

priyanshusinghkingg
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
6 views14 pages

WT Practical 6 to 10

Uploaded by

priyanshusinghkingg
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/ 14

Prac cal - 6

Aim: Design your por olio with the help of basic html tags.

Tools Used: Text Editor (e.g., Visual Studio Code, Sublime Text), Web Browser (e.g., Google Chrome, Mozilla
Firefox)

Theory:
HTML (HyperText Markup Language) is the standard language for crea ng web pages. It uses various tags like
<html>, <head>, < tle>, <body>, <h1> to <h6>, <p>, <a>, <img>, <ul>, <ol>, and <table> to define the structure
and content of a webpage.

Code:
<!DOCTYPE html>

<html>

<head>

< tle>My Por olio</ tle>

</head>

<body>

<h1>Welcome to My Por olio</h1>

<h2>About Me</h2>

<p>HOLA AMIGOS! OR HELLO EVERYONE Welcome to my por olio, where excellence in English meets a
burgeoning proficiency in programming languages. As a dedicated enthusiast of both language and technology,
I am excited to present my journey, showcasing a fusion of linguis c precision and programming prowess. With
a founda on rooted in a comprehensive understanding of the English language, complemented by beginner to
moderate level skills in programming languages such as C, C++, and Python, I offer a unique blend of crea ve
expression and analy cal problem-solving.</p>

<h2>Educa on</h2>

<ul>

<li>Bachelor of Technology in Informa on Technology</li>

<li>Web Development Intern at Codso </li>

<li>c++ cer ficate from Internshala</li>

</ul>
<h2>Projects</h2>

<ol>

<li>A landing page</li>

<li>A Calculator using HTML and CSS</li>

<li>Por olio page for myself</li>

<li>E-COMMERCE WEBSITE FOR HISTORIC AND LATEST STAMPS (DAAK INDIA)</li>

</ol>

<h2>Skills</h2>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>Python</li>

<li>C++</li>

</ul>

<h2>Contact</h2>

<p>Email: <a href="ashutoshjha@gmail.com">example@email.com</a></p>

<p>LinkedIn: <a href="linkedin.com/in/Ashutosh jha /">Visit my LinkedIn</a></p>

</body>

</html>
Output:
Prac cal - 7
Aim: Create HTML Page that contains form with fields Name, Email, Mobile No, Gender , Favourite Color and
a bu on now write a JavaScript code to combine and display the informa on in textbox when the bu on is
clicked and implement valida on.

Tools Used: Text Editor (e.g., Visual Studio Code, Sublime Text), Web Browser (e.g., Google Chrome, Mozilla
Firefox)

Theory:
Forms in HTML allow users to input data. JavaScript can be used to validate form fields (like checking if the mobile
number is 10 digits or if the email is valid) and to manipulate the DOM to display data dynamically.
We use getElementById() to access user input and innerText or value to update elements.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Form Informa on Display</ tle>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
input, select, bu on, textarea {
margin: 10px;
padding: 10px;
font-size: 16px;
display: block;
width: 80%;
max-width: 400px;
margin-le : auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Form Informa on Display</h2>
<form id="infoForm">
<input type="text" id="name" placeholder="Enter your name">
<input type="email" id="email" placeholder="Enter your email">
<input type="tel" id="mobile" placeholder="Enter your mobile
number">
<select id="gender">
<op on value="">Select Gender</op on>
<op on value="Male">Male</op on>
<op on value="Female">Female</op on>
<op on value="Other">Other</op on>
</select>
<input type="text" id="color" placeholder="Enter your favourite
colour">
<bu on type="bu on" onclick="displayInfo()">Submit</bu on>
</form>
<textarea id="output" rows="5" readonly></textarea>
<script>
func on displayInfo() {
let name = document.getElementById('name').value.trim();
let email = document.getElementById('email').value.trim();
let mobile = document.getElementById('mobile').value.trim();
let gender = document.getElementById('gender').value;
let color = document.getElementById('color').value.trim();
if (name === "" || email === "" || mobile === "" || gender === "" ||
color === "") {
alert("Please fill in all fields.");
return;
}
let outputText = `Name: ${name}\nEmail: ${email}\nMobile:
${mobile}\nGender: ${gender}\nFavourite Colour: ${color}`;
document.getElementById('output').value = outputText;
}
</script>
</body>
</html>

Output:
Prac cal - 8
Aim: Create XML file to store student informa on like Enrolment Number, Name, Mobile Number , Email Id.

Tools Used: Text Editor (e.g., Visual Studio Code, Sublime Text), Web Browser (e.g., Google Chrome, Mozilla
Firefox)

Theory:
XML is used to store and transport data in a structured and hierarchical format. It allows easy sharing of data
between different systems or so ware.

Code:
<?xml version="1.0" encoding="UTF-8"?>

<students>

<student>

<enrolmentNumber>12345</enrolmentNumber>

<name>John Doe</name>

<mobileNumber>9876543210</mobileNumber>

<email>john.doe@example.com</email>

</student>

<student>

<enrolmentNumber>12346</enrolmentNumber>

<name>Jane Smith</name>

<mobileNumber>9876543211</mobileNumber>

<email>jane.smith@example.com</email>

</student>

<student>

<enrolmentNumber>12347</enrolmentNumber>

<name>Michael Johnson</name>

<mobileNumber>9876543212</mobileNumber>
<email>michael.johnson@example.com</email>

</student>

</students>

Output:
Prac cal - 9
Aim: Write a php script to read data from txt file and display it in html table (the file contains info in format
Name: Password: Email ).

Tools Used: Text Editor (e.g., Visual Studio Code, Sublime Text), Web Browser (e.g., Google Chrome, Mozilla
Firefox)

Theory:
PHP can read data from text files using file-handling func ons like fopen(), fgets(), or file().
We split each line using the delimiter: and then format it into an HTML table row.

Code:
<?php

// Define the file path

$file = "data.txt";

// Check if file exists

if (!file_exists($file)) {

die("File not found!");

// Read the file content

$lines = file($file, FILE_IGNORE_NEW_LINES |

FILE_SKIP_EMPTY_LINES);

?>

<!DOCTYPE html>

<html>

<head>

< tle>Data from Text File</ tle>

<style>

table {

width: 60%;

border-collapse: collapse;
margin: 20px 0;

th, td {

border: 1px solid black;

padding: 10px;

text-align: le ;

th {

background-color: #f2f2f2;

</style>

</head>

<body>

<h2>User Data</h2>

<table>

<tr>

<th>Name</th>

<th>Password</th>

<th>Email</th>

</tr>

<?php

// Process each line and display in table

foreach ($lines as $line) {

$parts = explode(":", $line);

if (count($parts) === 3) {

echo "<tr>";

echo "<td>" . htmlspecialchars(trim($parts[0])) . "</td>";

echo "<td>" . htmlspecialchars(trim($parts[1])) . "</td>";

echo "<td>" . htmlspecialchars(trim($parts[2])) . "</td>";


echo "</tr>";

?>

</table>

</body>

</html>

Output:
Prac cal - 10
Aim: .Write a PHP Script for login authen ca on. Design an html form which takes username and password
from user and validate against stored username and password in file.

Tools Used: Text Editor (e.g., Visual Studio Code, Sublime Text), Web Browser (e.g., Google Chrome, Mozilla
Firefox)

Theory:
 HTML form collects the username and password.

 PHP reads each line from users.txt, where data is stored like:
username: password

 It compares input with stored creden als and authen cates the user.

Code:
<?php

session_start();

// Define the file path

$file = "data.txt";

// Check if file exists

if (!file_exists($file)) {

die("File not found!");

// Read the file content

$lines = file($file, FILE_IGNORE_NEW_LINES |

FILE_SKIP_EMPTY_LINES);

// Handle login form submission

if ($_SERVER["REQUEST_METHOD"] === "POST") {

$username = trim($_POST['username']);

$password = trim($_POST['password']);

$authen cated = false;

foreach ($lines as $line) {


list($storedUser, $storedPass, $storedEmail) = explode(":", $line);

if ($username === $storedUser && $password === $storedPass) {

$_SESSION['username'] = $username;

$authen cated = true;

break;

if (!$authen cated) {

$error = "Invalid Username or Password";

} else {

header("Loca on: welcome.php");

exit();

?>

<!DOCTYPE html>

<html>

<head>

< tle>Login Page</ tle>

<style>

body { font-family: Arial, sans-serif; }

.container { width: 300px; margin: 100px auto; text-align: center; }

input { width: 100%; padding: 8px; margin: 5px 0; }

bu on { width: 100%; padding: 8px; background-color: blue; color:

white; border: none; }

.error { color: red; }

</style>

</head>

<body>
<div class="container">

<h2>Login</h2>

<?php if (isset($error)) echo "<p class='error'>$error</p>"; ?>

<form method="POST">

<input type="text" name="username" placeholder="Username"

required><br>

<input type="password" name="password" placeholder="Password"

required><br>

<bu on type="submit">Login</bu on>

</form>

</div>

</body>

</html>

Output:

You might also like

pFad - Phonifier reborn

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

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy