Scribd
Upload
15 views30 pages

HTML Basics and Practical Examples

Html practical note

Uploaded by

crixznews14
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
15 views30 pages

HTML Basics and Practical Examples

Html practical note

Uploaded by

crixznews14
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

1. Acquaintance with elements, tags and basic structure of HTML files.

<!DOCTYPE html>
<html>
<head>
<title>HTML Basics Practical</title>
</head>
<body>

<h1>Welcome to My First HTML Page</h1>

<p>This webpage is created for the HTML practical to understand elements and
tags.</p>

<h2>About HTML</h2>
<p>HTML stands for HyperText Markup Language. It is used to create web pages.</p>

<h2>Example of Elements</h2>
<ul>
<li>Heading Element (h1, h2,...)</li>
<li>Paragraph Element (p)</li>
<li>List Element (ul, ol, li)</li>
<li>Image Element (img)</li>
</ul>

<h2>Example Image</h2>
<img src="[Link] alt="Sample Image">

<h2>Example Link</h2>
<a href="[Link] here to visit Google</a>

<hr>

<p>End of Practical.</p>

</body>
</html>
2. Practicing basic and advanced text for formatting.
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Practical</title>
</head>
<body>

<h1>HTML Text Formatting</h1>

<h2>Basic Formatting</h2>
<p>

1|Pa ge
<b>Bold Text</b><br>
<i>Italic Text</i><br>
<u>Underlined Text</u><br>
<strong>Strong (Important) Text</strong><br>
<em>Emphasized Text</em><br>
<small>Small Text Example</small><br>
Here is <mark>Highlighted</mark> text.<br>
Chemical Formula: H<sub>2</sub>O <br>
Math Expression: x<sup>2</sup> + y<sup>2</sup>
</p>

<h2>Advanced Formatting</h2>
<p>
<blockquote>
This is a long quotation written using the blockquote tag.
It is automatically indented by the browser.
</blockquote>

Short Quote using &lt;q&gt;: <q>HTML makes web designing easy.</q><br><br>

Abbreviation Example: <abbr title="HyperText Markup


Language">HTML</abbr><br><br>

Citing a Work: <cite>The Discovery of India</cite> by Jawaharlal Nehru.<br><br>

<h3>Code Example:</h3>
<code>[Link]("Hello World");</code><br><br>

<h3>Preformatted Text:</h3>
<pre>
This text preserves
spaces and
indentation exactly
as typed.
</pre>

<h3>Span and Div Example</h3>


<div style="color:blue; font-size:18px;">This is a div block with blue text.</div>
<span style="color:red;">This is inline red text using span.</span>

<h3>BDO Example</h3>
Normal: Hello<br>
Reverse Text: <bdo dir="rtl">Hello</bdo>
</p>

</body>
</html>

2|Pa ge
3. Practice use of image, video and sound in HTML documents.
<!DOCTYPE html>
<html>
<head>
<title>Multimedia Practice</title>
</head>
<body>

<h1>Multimedia Demo</h1>

<h2>1. Image</h2>
<img src="[Link]" width="300" alt="Beautiful Flower">

<h2>2. Video</h2>
<video src="nature.mp4" width="400" controls></video>

<h2>3. Audio</h2>
<audio src="music.mp3" controls></audio>

</body>
</html>
4. Designing of web pages- Document layout, list, tables.
<!DOCTYPE html>
<html>
<head>
<title>Web Page Design Example</title>
</head>
<body>

<header>
<h1>ABC College</h1>
</header>

<nav>
<a href="#">Home</a> |
<a href="#">Departments</a> |
<a href="#">Admissions</a>
</nav>

<section>
<h2>Departments</h2>
<ul>
<li>Computer Science</li>
<li>Mechanical</li>
<li>Civil Engineering</li>
</ul>
</section>

3|Pa ge
<section>
<h2>Student Result Table</h2>
<table border="1" cellpadding="8">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Aryan</td>
<td>Math</td>
<td>88</td>
</tr>
<tr>
<td>Riya</td>
<td>Science</td>
<td>92</td>
</tr>
</table>
</section>

