Scribd
Upload
56 views

Web Programming Lab

Uploaded by

Rohan Ajee
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
56 views

Web Programming Lab

Uploaded by

Rohan Ajee
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/ 30

EX NO:1

HTML WEBPAGE

AIM:

To create a simple HTML page using notepad editor

PROCEDURE:

STEP1: Open the Start Screen and Search (Type Notepad)

STEP2: Go to variable view tab at bottom of window

STEP3: A New blank document will be opened and you can start writing your code

STEP4: Write the HTML code using various types of heading

attributes and paragraph attributes

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”

STEP7: Double click on the file or right-click on the file

 You HTML File will be opened in web browser and it will show output based on your html
program.
HTML code:

<html>

<body>

<h1> HTML (HyperText Markup Language) heading size 1 </h1>

<h2> HTML (HyperText Markup Language) heading size 2 </h2>

<h3> HTML (HyperText Markup Language) heading size 3 </h3>

<h4> HTML (HyperText Markup Language) heading size 4 </h4>

<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:-

To write a program to print a paragraph with different font and color.

PROCEDURE:-

STEP1: Open the Start Screen and Search (Type Notepad)

STEP2: Go to variable view tab at bottom of window

STEP3: A New blank document will be opened and you can start writing your code

STEP4: Write the HTML code using <p> attribute

STEP5: Write a font <Font> attribute to define the font family

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”

STEP10: Double click on the file or right-click on the file


HTML code:-

<html>

<body>
<p>

<font face="Arial" color="red">

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

</font>

<font face="Times New Roman" color="green">It is the core

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</font>

<font face="Verdana" color="blue">

It has survived not only five

centuries.

</font>

<font face="Helvetica" color="yellow">

It is a long established fact that a reader will be distracted by the

readable content of a page when looking at its layout.

</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:-

STEP1: Open the Start Screen and Search (Type Notepad)

STEP2: Go to variable view tab at bottom of window

STEP3: A New blank document will be opened and you can start writing your code

STEP4: Write the HTML code using Ordered and Unordered

list attributes

STEP5: Use the <ol> tag to create Ordered list type

STEP6: Use the <ul> tag to create Unordered list type

STEP7: Use the <li> tag to define the list items

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”

STEP10: Double click on the file or right-click on the file


HTML code

<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:-

Open a Text Editor:

 Use a text editor (e.g., Notepad, Sublime Text, Visual Studio Code).

Create a New HTML File:

 Start a new file and save it with a .html extension (e.g., simple_form.html).

Write HTML Structure:

 Declare the document type and start the HTML structure

Create the Form:

 Use the <form> tag to create a form.html

Input Element (<input>):

 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").

Submit Button (<input>):

 Add another <input> tag with type="submit" to create a submit button with the text
"Submit".

 Close the HTML Document:

 Close all opened tags to properly structure the HTML document


HTML code:-

<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:

 <nav> contains the menu.


 <ul> is an unordered list that holds the menu items (<li>).
 <li> represents each menu item, and <a> within each <li> is a link.

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

/* Resetting default styles and setting box-sizing */


*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Styling the navigation menu */


nav {
background-color: #333;
}

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.

EX.NO:7 EMBED AUDIO AND VIDEO CONTENT


Aim:

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>

<p>Click play to listen to the audio file.</p>

<h2>HTML Video Example</h2>

<video width="320" height="240" controls>


<source src="video/sample.mp4" type="video/mp4">
Your browser does not support the video element.
</video>

<p>Click play to watch the video file.</p>

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

1. Displays a greeting message.


2. Retrieves and displays the current date and time.
3. Shows a basic form to collect user input and display it.

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.

Running the Script

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:\

xampp\htdocs\simple.php) and add the following code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple PHP Program</title>

</head>

<body>

<h1>Welcome to My PHP Program</h1>

<?php

// Display a greeting message

echo "<p>Hello, welcome to my simple PHP program!</p>";

// Retrieve and display the current date and time

date_default_timezone_set('UTC'); // Set the timezone

echo "<p>Current date and time: " . date("Y-m-d H:i:s") . "</p>";

?>
<h2>Simple Form</h2>

<form method="post" action="<?php echo

htmlspecialchars($_SERVER["PHP_SELF"]); ?>">

<label for="name">Enter your name:</label>

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

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

</form>

<?php

// Handle form submission

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

