Scribd
Upload
9 views21 pages

Web Tech Program 4 - 10

The document describes using internal, external, and inline CSS to format a college web page. Code examples are provided for each method. The internal CSS is added within style tags in the head. The external CSS is linked via a stylesheet file. The inline CSS is added directly to elements as style attributes.

Uploaded by

27adityajha27
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
9 views21 pages

Web Tech Program 4 - 10

The document describes using internal, external, and inline CSS to format a college web page. Code examples are provided for each method. The internal CSS is added within style tags in the head. The external CSS is linked via a stylesheet file. The inline CSS is added directly to elements as style attributes.

Uploaded by

27adityajha27
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/ 21

‭PROGRAM-4‬

‭AIM:‬‭Use External, Internal, and Inline CSS to format‬‭college web page that you created.‬

‭CODE‬

‭Internal CSS Code:‬

‭ !DOCTYPE html>‬
<
‭<html lang="en">‬
‭<head>‬
‭<meta charset="UTF-8">‬
‭<meta name="viewport" content="width=device-width, initial-scale=1.0">‬
‭<title>MAIT</title>‬
‭<style>‬
‭body {‬
‭font-family: 'Arial', sans-serif;‬
‭background: linear-gradient(to right, #3498db, #2ecc71); color: #fff;‬
‭margin: 0;‬
‭padding: 0; display: flex;‬
‭flex-direction: column; align-items: center; justify-content: center; min-height: 100vh;‬
‭}‬
‭h1 {‬
‭font-size: 2.5em; margin: 0;‬
‭animation: fadeIn 1.5s ease-in-out;‬
‭}‬
‭p {‬
‭font-size: 1.2em; max-width: 800px; text-align: center;‬
‭}‬
‭ul {‬
‭list-style: none; padding: 0;‬
‭text-align: center; margin-top: 20px;‬
‭}‬
‭ul li {‬
‭margin: 10px 0;‬
‭}‬
‭a {‬
‭color: #fff;‬
‭text-decoration: none;‬
‭transition: color 0.3s ease-in-out;‬
}‭ ‬
‭a:hover {‬
‭color: #f39c12;‬
‭}‬
‭/* Fade-in Animation */ @keyframes fadeIn {‬
‭from {‬
‭opacity: 0;‬
‭transform: translateY(-20px);‬
‭}‬

t‭o {‬
‭opacity: 1;‬
‭transform: translateY(0);‬
‭}‬
‭}‬
‭</style>‬
‭</head>‬
‭<body>‬
‭<h1>MAIT</h1>‬
‭<p>MAIT‬ ‭is‬ ‭a‬ ‭leading‬ ‭engineering‬ ‭college‬ ‭located‬ ‭in‬ ‭Delhi,‬ ‭India.‬ ‭It‬ ‭is‬ ‭affiliated‬ ‭with‬ ‭Guru‬
‭Gobind‬
‭Indraprastha‬ ‭University‬ ‭and‬ ‭approved‬ ‭by‬ ‭AICTE.‬ ‭MAIT‬ ‭offers‬ ‭various‬ ‭undergraduate‬ ‭and‬
‭postgraduate programs in‬
‭engineering and management.</p>‬
‭<h2>Courses Offered</h2>‬
‭<ul>‬
‭<li>B.Tech</li>‬
‭<li>M.Tech</li>‬
‭<li>MCA</li>‬
‭<li>MBA</li>‬
‭</ul>‬
‭<h2>Departments</h2>‬
‭<ul>‬
‭<li><a href="https://cse.mait.ac.in" target="#">Computer Science and Engineering</a></li>‬
‭<li><a‬ ‭href="https://ece.mait.ac.in"‬ ‭target="#">Electronics‬ ‭and‬ ‭Communication‬
‭Engineering</a></li>‬
‭<li><a href="https://it.mait.ac.in" target="#">Information Technology</a></li>‬
‭<li><a href="https://eee.mait.ac.in" target="#">Electrical and Electronics Engineering</a></li>‬
‭<li><a href="https://mae.mait.ac.in" target="#">Mechanical Engineering</a></li>‬
‭<li><a href="https://mba.mait.ac.in" target="#">Management Studies</a></li>‬
‭ li><a href="https://apsc.mait.ac.in" target="#">Basic Science and Humanities</a></li>‬
<
‭</ul>‬
‭<h2>Faculties</h2>‬
‭<ul>‬
‭<li><a‬ ‭href="https://cse.mait.ac.in/index.php/people/faculty/profile"‬ ‭target="#">Faculty‬ ‭of‬
‭Computer Science and‬
‭Engineering</a></li>‬
‭<li><a‬ ‭href="https://ece.mait.ac.in/index.php/people/faculty/faculty-‬ ‭profiles"‬
‭target="#">Faculty of‬
‭Electronics and Communication Engineering</a></li>‬
‭<li><a‬ ‭href="https://it.mait.ac.in/index.php/people1/faculty-profile"‬ ‭target="#">Faculty‬ ‭of‬
‭Information‬
‭Technology</a></li>‬
‭<li><ahref="‬‭https://eee.mait.ac.in/index.php/people/faculty/professional-membership‬‭”‬
‭target="#">Faculty of Electrical and Electronics Engineering</a></li>‬
‭<li><a‬ ‭href="https://me.mait.ac.in/index.php/people/faculty"‬ ‭target="#">Faculty‬ ‭of‬ ‭Mechanical‬
‭Engineering</a>‬
‭</li>‬
‭<li><ahref="https://mba.mait.ac.in/index.php/people/faculty"target="#">Faculty‬‭of‬‭Management‬
‭Studies</a></li>‬
‭<li><a‬ ‭href="https://apsc.mait.ac.in/index.php/people/faculty"‬ ‭target="#">Faculty‬ ‭of‬ ‭Basic‬
‭Science and Humanities</a></li>‬
‭</ul>‬
‭<h2>Library</h2>‬
‭<p>MAIT‬‭has‬‭a‬‭well-stocked‬‭library‬‭with‬‭over‬‭40,000‬‭books,‬‭national‬‭and‬‭international‬‭journals,‬
‭and periodicals. The‬
‭library also provides online access to e-books, e-journals, and other digital resources.</p>‬
‭</body>‬
‭</html>‬

‭External CSS:‬

‭HTML Code:‬

‭ !DOCTYPE html>‬
<
‭<html lang="en">‬
‭<head>‬
‭<meta charset="UTF-8">‬
‭<meta name="viewport" content="width=device-width, initial-scale=1.0">‬
‭<title>MAIT</title>‬
‭ link rel="stylesheet" href="style.css">‬
<
‭</head>‬
‭<body>‬
‭<h1>MAIT</h1>‬
‭<p>MAIT‬ ‭is‬ ‭a‬ ‭leading‬ ‭engineering‬ ‭college‬ ‭located‬ ‭in‬ ‭Delhi,‬ ‭India.‬ ‭It‬ ‭is‬ ‭affiliated‬ ‭with‬ ‭Guru‬
‭Gobind‬
‭Indraprastha‬ ‭University‬ ‭and‬ ‭approved‬ ‭by‬ ‭AICTE.‬ ‭MAIT‬ ‭offers‬ ‭various‬ ‭undergraduate‬ ‭and‬
‭postgraduate programs in‬
‭engineering and management.</p>‬
‭<h2>Courses Offered</h2>‬
‭<ul>‬
‭<li>B.Tech</li>‬
‭<li>M.Tech</li>‬
‭<li>MCA</li>‬
‭<li>MBA</li>‬
‭</ul>‬
‭<h2>Departments</h2>‬
‭<ul>‬
‭<li><a href="https://cse.mait.ac.in" target="#">Computer Science and Engineering</a></li>‬
‭<li><a‬ ‭href="https://ece.mait.ac.in"‬ ‭target="#">Electronics‬ ‭and‬ ‭Communication‬
‭Engineering</a></li>‬
‭<li><a href="https://it.mait.ac.in" target="#">Information Technology</a></li>‬
‭<li><a href="https://eee.mait.ac.in" target="#">Electrical and Electronics Engineering</a></li>‬
‭<li><a href="https://mae.mait.ac.in" target="#">Mechanical Engineering</a></li>‬
‭<li><a href="https://mba.mait.ac.in" target="#">Management Studies</a></li>‬
‭<li><a href="https://apsc.mait.ac.in" target="#">Basic Science and Humanities</a></li>‬
‭</ul>‬
‭<h2>Faculties</h2>‬
‭<ul>‬
‭<li><a‬ ‭href="https://cse.mait.ac.in/index.php/people/faculty/profile"‬ ‭target="#">Faculty‬ ‭of‬
‭Computer Science and‬
‭Engineering</a></li>‬
‭<li><a‬ ‭href="https://ece.mait.ac.in/index.php/people/faculty/faculty-‬ ‭profiles"‬
‭target="#">Faculty of‬
‭Electronics and Communication Engineering</a></li>‬
‭<li><a‬ ‭href="https://it.mait.ac.in/index.php/people1/faculty-profile"‬ ‭target="#">Faculty‬ ‭of‬
‭Information‬
‭Technology</a></li>‬
‭<li><a‬ ‭href="https://eee.mait.ac.in/index.php/people/faculty/professional-‬ ‭membership"‬
‭target="#">Faculty of‬
‭ lectrical and Electronics Engineering</a></li>‬
E
‭<li><a‬ ‭href="https://me.mait.ac.in/index.php/people/faculty"‬ ‭target="#">Faculty‬ ‭of‬ ‭Mechanical‬
‭Engineering</a>‬
‭</li>‬
‭<li><a‬ ‭href="https://mba.mait.ac.in/index.php/people/faculty"‬ ‭target="#">Faculty‬ ‭of‬
‭Management Studies</a></li>‬
‭<li><a‬ ‭href="https://apsc.mait.ac.in/index.php/people/faculty"‬ ‭target="#">Faculty‬ ‭of‬ ‭Basic‬
‭Science and‬
‭Humanities</a></li>‬
‭</ul>‬
‭<h2>Library</h2>‬
‭<p>MAIT‬‭has‬‭a‬‭well-stocked‬‭library‬‭with‬‭over‬‭40,000‬‭books,‬‭national‬‭and‬‭international‬‭journals,‬
‭and periodicals. The‬
‭library also provides online access to e-books, e-journals, and other digital resources.</p>‬
‭</body>‬
‭</html>‬

‭ SS Code:‬
C
‭body {‬
‭font-family: 'Arial', sans-serif;‬
‭background: linear-gradient(to right, #3498db, #2ecc71); color: #fff;‬
‭margin: 0;‬
‭padding: 0; display: flex;‬
‭flex-direction: column; align-items: center; justify-content: center; min-height: 100vh;‬
‭}‬

h‭ 1 {‬
‭font-size: 2.5em; margin: 0;‬
‭animation: fadeIn 1.5s ease-in-out;‬
‭}‬

p‭ {‬
‭font-size: 1.2em; max-width: 800px; text-align: center;‬
‭}‬

u‭ l {‬
‭list-style: none; padding: 0;‬
‭text-align: center; margin-top: 20px;‬
‭}‬
u‭ l li {‬
‭margin: 10px 0;‬
‭}‬

a‭ {‬
‭color: #fff;‬

t‭ext-decoration: none;‬
‭transition: color 0.3s ease-in-out;‬
‭}‬

a‭ :hover {‬
‭color: #f39c12;‬
‭}‬

/‭* Fade-in Animation */ @keyframes fadeIn {‬


‭from {‬
‭opacity: 0;‬
‭transform: translateY(-20px);‬
‭}‬

t‭o {‬
‭opacity: 1;‬
‭transform: translateY(0);‬

}‭ ‬
‭}‬

‭Inline CSS Code:‬

‭ !DOCTYPE html>‬
<
‭<html lang="en">‬

‭ head>‬
<
‭<meta charset="UTF-8">‬
‭<meta name="viewport" content="width=device-width, initial-scale=1.0">‬
‭<title>MAIT</title>‬
‭</head>‬
‭ body‬ ‭style="font-family:‬ ‭'Arial',‬ ‭sans-serif;‬ ‭background:‬ ‭linear-gradient(to‬ ‭right,‬ ‭#3498db,‬
<
‭#2ecc71); color: #fff;‬
‭margin: 0;‬
‭padding: 0; display: flex;‬
‭flex-direction: column; align-items: center; justify-content: center; min-height: 100vh;">‬
‭<h1 style="font-size: 2.5em; margin: 0;‬
‭animation: fadeIn 1.5s ease-in-out;">MAIT</h1>‬
‭<p style="font-size: 1.2em; max-width: 800px;‬
‭text-align:‬‭center;">MAIT‬‭is‬‭a‬‭leading‬‭engineering‬‭college‬‭located‬‭in‬‭Delhi,‬‭India.‬‭It‬‭is‬‭affiliated‬
‭with Guru‬
‭Gobind‬
‭Indraprastha‬ ‭University‬ ‭and‬ ‭approved‬ ‭by‬ ‭AICTE.‬ ‭MAIT‬ ‭offers‬ ‭various‬ ‭undergraduate‬ ‭and‬
‭postgraduate programs in‬
‭engineering and management.</p>‬
‭<h2>Courses Offered</h2>‬
‭<ul>‬
‭<li>B.Tech</li>‬
‭<li>M.Tech</li>‬
‭<li>MCA</li>‬
‭<li>MBA</li>‬
‭</ul>‬

‭ h2>Departments</h2>‬
<
‭<ul style="list-style: none; padding: 0;‬
‭text-align: center; margin-top: 20px;">‬
‭<li style="margin: 10px 0;"><a href="https://cse.mait.ac.in" target="#" style="color: #fff;‬
‭text-decoration:none;‬ ‭transition:‬ ‭color‬ ‭0.3s‬ ‭ease-in-out;">Computer‬ ‭Science‬ ‭and‬
‭Engineering</a></li>‬
‭<li style="margin: 10px 0;"><a href="https://ece.mait.ac.in" target="#" style="color: #fff;‬
‭text-decoration:‬ ‭none;transition:‬ ‭color‬ ‭0.3s‬ ‭ease-in-out;">Electronics‬ ‭and‬ ‭Communication‬
‭Engineering</a></li>‬
‭<li style="margin: 10px 0;"><a href="https://it.mait.ac.in" target="#" style="color: #fff;‬
‭text-decoration: none;transition: color 0.3s ease-in-out;">Information Technology</a></li>‬
‭<li style="margin: 10px 0;"><a href="https://eee.mait.ac.in" target="#" style="color: #fff;‬
‭text-decoration:‬ ‭none;transition:‬ ‭color‬ ‭0.3s‬ ‭ease-in-out;">Electrical‬ ‭and‬ ‭Electronics‬
‭Engineering</a></li>‬
‭<li style="margin: 10px 0;"><a href="https://mae.mait.ac.in" target="#" style="color: #fff;‬
‭text-decoration: none;transition: color 0.3s ease-in-out;">Mechanical Engineering</a></li>‬
‭<li style="margin: 10px 0;"><a href="https://mba.mait.ac.in" target="#" style="color: #fff;‬
‭text-decoration: none;transition: color 0.3s ease-in-out;">Management Studies</a></li>‬

‭ li style="margin: 10px 0;"><a href="https://apsc.mait.ac.in" target="#" style="color: #fff;‬


<
‭text-decoration: none;transition: color 0.3s ease-in-out;">Basic Science and Humanities</a></li>‬
‭</ul>‬
‭<h2>Faculties</h2>‬
‭<ul>‬
‭<li‬ ‭style="margin:‬ ‭10px‬ ‭0;"><a‬ ‭href="https://cse.mait.ac.in/index.php/people/faculty/profile"‬
‭target="#"‬‭style="color:‬‭#fff;text-decoration:‬‭none;transition:‬‭color‬‭0.3s‬‭ease-in-out;">Faculty‬‭of‬
‭Computer Science and Engineering</a></li>‬
‭<li‬ ‭style="margin:‬ ‭10px‬ ‭0;"><a‬ ‭href="https://ece.mait.ac.in/index.php/people/faculty/faculty-‬
‭profiles"target="#"‬ ‭style="color:‬ ‭#fff;‬ ‭text-decoration:‬ ‭none;‬ ‭transition:‬ ‭color‬ ‭0.3s‬
‭ease-in-out;">Faculty of Electronics and Communication Engineering</a></li>‬
‭<li‬ ‭style="margin:‬ ‭10px‬ ‭0;"><a‬ ‭href="https://it.mait.ac.in/index.php/people1/faculty-profile"‬
‭target="#"‬ ‭style="color:‬ ‭#fff;‬ ‭text-decoration:‬ ‭none;‬ ‭transition:‬ ‭color‬‭0.3s‬‭ease-in-out;">Faculty‬
‭of Information Technology</a></li>‬
‭<li‬‭style="margin:10px0;"><a‬‭href="https://eee.mait.ac.in/index.php/people/faculty/professional-‬
‭membership"‬ ‭target="#"‬ ‭style="color:‬ ‭#fff;‬ ‭text-decoration:‬ ‭none;‬ ‭transition:‬ ‭color‬ ‭0.3s‬
‭ease-in-out;">Faculty of Electrical and Electronics Engineering</a></li>‬
‭<li‬‭style="margin:‬‭10px‬‭0;"><a‬‭href="https://me.mait.ac.in/index.php/people/faculty"‬‭target="#"‬
‭style="color:‬ ‭#fff;‬ ‭text-decoration:‬ ‭none;‬ ‭transition:‬ ‭color‬ ‭0.3s‬ ‭ease-in-out;">Faculty‬ ‭of‬
‭Mechanical Engineering</a>‬
‭</li>‬
‭<li‬ ‭style="margin:‬ ‭10px‬ ‭0;"><a‬ ‭href="https://mba.mait.ac.in/index.php/people/faculty"‬
‭target="#"‬ ‭style="color:‬ ‭#fff;‬ ‭text-decoration:‬ ‭none;‬ ‭transition:‬ ‭color‬‭0.3s‬‭ease-in-out;">Faculty‬
‭of Management Studies</a></li>‬
‭<li><a href="https://apsc.mait.ac.in/index.php/people/faculty" target="#" style="color: #fff;‬
‭text-decoration:‬ ‭none;‬ ‭transition:‬ ‭color‬ ‭0.3s‬ ‭ease-in-out;">Faculty‬ ‭of‬ ‭Basic‬ ‭Science‬ ‭and‬
‭Humanities</a></li>‬
‭</ul>‬
‭<h2>Library</h2>‬
‭<p>MAIT‬‭has‬‭a‬‭well-stocked‬‭library‬‭with‬‭over‬‭40,000‬‭books,‬‭national‬‭and‬‭international‬‭journals,‬
‭and periodicals. The‬
‭library also provides online access to e-books, e-journals, and other digital resources.</p>‬
‭</body>‬
‭</html>‬
‭PROGRAM-5‬

‭ IM:‬‭Create‬‭HTML‬‭Page‬‭with‬‭JavaScript‬‭which‬‭takes‬‭Integer‬‭number‬‭as‬‭input‬‭and‬‭tells‬‭whether‬
A
‭the number is ODD or EVEN‬

‭CODE‬

‭ !DOCTYPE html>‬
<
‭<html lang="en">‬

‭<head>‬
‭<meta charset="UTF-8">‬
‭<meta name="viewport" content="width=device-width, initial-scale=1.0">‬
‭<title>Odd or Even Checker</title>‬
‭<style>‬
‭body {‬
‭font-family: Arial, sans-serif;‬
‭text-align: center;‬
‭display: flex;‬
‭justify-content: center;‬
‭align-items: center;‬
‭margin-top: auto;‬
‭margin-bottom: auto;‬
‭align-items: center;‬
‭margin: 50px;‬
‭color: white;‬
‭font-family: Arial, Helvetica, sans-serif;‬
‭}‬
‭.container{‬
‭margin-top: auto;‬
‭margin-bottom: auto;‬
‭background-color: rgb(153, 43, 226);‬
‭padding: 3rem;‬
‭border-radius: 2rem;‬
‭}‬
‭input{‬
‭border-radius: 1rem;‬
‭box-shadow: none;‬

‭}‬
‭button{‬
‭border-radius: 1rem;‬
‭}‬
‭</style>‬
‭ /head>‬
<

‭<body>‬
‭<div class="container"> <h1>Odd or Even Checker</h1>‬
‭<label for="numberInput">Enter an Integer:</label>‬
‭<input type="number" id="numberInput" placeholder="Enter a number"> <button‬
‭onclick="checkOddOrEven()">Check</button>‬
‭<p id="result"></p>‬
‭</div>‬
‭<script>‬
‭function checkOddOrEven() {‬
‭var userInput = document.getElementById("numberInput").value; if (isNaN(userInput)) {‬
‭document.getElementById("result").innerHTML = "Please enter a valid number.";‬
‭return;‬
‭}‬
‭var number = parseInt(userInput);‬
‭if (number % 2 === 0) {‬
‭document.getElementById("result").innerHTML = number + " is an even number.";‬
‭} else {‬
‭document.getElementById("result").innerHTML = number + " is an odd number.";‬
‭}‬
‭}‬
‭</script>‬
‭</body>‬

‭</html>‬
‭PROGRAM-6‬

‭ IM:‬ ‭Create‬ ‭HTML‬ ‭Page‬ ‭that‬ ‭contains‬ ‭form‬ ‭with‬ ‭fields‬ ‭Name,‬ ‭Email,‬ ‭Mobile.No,‬ ‭Gender,‬
A
‭Favourite‬ ‭Colour‬ ‭and‬ ‭a‬ ‭button‬ ‭now‬ ‭write‬ ‭a‬ ‭JavaScript‬ ‭code‬ ‭to‬ ‭combine‬ ‭and‬ ‭display‬ ‭the‬
‭information in textbox when the button is clicked and implement validation.‬

‭CODE‬

‭<html>‬

‭<head>‬

‭<script>‬
‭window.onload = function () {‬
‭document.getElementById('submitButton').addEventListener('click', function (event) {‬
‭event.preventDefault(); // Prevent the form from submitting‬

/‭/ Get form values‬


‭var name = document.getElementById('name').value;‬
‭var email = document.getElementById('email').value;‬
‭var mobile = document.getElementById('mobile').value;‬
‭var gender = document.getElementById('gender').value;‬

/‭/ Validation‬
‭if (!name || !email || !mobile || !gender) {‬
‭alert("Please fill in all fields.");‬
‭return;‬
‭}‬

‭// Combine and display information‬


‭var‬‭info‬‭=‬‭"Name:‬‭"‬‭+‬‭name‬‭+‬‭"\nEmail:‬‭"‬‭+‬‭email‬‭+‬‭"\nMobile‬‭No:‬‭"‬‭+‬‭mobile‬‭+‬
‭"\nGender: " + gender;‬
‭document.getElementById('display').value = info;‬
‭});‬
‭};‬
‭</script>‬
‭</head>‬

‭<body>‬
‭<style>‬
‭body {‬
‭display: flex;‬
‭justify-content: center;‬
‭align-items: center;‬
‭color: white;‬
‭font-family: Arial, Helvetica, sans-serif;‬
‭}‬

‭.container {‬
‭display: flex;‬
‭justify-content: center;‬
‭align-items: center;‬
‭background-color: rgb(98, 43, 226);‬
‭padding: 3rem;‬
‭/* border-radius: 3rem; */‬
‭}‬
‭button{‬
‭padding-left:1rem;‬
‭padding-right: 1rem;‬
‭padding-top: 0.5rem;‬
‭padding-bottom: 0.5rem;‬
‭border-radius: 2rem;‬
‭border: white solid 1px;‬
‭background-color: white;‬
‭font-family: Arial, Helvetica, sans-serif;‬
‭font-size: 1.1rem;‬
‭margin-left: 2.5rem;‬

‭}‬

‭input {‬
‭border-radius: 1rem;‬
‭border: 1px black solid;‬
‭margin-bottom: 1rem;‬
‭margin-top: 0.5rem;‬
‭height: 2rem;‬
‭}‬
‭label {‬
‭font-size: 1.1rem;‬
‭/* margin-bottom: 2rem; */‬
‭margin-top: -2rem‬
‭}‬

‭select {‬
‭margin-top: 0.5rem;‬
‭border-radius: 1rem;‬
‭justify-content: center;‬
‭width: auto;‬
‭padding-left: 3.5rem;‬
‭font-size: 1.1rem;‬
‭margin-bottom: 2rem;‬
‭padding-right: 3rem;‬
‭}‬
‭textarea{‬
‭height: 350px;‬
‭margin-left: 1rem;‬
‭border-radius: 2rem;‬
‭padding: 1rem;‬
‭}‬
‭ /style>‬
<

‭<div class="container">‬
‭<form id="myForm">‬
‭<label for="name">Name:</label><br>‬
‭<input type="text" id="name" name="name" required><br>‬
‭<label for="email">Email:</label><br>‬
‭<input type="email" id="email" name="email" required><br>‬
‭<label for="mobile">Mobile No:</label><br>‬
‭<input type="tel" id="mobile" name="mobile" required><br>‬
‭<label for="gender">Gender:</label><br>‬
‭<select id="gender" name="gender" required>‬
‭<option value="">Select</option>‬
‭<option value="male">Male</option>‬
‭<option value="female">Female</option>‬
‭</select><br>‬
‭ button id="submitButton" type="submit">Submit</button>‬
<
‭</form>‬
‭<br>‬
‭<textarea id="display" rows="4" cols="50" readonly></textarea>‬
‭</div>‬
‭ /body>‬
<

‭</html>‬
‭PROGRAM-7‬

‭ IM:‬ ‭Create‬ ‭XML‬ ‭file‬ ‭to‬ ‭store‬ ‭student‬ ‭information‬ ‭like‬ ‭Enrolment‬ ‭Number,‬ ‭Name‬ ‭Mobile‬
A
‭Number , Email Id.‬

‭CODE‬

‭ !DOCTYPE html>‬
<
‭<html lang="en">‬
‭<head>‬
‭<style>‬
‭* {‬
‭font-size: 25px;‬
‭}‬
‭student {‬
‭display: flex;‬
‭flex-direction: column;‬
‭margin-bottom: 10px;‬
‭margin-left: 10px;‬
‭}‬
‭</style>‬
‭<students>‬
‭<student>‬
‭<enrollmentNumber>00114807722</enrollmentNumber>‬
‭<name>Hardik Rai</name>‬
‭<mobileNumber>99997 62706</mobileNumber>‬
‭<emailId>[email protected]</emailId>‬
‭</student>‬
‭<student>‬
‭<enrollmentNumber>00714807722</enrollmentNumber>‬
‭<name>Hardik Rai</name>‬
‭<mobileNumber>9654870165</mobileNumber>‬
‭<emailId>[email protected]</emailId>‬
‭</student>‬
‭</students>‬
‭<title>Document</title>‬
‭</head>‬
‭</html>‬
‭PROGRAM-8‬

‭ IM:‬ ‭Write‬‭a‬‭php‬‭script‬‭to‬‭read‬‭data‬‭from‬‭txt‬‭file‬‭and‬‭display‬‭it‬‭in‬‭html‬‭table‬‭(the‬‭file‬‭contains‬
A
‭info in format Name: Password: Email ).‬

‭CODE‬

‭ !DOCTYPE html>‬
<
‭<html lang="en">‬
‭<head>‬
‭<title>User Information</title>‬
‭<style>‬
‭table {‬
‭border-collapse: collapse;‬
‭width: 100%;}‬
‭th, td {‬
‭border: 1px solid #ddd;‬
‭padding: 8px;‬
‭text-align: left;}‬
‭th {‬
‭background-color: #f2f2f2;}‬
‭</style>‬
‭</head>‬
‭<body>‬
‭<h2>User Information</h2>‬
‭<?php‬
‭$filename = 'Dipendra.txt';‬
‭$demoText = "Name: Dipendra\nPassword: qwerty\nEmail: [email protected]";‬
‭file_put_contents($filename, $demoText);‬
‭$lines = file($filename, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);‬
‭if (!empty($lines)) {‬
‭echo '<table>';‬
‭echo '<tr><th>Name</th><th>Email</th><th>Password</th></tr>';‬
‭$name = $email = $password = '';‬
‭foreach ($lines as $line) {‬
‭$userInfo = explode(':', $line);‬
‭switch (trim($userInfo[0])) {‬
‭case 'Name':‬
‭$name = trim($userInfo[1]);‬
‭break;‬
c‭ ase 'Email':‬
‭$email = trim($userInfo[1]);‬
‭break;‬
‭case 'Password':‬
‭$password = trim($userInfo[1]);‬
‭break;}‬
‭if ($name && $email && $password) {‬
‭echo '<tr>';‬
‭echo '<td>' . $name . '</td>';‬
‭echo '<td>' . $email . '</td>';‬
‭echo '<td>' . $password . '</td>';‬
‭echo '</tr>';‬
‭$name = $email = $password = '';}}‬
‭echo '</table>';‬
‭} else {‬
‭echo '<p>No user data found in the file.</p>';}‬
‭?>‬
‭</body>‬
‭</html>‬
‭PROGRAM-9‬

‭ IM:‬ ‭Write‬ ‭a‬ ‭PHP‬ ‭Script‬ ‭for‬‭login‬‭authentication.‬‭Design‬‭an‬‭html‬‭form‬‭which‬‭takes‬‭username‬


A
‭and password fromuser and validate against stored username and password in file.‬

‭CODE‬

‭ !DOCTYPE html>‬
<
‭<html>‬
‭<body>‬
‭<h2>Login Form</h2>‬
‭<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">‬
‭Username:<br>‬
‭<input type="text" name="username"><br>‬
‭Password:<br>‬
‭<input type="password" name="password"><br><br>‬
‭<input type="submit" value="Submit"><br><br>‬
‭</form>‬
‭<?php‬
‭if ($_SERVER["REQUEST_METHOD"] == "POST") {‬
‭$username = $_POST["username"];‬
‭$password = $_POST["password"];‬
‭$file = fopen("credentials.txt", "r");‬
‭$correctCredentials = false;‬
‭while(!feof($file)) {‬
‭$line = fgets($file);‬
‭list($fileUsername, $filePassword) = explode(",", $line);‬
‭if(trim($fileUsername) == $username && trim($filePassword) == $password) {‬
‭$correctCredentials = true;‬
‭break;‬
‭}‬
‭}‬
‭fclose($file);‬
‭if($correctCredentials) {‬
‭echo "Login successful!";‬
‭} else {‬
‭echo "Invalid username or password!";‬
‭}‬
‭}‬
?‭ >‬
‭</body>‬
‭</html>‬
‭PROGRAM-10‬

‭ IM:‬‭Write PHP Script for storing and retrieving user‬‭information from MySql table.‬
A
‭a.‬ ‭Design‬ ‭A‬ ‭HTML‬ ‭page‬ ‭which‬ ‭takes‬ ‭Name,‬ ‭Address,‬ ‭Email‬ ‭and‬ ‭Mobile‬ ‭No.‬ ‭From‬ ‭user‬
‭(register.php)‬
‭b. Store this data in Mysql database / text file.‬
‭c. Next page display all user in html table using PHP (display.php)‬

‭CODE‬

‭ !-- register.php -->‬


<
‭<!DOCTYPE html>‬
‭<html lang="en">‬
‭<head>‬
‭<title>User Registration</title>‬
‭</head>‬
‭<body>‬
‭<h2>User Registration</h2>‬
‭<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">‬
‭<label>Name:</label>‬
‭<input type="text" name="name" required><br><br>‬
‭<label>Address:</label>‬
‭<input type="text" name="address" required><br><br>‬
‭<label>Email:</label>‬
‭<input type="email" name="email" required><br><br>‬
‭<label>Mobile No.:</label>‬
‭<input type="text" name="mobile" required><br><br>‬
‭<input type="submit" value="Register"><br>‬
‭</form>‬
‭<?php‬
‭if ($_SERVER["REQUEST_METHOD"] == "POST") {‬
‭$conn = new mysqli('localhost','root' ,'' ,'test');‬
‭if ($conn->connect_error) {‬
‭die('Connection failed: ' . $conn->connect_error);‬
‭}‬
‭$name = $_POST['name'];‬
‭$address = $_POST['address'];‬
‭$email = $_POST['email'];‬
‭$mobile = $_POST['mobile'];‬
$‭ sql = "INSERT INTO users (name, address, email, mobile) VALUES ('$name',‬
‭'$address', '$email', '$mobile')";‬
‭if ($conn->query($sql) === TRUE) {‬
‭echo 'User registered successfully';‬
‭} else {‬
‭echo 'Error: ' . $sql . '<br>' . $conn->error;‬
‭}‬
‭$conn->close();‬
‭}‬
‭?>‬
‭</body>‬
‭</html>‬
‭Display.php :‬
‭<?php‬
‭$conn = new mysqli('localhost‬
‭if ($conn->connect_error) {‬
‭die('Connection failed: '‬
‭}‬
‭$result = $conn->query('SELECT‬
‭echo '<table border="1">‬
‭<tr>‬
‭<th>Name</th>‬
‭<th>Address</th>‬
‭<th>Email</th>‬
‭<th>Mobile No</th>‬
‭</tr>';‬
‭while ($row = $result->fetch_assoc‬
‭echo '<tr>‬
‭<td>' . $row['name'] . '</td>‬
‭<td>' . $row['address'] . '</td>‬
‭<td>' . $row['email'] . '</td>‬
‭<td>' . $row['mobile'] . '</td>‬
‭</tr>';‬
‭}‬
‭echo '</table>';‬
‭$conn->close();‬
‭?>‬

You might also like