<footer>
<p>&copy; 2025 ABC College</p>
</footer>

</body>
</html>
5. Practicing Hyperlink of web pages, working with frames.

File 1: [Link] (Main Page with Hyperlinks)

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Practice</title>
<style>
body {
font-family: Arial;
background: #f2f2f2;
}
.nav {
background: #333;
padding: 10px;
}
.nav a {
color: white;
margin-right: 15px;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: yellow;
}

4|Pa ge
</style>
</head>
<body>

<h1>Welcome to My Webpage</h1>

<!-- Navigation Menu -->


<div class="nav">
<a href="[Link]">Home</a>
<a href="[Link]" target="myframe">About</a>
<a href="[Link]" target="myframe">Contact Us</a>
<a href="[Link] target="_blank">Google
(External Link)</a>
</div>

<h2>Types of Hyperlinks</h2>

<ul>
<li><a href="#section1">Jump to Section 1 (Internal
Link)</a></li>
<li><a href="[Link]">Go to About Page</a></li>
<li><a href="[Link]">Open Contact Page</a></li>
<li><a href="[Link] Email</a></li>
<li><a href="[Link] Us</a></li>
<li><a href="[Link] target="_blank">Visit
Wikipedia</a></li>
<li><a href="[Link]">
<img src="[Link]" width="150" height="100" alt="Click
Me">
</a> (Image Hyperlink)</li>
</ul>

<h2 id="section1">Section 1: Internal Link Section</h2>


<p>This is the section reached through internal hyperlink.</p>

</body>
</html>

File 2: [Link]

<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
</head>
<body style="font-family: Arial;">
<h1>About Our Website</h1>
<p>This is the about page. Here we describe information about
us.</p>

<a href="[Link]">Back to Home</a>


</body>
</html>

File 3: [Link]

<!DOCTYPE html>
<html>

5|Pa ge
<head>
<title>Contact Page</title>
</head>
<body style="font-family: Arial;">

<h1>Contact Information</h1>

<p>Email: <a href="[Link]

<p>Phone: <a href="[Link] 99999 99999</a></p>

<a href="[Link]">Back to Home</a>

</body>
</html>
FRAMES EXAMPLE (HTML Frameset)

File 4: [Link]
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>

<frameset rows="20%,*">

<!-- Top navigation frame -->


<frame src="[Link]" name="topFrame">

<!-- Split screen: left menu + content frame -->


<frameset cols="30%,*">
<frame src="[Link]" name="menuFrame">
<frame src="[Link]" name="myframe">
</frameset>

</frameset>

</html>

File 5: [Link]

<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
</head>
<body style="font-family: Arial;">

<h2>Navigation Menu</h2>

<ul>
<li><a href="[Link]" target="myframe">About</a></li>
<li><a href="[Link]" target="myframe">Contact</a></li>
<li><a href="[Link]" target="myframe">Home</a></li>
<li><a href="[Link]
target="myframe">Google</a></li>
</ul>

</body>
</html>

6|Pa ge
6. Working with forms and controls.
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>

<style>
body {
font-family: Arial;
background: #f0f0f0;
}
form {
background: white;
padding: 25px;
width: 500px;
margin: 20px auto;
border-radius: 8px;
box-shadow: 0 0 10px #aaa;
}
label {
font-weight: bold;
}
input, select, textarea {
width: 95%;
padding: 8px;
margin: 6px 0 15px 0;
border-radius: 5px;
border: 1px solid #aaa;
}
.submit-btn {
width: 150px;
background: #4CAF50;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
}
.reset-btn {
width: 150px;
background: red;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
}
.controls {

7|Pa ge
width: 50%;
}
</style>
</head>

<body>

<h1 style="text-align:center;">HTML Form With All Controls</h1>

<form action="[Link]" method="post">

<fieldset>
<legend><b>Personal Information</b></legend>

<label>Full Name:</label>
<input type="text" name="fullname" required>

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