// Retrieve user input

$name = htmlspecialchars($_POST["name"]);

// Display a personalized message

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:

Step 1: Access phpMyAdmin

1. Open your web browser.

2. Go to `http://localhost/phpmyadmin/`.

- This will bring you to the phpMyAdmin interface.

Step 2: Create a Database

1. Click on the "Databases" Tab:

- At the top of the phpMyAdmin interface, click on the "Databases" tab.

2. Create a New Database:

- In the "Create database" field, enter the name of your database

(e.g.,my_database`).

- Click on the "Create" button.

Step 3: Create a Table

1. Select the Database:

- After creating the database, it will appear in the left sidebar. Click on the name

of your new database to select it.

2. Create a New Table:

- 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).

- Click on the "Go" button.

3. Define Table 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:

- id: `INT`, Length: 11, Primary Key, Auto Increment

- name: `VARCHAR`, Length: 100

- email: `VARCHAR`, Length: 100, Unique

- age: `INT`, Length: 3

- After defining the columns, click the "Save" button.

Step 4: Insert Values into the Table

1. Select the Table:

- In the left sidebar, under your database, click on the name of the table (e.g.,

`users`).

2. Insert Data:

- Click on the "Insert" tab at the top of the phpMyAdmin interface.

3. Fill in the Form:

- You’ll see a form to enter data for each column of the table. Fill in the values

for each field:

- id: Leave this field blank if it's set to Auto Increment.

- name: Enter the name (e.g., `John Doe`).

- email: Enter the email (e.g., `[email protected]`).

- age: Enter the age (e.g., `28`).

- Click on the "Go" button to insert the data.

Example Entry:

- name: `John Doe`

- email: `[email protected]`

- age: `28`

Step 5: View the Data

1. View the Table Content:

- 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.

EX.NO:10 Connecting MySQL and PHP using XAMPP

Step 1: Set Up XAMPP

1. Start XAMPP Control Panel:


o Open the XAMPP Control Panel.
o Start the Apache and MySQL services by clicking the "Start" button next to
each.

Step 2: Create a MySQL Database

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."

Step 3: Create a PHP Script to Connect to MySQL

1. Navigate to Your Project Directory:


o Go to the htdocs directory in your XAMPP installation folder. On Windows, it's
typically C:\xampp\htdocs\.
o Create a new folder for your project (e.g., my_project).
2. Create a PHP File:
o Inside your project folder, create a new PHP file (e.g., conn.php).
3. Write the PHP Code:
o Open the index.php file in a text editor or an IDE and write the following code to
connect to your MySQL database:

<?php

$servername="localhost";

$username="root";

$password="";

$database=" my_database ";

$con=mysqli_connect($servername,$username,$password,$database);

if(!$con)

die("error detected".mysqli_error($con));
}

else

echo "connected successfully";

?>

Explanation of the Code:

o $servername: Specifies the server name, which is usually localhost when


working locally.
o $username: The MySQL username, which is root by default in XAMPP.
o $password: The MySQL password, which is empty by default in XAMPP.
o $dbname: The name of the database you created earlier (my_database).
o mysqli: A MySQLi object-oriented method to connect to the database.
o $conn->connect_error: Checks if the connection was successful or not.
o $conn->close(): Closes the connection after the operations are complete.

Step 4: Run the PHP Script

1. Access the Script in a Web Browser:


o Open your web browser.
o Go to http://localhost/my_project/conn.php.
2. Check the Connection:
o If the connection is successful, you should see the message "Connected
successfully".
o If there’s an issue, the error message will be displayed.

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 1: Start Apache and MySQL in the XAMPP Control Panel.


Step 2: Create a MySQL database using phpMyAdmin.
Step 3: Write a PHP script to connect to the MySQL database using the mysqli extension.
Step 4: Run the PHP script by accessing it through

Access the Script in a Web Browser:

o Open your web browser.


o Go to http://localhost/insertone.php.

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

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection

if ($conn->connect_error) {

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

}
// SQL query to insert data

$sql = "INSERT INTO employee (empno, ename, designation,address) VALUES

('104', 'rajat', 'manager','chennai')";

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

echo "New record created successfully";

} else {

echo "Error: " . $sql . "<br>" . $conn->error;

// Close the connection

$conn->close();

?>

RESULT:
Thus the above program was successfully executed and the output is verified.

You might also like