Web Programming Lab
Web Programming Lab
HTML WEBPAGE
AIM:
PROCEDURE:
STEP3: A New blank document will be opened and you can start writing your code
STEP5: Go to Notepad Menu: File > Save (or use short-key CTRL + S)
STEP6: Give it a name with .html extension and save it like “filename.html”
You HTML File will be opened in web browser and it will show output based on your html
program.
HTML code:
<html>
<body>
<p>My HTML Program or page can be created by many HTML or Text Editors. These editors are
software that help us writing our code with easy user interface. </p>
</body>
</html>
OUTPUT :
RESULT:
Thus the above program was successfully executed and the output is verified.
EX NO:2 PARAGRAPH WITH DIFFERENT
FONT AND COLOUR
AIM:-
PROCEDURE:-
STEP3: A New blank document will be opened and you can start writing your code
STEP6: Specify the font family name like ”Arial” and color like “red ”
STEP7: Close the font tag with the closing tag </Font>
STEP8: Go to Notepad Menu: File > Save (or use short-key CTRL + S)
STEP9: Give it a name with .html extension and save it like “filename.html”
<html>
<body>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</font>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</font>
centuries.
</font>
</font>
</p>
</body>
</html>
OUTPUT:-
RESULT:
Thus the above program was successfully executed and the output is verified
EX NO:3
ORDER AND UNORDERED LIST
AIM:-
To create a list of items using Ordered list and Unordered list attributes
PROCEDURE:-
STEP3: A New blank document will be opened and you can start writing your code
list attributes
STEP8: Go to Notepad Menu: File > Save (or use short-key CTRL + S)
STEP9: Give it a name with .html extension and save it like “filename.html”
<html>
<ol>
<li>Groceries</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
<li>Hardware</li>
<ul>
<li>Hammer</li>
<li>Nails</li>
<li>Duct Tape</li>
</ul>
<li>Electronics</li>
<ul>
<li>Earphones</li>
<li>Movies</li>
<li>Table Fan</li>
</ul>
</ol>
</html>
OUTPUT:-
RESULT:
Thus the above program was successfully executed and the output is verified.
EX NO:4
HTML FORM
AIM:
To create a basic HTML form that prompts users to enter their name into a single-line
text input field and submit
PROCEDURE:-
Use a text editor (e.g., Notepad, Sublime Text, Visual Studio Code).
Start a new file and save it with a .html extension (e.g., simple_form.html).
Use the <input> tag with type="text" to create a single-line text input field (name).
Include an optional <label> to describe the input field (for="name").
Add another <input> tag with type="submit" to create a submit button with the text
"Submit".
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT:-
RESULT:
Thus the above program was successfully executed and the output is verified.
EX NO:5 HTML layouts
AIM:
To create the HTML webpage with a basic layout using inline CSS
PROCEDURE:-
1. Start HTML Structure: Begin with <!DOCTYPE html> to declare the document type and
<html> tag to start the HTML document.
2. Head Section: Use <head> to include metadata like <title> and <style> for internal
CSS.
3. Body Section: Open <body> to contain the visible content of the webpage.
4. Header: Create <header> with a centered <h2> for the title, styled with background color,
padding, font size, and color.
5. Section: Use <section> to structure the main content area.
6. Navigation (<nav>): Inside <section>, add <nav> with <ul> and <li> for navigation
links styled with float, width, background, padding, and list styles.
7. Article: Include <article> for main content with <h1> and <p> tags, styled with float,
padding, width, background color, and height.
8. Footer: Use <footer> for the footer section with background color, padding, text
alignment, and color.
9. CSS Styling: Add CSS within <style> tags to define box-sizing, header, navigation,
article, and footer styles, ensuring proper layout and design.
10. Closing Tags: Close all opened HTML tags (</header>, </nav>, </article>,
</section>, </footer>, </body>, </html>).
HTML CODE:
<html>
<head>layout</head>
<body>
<header>
<h2>Title</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Learn HTML</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<article>
<h1>Home</h1>
<p>This is a home page.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
<style>
*{
box-sizing: border-box;
}
header {
background-color: lightblue;
text-align: center;
padding: 2px;
font-size: 25px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #fff;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
footer {
background-color: lightblue;
padding: 10px;
text-align: center;
color: white;
}
section::after {
content: "";
display: table;
clear: both;
}
</style>
</html>
OUTPUT
RESULT:
Thus the above program was successfully executed and the output is verified.
EX.NO 6: Menu Design using CSS
Procedure:
HTML Structure:
CSS Styling:
selector resets margin, padding, and sets box-sizing: border-box to all elements.
nav styles the entire navigation bar with a dark background color.
ul removes default list styles (list-style-type: none), sets margin and padding to zero, and
ensures the menu items stay within the navigation bar (overflow: hidden).
li makes each list item float left, creating a horizontal menu.
li a styles the links inside list items (<a> tags) with white text color, centered text
alignment, padding for spacing, and removes underlines (text-decoration: none).
li a:hover changes the background color of links to gray (#555) when hovered over.
HTML FILE
<html >
<head>
<title>Menu Design</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to external CSS file -->
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
styles.css FILE
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
}
OUTPUT
RESULT:
Thus the above program was successfully executed and the output is verified.
To use the <audio> and <video> tags in HTML to embed audio and video
content into a webpage:
PROGRAM:
<html >
<head>
<title>Audio Example</title>
</head>
<body>
<h2>HTML Audio Example</h2>
<audio controls>
<source src="audio/sample.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
OUTPUT
RESULT:
Thus the above program was successfully executed and the output is verified.
EX.NO:8 Simple PHP program that demonstrates some basic concepts
of PHP
Procedure:
1. HTML Structure: Basic HTML structure with a head and body section.
2. Greeting Message: Uses PHP to display a welcome message.
3. Current Date and Time:
o date_default_timezone_set('UTC'): Sets the timezone to UTC (you can change it
to your local timezone if needed).
o date("Y-m-d H:i:s"): Formats the current date and time.
4. Form:
o The form uses the POST method to send data to the same script (action="<?php
echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>").
o htmlspecialchars($_SERVER["PHP_SELF"]) prevents XSS attacks by escaping
special characters.
5. Form Handling:
o Checks if the form was submitted using $_SERVER["REQUEST_METHOD"]
== "POST".
o Retrieves and sanitizes user input with htmlspecialchars($_POST["name"]).
o Displays a personalized message based on the user’s input.
1. Start XAMPP:
o Ensure Apache and MySQL services are running in the XAMPP Control Panel.
2. Access the PHP Script:
o Open your web browser.
o Navigate to http://localhost/my_project/index.php.
3. Interact with the Form:
o Enter your name into the form and submit it to see the personalized message.
This simple PHP program demonstrates basic PHP functionality, including displaying
messages, handling form data, and working with dates and times.
Create a file named simple.php in your XAMPP htdocs directory (e.g., C:\
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<?php
?>
<h2>Simple Form</h2>
htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars($_POST["name"]);
echo "<p>Hello, " . $name . "! Thanks for submitting your name.</p>";
?>
</body>
</html>
RESULT:
Thus the above program was successfully executed and the output is verified.
EX.NO:9 Creating A Database, Table, And Inserting Values
Using Phpmyadmin
Procedures:
2. Go to `http://localhost/phpmyadmin/`.
(e.g.,my_database`).
- After creating the database, it will appear in the left sidebar. Click on the name
- In the "Create table" section, enter the name of the table (e.g., `users`).
- Specify the number of columns you want the table to have (e.g., 4 columns).
- After clicking "Go," you'll be taken to a page where you can define the columns
of your table:
- Column Name: The name of each column (e.g., `id`, `name`, `email`, `age`).
- Type: The data type for each column (e.g., `INT`, `VARCHAR`, `INT`).
- Length/Values: The maximum length for the data (e.g., 100 for `VARCHAR`).
- Primary Key: For the `id` column, set it as the Primary Key by selecting the
"Primary" option in the "Index" dropdown.
- Auto Increment: For the `id` column, check the "A_I" (Auto Increment) box.
Example:
- In the left sidebar, under your database, click on the name of the table (e.g.,
`users`).
2. Insert Data:
- You’ll see a form to enter data for each column of the table. Fill in the values
Example Entry:
- email: `john.doe@example.com`
- age: `28`
- After inserting data, click on the "Browse" tab to view the table's content. This
will show all the rows that have been inserted into the table.
RESULT: Thus the above program was successfully executed and the
output is verified.
1. Open phpMyAdmin:
o In your web browser, go to http://localhost/phpmyadmin/.
2. Create a New Database:
o Click on the "Databases" tab.
o Enter a name for your database (e.g., my_database).
o Click "Create."
<?php
$servername="localhost";
$username="root";
$password="";
$con=mysqli_connect($servername,$username,$password,$database);
if(!$con)
die("error detected".mysqli_error($con));
}
else
?>
RESULT:
Thus the above program was successfully executed and the output is verified.
EX.NO:11 Connecting MySQL and PHP to perform basic insertion operation using
XAMPP
Procedures:
Step 5: Perform database operations like inserting data into the table.
PHP CODE(insertone.php. )
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "emp";
// Create a connection
// Check connection
if ($conn->connect_error) {
}
// SQL query to insert data
} else {
$conn->close();
?>
RESULT:
Thus the above program was successfully executed and the output is verified.