<label>Password:</label>
<input type="password" name="password" required>

<label>Age:</label>
<input type="number" name="age" min="1" max="100">
</fieldset>

<fieldset>
<legend><b>Gender</b></legend>
<input type="radio" name="gender" value="Male"> Male
<br>
<input type="radio" name="gender" value="Female"> Female
<br>
<input type="radio" name="gender" value="Other"> Other
</fieldset>

<fieldset>
<legend><b>Hobbies</b></legend>
<input type="checkbox" name="hobby" value="Reading"> Reading <br>
<input type="checkbox" name="hobby" value="Sports"> Sports <br>
<input type="checkbox" name="hobby" value="Music"> Music <br>
<input type="checkbox" name="hobby" value="Travel"> Travel
</fieldset>

<label>Select Country:</label>

8|Pa ge
<select name="country">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="Australia">Australia</option>
</select>

<label>Date of Birth:</label>
<input type="date" name="dob">

<label>Upload Your File:</label>


<input type="file" name="file">

<label>Select Color:</label>
<input type="color" name="favcolor">

<label>Experience (1 to 10):</label>
<input type="range" name="experience" min="1" max="10">

<label>Address:</label>
<textarea name="address" rows="4"></textarea>

<center>
<input type="submit" value="Submit Form" class="submit-btn">
<input type="reset" value="Reset" class="reset-btn">
</center>

</form>

</body>
</html>
7. Acquaintance with creating style sheet, CSS properties and styling.
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>

<!-- Internal CSS -->


<style>
body {
background-color: #f2f2f2;
font-family: Arial;
}

9|Pa ge
h1 {
color: darkblue;
text-align: center;
font-size: 40px;
}

.box {
background-color: white;
width: 400px;
padding: 20px;
margin: 30px auto;
border: 3px solid black;
border-radius: 10px;
box-shadow: 0 0 10px gray;
}

p{
font-size: 18px;
color: #333;
text-align: justify;
}

.highlight {
color: red;
font-weight: bold;
text-decoration: underline;
}

.btn {
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
text-align: center;
display: inline-block;
width: 150px;
}

.btn:hover {
background-color: darkblue;
cursor: pointer;
}
</style>
</head>

<body>

10 | P a g e
<h1>CSS Styling Example</h1>

<div class="box">
<p>This is an example of a <span class="highlight">CSS styled</span> web page.</p>
<p>We used background colors, padding, borders, margin, box-shadow, and font
styling.</p>

<div class="btn">Click Me</div>


</div>

</body>
</html>
8. Working with background, text, font, list properties.

<!DOCTYPE html>

<html>

<head>

<title>CSS Properties Example</title>

<style>

/* --- Background Properties --- */

body {

background-color: #e8e8e8;

background-image: url('[Link]

background-repeat: no-repeat;

background-position: right top;

background-attachment: fixed;

font-family: Arial;

/* --- Text Properties --- */

h1 {

color: darkblue;

text-align: center;

text-decoration: underline;

text-transform: uppercase;

11 | P a g e
}

p{

color: #333;

text-align: justify;

line-height: 1.5;

text-indent: 40px;

/* --- Font Properties --- */

.font-section {

font-size: 20px;

font-weight: bold;

font-style: italic;

font-family: "Georgia", serif;

color: #800000;

background-color: #fff5e6;

padding: 10px;

border-left: 5px solid orange;

/* --- List Properties --- */

.custom-list {

background-color: white;

width: 300px;

padding: 15px;

border-radius: 10px;

list-style-type: square; /* square, circle, disc */

.custom-list2 {

12 | P a g e
list-style-type: none; /* remove bullets */

padding: 0;

.custom-list2 li {

background-color: #d1e7fc;

padding: 8px;

margin-bottom: 5px;

border-radius: 5px;

list-style-image: url('[Link] /* add image bullet */

.container {

width: 80%;

background-color: white;

padding: 20px;

margin: 20px auto;

border-radius: 15px;

box-shadow: 0 0 10px #aaa;

</style>

</head>

<body>

<div class="container">

<h1>CSS Working with Properties</h1>

<p>

This paragraph shows the use of text properties like color, line spacing,

13 | P a g e
text alignment, and indentation. You can see how the text is neatly styled

using CSS.

</p>

<h2>Font Properties Section</h2>

<div class="font-section">

This area demonstrates different font properties like font-size,

font-weight, font-style, font-family, and color.

</div>

<h2>List Properties Example</h2>

<h3>1. Normal List with Square Bullets</h3>

<ul class="custom-list">

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

<h3>2. List with Images as Bullets</h3>

<ul class="custom-list2">

<li>Web Design</li>

<li>Web Development</li>

<li>Database</li>

</ul>

</div>

</body>

</html>

9. Working with HTML elements box properties in CSS.


<!DOCTYPE html>
<html>
<head>

14 | P a g e
<title>CSS Box Properties Example</title>

<style>

body {
font-family: Arial;
background-color: #f0f0f0;
}

/* MAIN BOX */
.box {
width: 400px; /* box width */
height: auto; /* height adjusts automatically */
background-color: white;
padding: 20px; /* inner spacing */
margin: 30px auto; /* center the box */
border: 5px solid black; /* border thickness, style, color */
border-radius: 15px; /* rounded corners */
box-shadow: 0 0 15px gray; /* outer shadow */
overflow: auto; /* show scroll if content overflows */
}

/* SECOND BOX */
.small-box {
width: 250px;
height: 150px;
padding: 10px;
margin: 20px auto;
background-color: #ffe7d1;
border: 3px dashed brown;
border-radius: 20px;
outline: 4px solid blue; /* outline outside border */
outline-offset: 5px; /* spacing between border & outline */
}

/* INLINE ELEMENT MADE INTO BLOCK */


.inline-block-demo {
display: inline-block; /* makes inline behave like block */
background-color: #d1ecff;
padding: 15px;
margin: 10px;
border: 2px solid #0080ff;
width: 150px;
text-align: center;
border-radius: 10px;
}

</style>

15 | P a g e
</head>

<body>

<h1 style="text-align:center;">CSS Box Properties Example</h1>

<div class="box">
<h2>Main Box Model</h2>
<p>
This box demonstrates the essential CSS box model features:
margin, padding, border, width, height, border-radius, and box-shadow.
</p>
<p>
The box is centered using <b>margin: auto</b> and has a white background
with a shadow effect to give a card-like appearance.
</p>
</div>

<div class="small-box">
<h3>Second Styled Box</h3>
<p>This box shows dashed borders, outlines, and rounded corners.</p>
</div>

<h2 style="text-align:center;">Inline-Block Elements</h2>

<div class="inline-block-demo">Box 1</div>


<div class="inline-block-demo">Box 2</div>
<div class="inline-block-demo">Box 3</div>

</body>
</html>
10. Develop simple calculator for addition, subtraction, multiplication and division operation
using java script.
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>

<style>
body {
font-family: Arial;
background-color: #f0f0f0;
}

.calculator {
width: 300px;
margin: 50px auto;
background: white;

16 | P a g e
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px gray;
}

input, button {
width: 90%;
padding: 10px;
margin: 8px 0;
font-size: 18px;
}

button {
background: blue;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}

button:hover {
background: darkblue;
}

.result {
font-size: 22px;
font-weight: bold;
margin-top: 15px;
text-align: center;
}
</style>
</head>

<body>

<div class="calculator">
<h2 style="text-align:center;">Simple Calculator</h2>

<input type="number" id="num1" placeholder="Enter First Number">


<input type="number" id="num2" placeholder="Enter Second Number">

<button onclick="add()">Addition (+)</button>


<button onclick="sub()">Subtraction (-)</button>
<button onclick="mul()">Multiplication (×)</button>
<button onclick="div()">Division (÷)</button>

<div class="result" id="result"></div>


</div>

17 | P a g e
<script>

function add() {
var n1 = parseFloat([Link]("num1").value);
var n2 = parseFloat([Link]("num2").value);
[Link]("result").innerHTML = "Result: " + (n1 + n2);
}

function sub() {
var n1 = parseFloat([Link]("num1").value);
var n2 = parseFloat([Link]("num2").value);
[Link]("result").innerHTML = "Result: " + (n1 - n2);
}

function mul() {
var n1 = parseFloat([Link]("num1").value);
var n2 = parseFloat([Link]("num2").value);
[Link]("result").innerHTML = "Result: " + (n1 * n2);
}

function div() {
var n1 = parseFloat([Link]("num1").value);
var n2 = parseFloat([Link]("num2").value);

if (n2 === 0) {
[Link]("result").innerHTML = "Error: Cannot divide by zero!";
} else {
[Link]("result").innerHTML = "Result: " + (n1 / n2);
}
}

</script>

</body>
</html>
11. Create HTML page with java script which takes integer number as a input and tells
whether the number is odd or even.
<!DOCTYPE html>
<html>
<head>
<title>Odd or Even Checker</title>
<script>
function checkNumber() {
// Get the value from input box
let num = [Link]("number").value;

// Convert to integer

18 | P a g e
num = parseInt(num);

// Check if number is valid


if (isNaN(num)) {
alert("Please enter a valid number!");
return;
}

// Check odd or even


if (num % 2 == 0) {
[Link]("result").innerHTML = num + " is EVEN";
} else {
[Link]("result").innerHTML = num + " is ODD";
}
}
</script>
</head>

<body>
<h2>Odd or Even Checker</h2>

<label>Enter a Number:</label>
<input type="text" id="number">
<button onclick="checkNumber()">Check</button>

<h3 id="result"></h3>
</body>
</html>
12. Create HTML page that contains form with fields name, Email, mobile number, gender,
favorite colour and button; now write a java script code to validate each entry. Also write
a code to combine and display the information in text box when button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation and Display</title>

<script>
function validateForm() {
// Getting values
let name = [Link]("name").[Link]();
let email = [Link]("email").[Link]();
let mobile = [Link]("mobile").[Link]();

let gender = [Link]('input[name="gender"]:checked');


let color = [Link]("color").value;

// Name validation
if (name == "") {

19 | P a g e
alert("Please enter your name");
return false;
}

// Email validation using regex


let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (![Link](emailPattern)) {
alert("Please enter a valid Email");
return false;
}

// Mobile validation (10-digit number)


let mobilePattern = /^[0-9]{10}$/;
if (![Link](mobilePattern)) {
alert("Mobile number must be 10 digits");
return false;
}

// Gender validation
if (gender === null) {
alert("Please select your gender");
return false;
}

// Color validation
if (color == "") {
alert("Please select your favorite color");
return false;
}

// If all fields are valid, combine information


let resultText =
"Name: " + name + "\n" +
"Email: " + email + "\n" +
"Mobile: " + mobile + "\n" +
"Gender: " + [Link] + "\n" +
"Favorite Color: " + color;

[Link]("result").value = resultText;

return true;
}
</script>
</head>

<body>
<h2>Form Validation Example</h2>

20 | P a g e
<form>
<label>Name:</label><br>
<input type="text" id="name"><br><br>

<label>Email:</label><br>
<input type="text" id="email"><br><br>

<label>Mobile Number:</label><br>
<input type="text" id="mobile"><br><br>

<label>Gender:</label><br>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female<br><br>

<label>Favorite Colour:</label><br>
<input type="color" id="color"><br><br>

<button type="button" onclick="validateForm()">Submit</button>


</form>

<h3>Combined Information:</h3>
<textarea id="result" rows="7" cols="40"></textarea>

</body>
</html>
13. Write a PHP program to check if number is prime or not.
<?php
// Function to check prime
function isPrime($num) {
// 0, 1 and negative numbers are not prime
if ($num <= 1) {
return false;
}

// Check divisibility from 2 to sqrt(num)


for ($i = 2; $i <= sqrt($num); $i++) {
if ($num % $i == 0) {
return false; // Not prime
}
}
return true; // Prime
}

// Input number
$number = 29;

if (isPrime($number)) {
echo "$number is a Prime Number";

21 | P a g e
} else {
echo "$number is NOT a Prime Number";
}
?>
14. Write a PHP program to print first ten Fibonacci numbers.
<?php

// Initialize first two Fibonacci numbers


$a = 0;
$b = 1;

echo "First 10 Fibonacci Numbers:<br>";

// Print first two numbers


echo $a . " " . $b . " ";

// Loop for next 8 numbers


for ($i = 3; $i <= 10; $i++) {
$c = $a + $b; // Next number = sum of previous two
echo $c . " ";

// Update values for next iteration


$a = $b;
$b = $c;

?>
15. Create a MySQL data base and connect with PHP.

Step 1: Create MySQL Database


Open phpMyAdmin or MySQL terminal and run:

CREATE DATABASE studentDB;

Step 2: Create a Table


Select database studentDB and run:

CREATE TABLE students (


id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50),
email VARCHAR(100)
);

22 | P a g e
Step 3: Create a PHP File to Connect with MySQL

Create a file named [Link]

<?php
$host = "localhost"; // MySQL server
$user = "root"; // MySQL username
$pass = ""; // MySQL password (blank in XAMPP/WAMP)
$db = "studentDB"; // Database name

// Create connection
$conn = new mysqli($host, $user, $pass, $db);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

echo "Connection Successful!";


?>

16. V

Step 1: Create Database and Table in MySQL


Run this SQL in phpMyAdmin:

CREATE DATABASE userDB;

USE userDB;

CREATE TABLE users (


id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
address VARCHAR(200),
email VARCHAR(100),
mobile VARCHAR(15)
);

Step 2: [Link] (HTML Form + PHP Insert Program)

This file takes Name, Address, Email, Mobile number and stores them into MySQL.

<!DOCTYPE html>
<html>
<head>
<title>User Registration</title>
</head>
<body>

<h2>Register User</h2>

23 | P a g e
<form action="[Link]" method="POST">
Name: <input type="text" name="name" required><br><br>
Address: <input type="text" name="address" required><br><br>
Email: <input type="email" name="email" required><br><br>
Mobile: <input type="text" name="mobile" required><br><br>

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


</form>

<?php
if (isset($_POST["submit"])) {

// Step 1: Connect to database


$conn = new mysqli("localhost", "root", "", "userDB");

if ($conn->connect_error) {
die("Connection Failed: " . $conn->connect_error);
}

// Step 2: get form inputs


$name = $_POST["name"];
$address = $_POST["address"];
$email = $_POST["email"];
$mobile = $_POST["mobile"];

// Step 3: insert into database


$sql = "INSERT INTO users (name, address, email, mobile)
VALUES ('$name', '$address', '$email', '$mobile')";

if ($conn->query($sql) === TRUE) {


echo "<p style='color:green;'>User Registered
Successfully!</p>";
echo "<a href='[Link]'>Click to View Users</a>";
} else {
echo "Error: " . $conn->error;
}

$conn->close();
}
?>

</body>
</html>

String Handling Example Inside [Link] (Optional)

You can add this anywhere after inserting data:

$uppercaseName = strtoupper($name);
echo "Name in uppercase (string function): $uppercaseName <br>";

This satisfies the requirement “Write PHP script for string”


(You can include any string function like strlen(), strtolower(), trim(),
substr() etc.)

24 | P a g e
Step 3: [Link] (Display All Users in HTML Table)

This file retrieves and displays all user data from MySQL.

<!DOCTYPE html>
<html>
<head>
<title>Display Users</title>
</head>
<body>

<h2>All Registered Users</h2>

<table border="1" cellpadding="8" cellspacing="0">


<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th>Mobile</th>
</tr>

<?php
// Step 1: Connect to database
$conn = new mysqli("localhost", "root", "", "userDB");

if ($conn->connect_error) {
die("Connection Failed: " . $conn->connect_error);
}

// Step 2: Retrieve data


$sql = "SELECT * FROM users";
$result = $conn->query($sql);

// Step 3: Display data in table


if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>".$row['id']."</td>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['address']."</td>";
echo "<td>".$row['email']."</td>";
echo "<td>".$row['mobile']."</td>";
echo "</tr>";
}

} else {
echo "<tr><td colspan='5'>No Users Found</td></tr>";
}

$conn->close();
?>

</table>

</body>
</html>

25 | P a g e
17. Using HTML, CSS, JavaScript, PHP, MySQL, design a authentication module of a web
page.
Step 1: Create MySQL Database + Table
Run this SQL in phpMyAdmin:
CREATE DATABASE authDB;

USE authDB;

CREATE TABLE users (


id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) UNIQUE,
email VARCHAR(100),
password VARCHAR(255)
);

Step 2: [Link] (Simple Styling)


body {
font-family: Arial;
background: #f0f0f0;
}

.container {
width: 350px;
margin: 80px auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px gray;
}

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

button {
width: 100%;
padding: 10px;
background: blue;
border: none;
color: white;
cursor: pointer;
font-size: 16px;
}

button:hover {
background: darkblue;

26 | P a g e
}

.error {
color: red;
margin: 5px 0;
}

Step 3: [Link] (User Registration + Password Hashing)


<?php
if (isset($_POST['register'])) {

$conn = new mysqli("localhost", "root", "", "authDB");

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$username = $_POST["username"];
$email = $_POST["email"];
$password = password_hash($_POST["password"], PASSWORD_DEFAULT);

$sql = "INSERT INTO users (username, email, password)


VALUES ('$username', '$email', '$password')";

if ($conn->query($sql)) {
echo "<script>alert('Registration Successful!');
[Link]='[Link]';</script>";
} else {
echo "<script>alert('Error: User already exists!!');</script>";
}

$conn->close();
}
?>

<!DOCTYPE html>
<html>
<head>
<title>User Registration</title>
<link rel="stylesheet" href="[Link]">
</head>

<body>

<div class="container">
<h2>Register</h2>

<form method="post">

27 | P a g e
<input type="text" name="username" placeholder="Enter username" required>
<input type="email" name="email" placeholder="Enter email" required>
<input type="password" name="password" id="pass" placeholder="Enter password"
required>

<button type="submit" name="register">Register</button>


</form>
</div>

</body>
</html>

Step 4: [Link] (User Login + PHP Session Authentication)


<?php
session_start();

if (isset($_POST['login'])) {

$conn = new mysqli("localhost", "root", "", "authDB");

$username = $_POST["username"];
$password = $_POST["password"];

$sql = "SELECT * FROM users WHERE username='$username'";


$result = $conn->query($sql);

if ($result->num_rows == 1) {

$row = $result->fetch_assoc();

if (password_verify($password, $row['password'])) {
$_SESSION["username"] = $username;
header("Location: [Link]");
} else {
echo "<script>alert('Invalid Password');</script>";
}
} else {
echo "<script>alert('User Not Found');</script>";
}
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="[Link]">
</head>

28 | P a g e
<body>

<div class="container">
<h2>Login</h2>

<form method="post">
<input type="text" name="username" placeholder="Enter username" required>
<input type="password" name="password" placeholder="Enter password" required>

<button type="submit" name="login">Login</button>


</form>
</div>

</body>
</html>

Step 5: [Link] (Protected Page)


<?php
session_start();

if (!isset($_SESSION['username'])) {
header("Location: [Link]");
exit();
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="[Link]">
</head>

<body>

<div class="container">
<h2>Welcome, <?php echo $_SESSION['username']; ?>!</h2>
<p>You are logged in.</p>

<a href="[Link]">
<button>Logout</button>
</a>
</div>

</body>
</html>

29 | P a g e
Step 6: [Link]
<?php
session_start();
session_destroy();
header("Location: [Link]");
?>

30 | P a g e

You might also like