Scribd
Upload
15 views34 pages

Web Tech Aman Sinha

wt

Uploaded by

kypgpsiwan
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
15 views34 pages

Web Tech Aman Sinha

wt

Uploaded by

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

Practical : 1

Practical: Home Page Development of an Online Book


Store (Using Only HTML)
Objective:

To create a simple static home page for an online book store using basic HTML elements.

Tools Required:

 Text editor (e.g., Notepad++, VS Code, Sublime Text, etc.)


 Web browser (e.g., Chrome, Firefox)

Steps to Follow:

1. Create a Project Folder:

Create a folder named OnlineBookStore on your computer. Inside this folder, create an
HTML file named index.html.

2. HTML Structure:

Begin by creating the basic structure of the HTML file. This includes the DOCTYPE
declaration, HTML, head, and body tags.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Online Book Store</title>
</head>
<body>
</body>
</html>

3. Design the Header Section:

In the header, include the name of the bookstore, a simple navigation bar, and a logo
placeholder.

<header>
<h1>Welcome to the Online Book Store</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<hr>

4. Main Content:

In the main content section, create a welcome message, a featured books section, and
categories of books.

<main>
<section id="welcome">
<h2>Discover Your Next Favorite Book</h2>
<p>Browse through our wide collection of books across different
genres.</p>
</section>

<section id="featured-books">
<h3>Featured Books</h3>
<ul>
<li>The Great Gatsby</li>
<li>1984 by George Orwell</li>
<li>To Kill a Mockingbird</li>
<li>The Catcher in the Rye</li>
</ul>
</section>

<section id="categories">
<h3>Book Categories</h3>
<ul>
<li>Fiction</li>
<li>Non-Fiction</li>
<li>Science Fiction</li>
<li>Fantasy</li>
<li>Biographies</li>
<li>Children's Books</li>
</ul>
</section>
</main>

5. Footer Section:

Create a footer section with some basic details such as copyright, social media links, and
contact info.

<hr>
<footer>
<p>&copy; 2024 Online Book Store. All Rights Reserved.</p>
<p>Follow us on:
<a href="#">Facebook</a> |
<a href="#">Twitter</a> |
<a href="#">Instagram</a>
</p>
<p>Email us at: [email protected]</p>
</footer>

6. Full HTML Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Online Book Store</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
text-align: center;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to the Online Book Store</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<hr>
<main>
<section id="welcome">
<h2>Discover Your Next Favorite Book</h2>
<p>Browse through our wide collection of books across different
genres.</p>
</section>

<section id="featured-books">
<h3>Featured Books</h3>
<ul>
<li>The Great Gatsby</li>
<li>1984 by George Orwell</li>
<li>To Kill a Mockingbird</li>
<li>The Catcher in the Rye</li>
</ul>
</section>

<section id="categories">
<h3>Book Categories</h3>
<ul>
<li>Fiction</li>
<li>Non-Fiction</li>
<li>Science Fiction</li>
<li>Fantasy</li>
<li>Biographies</li>
<li>Children's Books</li>
</ul>
</section>
</main>
<hr>
<footer>
<p>&copy; 2024 Online Book Store. All Rights Reserved.</p>
<p>Follow us on:
<a href="#">Facebook</a> |
<a href="#">Twitter</a> |
<a href="#">Instagram</a>
</p>
<p>Email us at: [email protected]</p>
</footer>
</body>
</html>

Output:

 This static page will display a simple homepage for an online book store, featuring the
bookstore's name, navigation links, featured books, book categories, and a footer with
social media links and contact details.

Practical Conclusion:

This exercise demonstrates how to create a simple static homepage for an online book store
using only HTML. This is a good starting point for building more complex web pages with
the addition of CSS and JavaScript for enhanced interactivity and design.
Practical : 2
Practical: Simple Calculator Using JavaScript for Basic
Operations (Sum, Product, Difference, and Quotient)
Objective:

To design a simple calculator using JavaScript that performs the following operations: sum,
product, difference, and quotient.

Tools Required:

 Text editor (e.g., Notepad++, VS Code, Sublime Text, etc.)


 Web browser (e.g., Chrome, Firefox)

Steps to Follow:

1. Create a Project Folder:

Create a folder named SimpleCalculator. Inside this folder, create an HTML file named
calculator.html.

2. HTML Structure:

Create a simple HTML page that contains input fields for numbers, buttons for each
operation, and a display area for the result.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
input {
padding: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
}
#result {
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Simple Calculator</h1>

<input type="number" id="num1" placeholder="Enter first number">


<input type="number" id="num2" placeholder="Enter second number">
<br><br>

<button onclick="calculate('add')">Sum</button>
<button onclick="calculate('subtract')">Difference</button>
<button onclick="calculate('multiply')">Product</button>
<button onclick="calculate('divide')">Quotient</button>

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

<script src="script.js"></script>
</body>
</html>

3. JavaScript for Calculator Operations:

Create a file named script.js in the same folder. This script will contain the logic for
performing the four operations: sum, product, difference, and quotient.

// Function to perform the calculation


function calculate(operation) {
// Get the values of the input fields
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result;

// Check if input values are valid numbers


if (isNaN(num1) || isNaN(num2)) {
document.getElementById("result").innerHTML = "Please enter valid
numbers.";
return;
}

// Perform the selected operation


switch (operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
// Check for division by zero
if (num2 === 0) {
document.getElementById("result").innerHTML = "Cannot
divide by zero.";
return;
}
result = num1 / num2;
break;
default:
result = "Invalid operation.";
}

// Display the result


document.getElementById("result").innerHTML = "Result: " + result;
}

4. Full HTML and JavaScript Code:

calculator.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
input {
padding: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
}
#result {
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Simple Calculator</h1>

<input type="number" id="num1" placeholder="Enter first number">


<input type="number" id="num2" placeholder="Enter second number">
<br><br>

<button onclick="calculate('add')">Sum</button>
<button onclick="calculate('subtract')">Difference</button>
<button onclick="calculate('multiply')">Product</button>
<button onclick="calculate('divide')">Quotient</button>

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

<script src="script.js"></script>
</body>
</html>
script.js:
javascript
Copy code
// Function to perform the calculation
function calculate(operation) {
// Get the values of the input fields
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result;

// Check if input values are valid numbers


if (isNaN(num1) || isNaN(num2)) {
document.getElementById("result").innerHTML = "Please enter valid
numbers.";
return;
}

// Perform the selected operation


switch (operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
// Check for division by zero
if (num2 === 0) {
document.getElementById("result").innerHTML = "Cannot
divide by zero.";
return;
}
result = num1 / num2;
break;
default:
result = "Invalid operation.";
}

// Display the result


document.getElementById("result").innerHTML = "Result: " + result;
}

Output:

When the user enters two numbers and clicks a button for one of the operations (Sum,
Difference, Product, or Quotient), the result will be displayed on the screen.

Practical Conclusion:

This practical demonstrates how to design a simple calculator using JavaScript to perform
basic arithmetic operations (addition, subtraction, multiplication, and division). The
calculator validates inputs, checks for special conditions like division by zero, and displays
the result in real-time.
Practical : 3
Practical: PHP Program to Display a Digital Clock
Showing the Server's Current Time
Objective:

To write a PHP program that displays the current time of the server in a digital clock format.

Tools Required:

 Text editor (e.g., Notepad++, VS Code, Sublime Text, etc.)


 Web server (e.g., XAMPP, WAMP, or any server that supports PHP)
 Web browser (e.g., Chrome, Firefox)

Steps to Follow:

1. Set Up Your Environment:

You need to have a local or remote server with PHP installed. You can use tools like XAMPP
or WAMP to set up a local server on your machine.

2. Create a Project Folder:

Create a folder named DigitalClockPHP. Inside this folder, create a PHP file named
clock.php.

3. Basic PHP Program for Time Display:

To display the server's current time, use the PHP date() function, which can retrieve the
current server time.

4. Write the PHP Code:

In the clock.php file, write the following code. The PHP code will be embedded within
HTML to render the time dynamically.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Digital Clock - Server Time</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #333;
color: white;
}
.clock {
font-size: 50px;
padding: 20px;
background-color: #444;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
</style>
<script>
// JavaScript to reload the page every second
function refreshTime() {
setTimeout(function () {
window.location.reload(1);
}, 1000);
}
</script>
</head>
<body onload="refreshTime()">

<div class="clock">
<?php
// Display current server time in 'H:i:s' format (hours,
minutes, seconds)
echo date('H:i:s');
?>
</div>

</body>
</html>

5. Explanation of the Code:

 HTML Structure:
The HTML structure includes a div with the class clock, where the current server
time will be displayed.
 CSS Styling:
The clock is styled with CSS to have a digital appearance. The font-size,
background color, and box-shadow properties are used to make the clock visually
appealing.
 PHP Code: The <?php echo date('H:i:s'); ?> tag is used to display the current
server time in the format hours:minutes:seconds.
 JavaScript for Auto Refresh: The JavaScript refreshTime() function is used to
reload the page every second so that the clock updates in real-time. It uses the
setTimeout() function to trigger a page refresh every 1000 milliseconds (1 second).

6. Full PHP Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Digital Clock - Server Time</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #333;
color: white;
}
.clock {
font-size: 50px;
padding: 20px;
background-color: #444;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
</style>
<script>
function refreshTime() {
setTimeout(function () {
window.location.reload(1);
}, 1000);
}
</script>
</head>
<body onload="refreshTime()">

<div class="clock">
<?php
echo date('H:i:s');
?>
</div>

</body>
</html>

7. Run the PHP Program:

1. Start your local server (using XAMPP, WAMP, or other PHP-supported platforms).
2. Place the DigitalClockPHP folder in the server's htdocs directory.
3. Open your browser and navigate to
http://localhost/DigitalClockPHP/clock.php.

Output:

 The page will display a digital clock with the current server time in HH:MM:SS format
(24-hour format).
 The clock will automatically update every second due to the JavaScript refresh
mechanism.

Practical Conclusion:
This practical demonstrates how to build a simple digital clock using PHP and JavaScript that
displays the server's current time. The page auto-refreshes every second to ensure the
displayed time is always accurate.
Practical : 4
Practical: Create a CV Using HTML to Display on a Web
Page
Objective:

To write an HTML code that displays your CV (Curriculum Vitae) on a web page with
appropriate sections such as personal information, education, work experience, skills, and
contact details.

Tools Required:

 Text editor (e.g., Notepad++, VS Code, Sublime Text, etc.)


 Web browser (e.g., Chrome, Firefox)

Steps to Follow:

1. Create a Project Folder:

Create a folder named MyCV. Inside this folder, create an HTML file named cv.html.

2. Basic HTML Structure:

Begin by creating the basic structure of the HTML file. This includes the DOCTYPE
declaration, HTML, head, and body tags.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>My CV</title>

<style>

body {

font-family: Arial, sans-serif;

line-height: 1.6;

margin: 0;

padding: 0;
background-color: #f4f4f4;

color: #333;

.container {

max-width: 900px;

margin: auto;

padding: 20px;

background-color: white;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h1, h2 {

color: #0056b3;

h2 {

border-bottom: 2px solid #0056b3;

padding-bottom: 5px;

ul {

list-style-type: none;

li {

margin-bottom: 10px;

.contact-info {

background-color: #e6f7ff;

padding: 10px;

border-radius: 5px;

margin-bottom: 20px;

.section {

margin-bottom: 30px;
}

</style>

</head>

<body>

<div class="container">

<!-- CV Header with Name -->

<header>

<h1>John Doe</h1>

</header>

<!-- Contact Information Section -->

<section class="contact-info">

<p>Email: [email protected]</p>

<p>Phone: +123-456-7890</p>

<p>Address: 123 Main Street, Hometown, Country</p>

</section>

<!-- Summary Section -->

<section class="section">

<h2>Professional Summary</h2>

<p>A highly motivated software developer with over 3 years of experience in web
development. Skilled in HTML, CSS, JavaScript, and backend technologies like PHP and Node.js.
Seeking to leverage technical expertise to grow in a dynamic organization.</p>

</section>

<!-- Education Section -->

<section class="section">

<h2>Education</h2>

<ul>

<li><strong>Bachelor of Science in Computer Science</strong> - XYZ University (2016 -


2020)</li>
<li><strong>High School Diploma</strong> - ABC High School (2014 - 2016)</li>

</ul>

</section>

<!-- Work Experience Section -->

<section class="section">

<h2>Work Experience</h2>

<ul>

<li><strong>Junior Web Developer</strong> - Tech Solutions Inc. (2021 - Present)

<ul>

<li>Developed and maintained company websites using HTML, CSS, and JavaScript.</li>

<li>Collaborated with designers to improve user interfaces and enhance website


performance.</li>

<li>Worked with back-end teams to integrate RESTful APIs and databases.</li>

</ul>

</li>

<li><strong>Intern</strong> - Creative Soft Solutions (2020 - 2021)

<ul>

<li>Assisted in the design and development of client websites.</li>

<li>Provided technical support and debugging for live websites.</li>

</ul>

</li>

</ul>

</section>

<!-- Skills Section -->

<section class="section">

<h2>Skills</h2>

<ul>

<li>HTML5, CSS3, JavaScript</li>

<li>Responsive Web Design</li>


<li>PHP, Node.js</li>

<li>Version Control (Git, GitHub)</li>

<li>Database Management (MySQL, MongoDB)</li>

<li>Problem-solving and Debugging</li>

</ul>

</section>

<!-- Projects Section -->

<section class="section">

<h2>Projects</h2>

<ul>

<li><strong>Online Bookstore Website</strong> - Designed a fully functional e-commerce


website for selling books.</li>

<li><strong>Portfolio Website</strong> - Created a personal portfolio site showcasing


projects and skills.</li>

<li><strong>Weather App</strong> - Built a weather app using JavaScript and APIs to show
live weather data.</li>

</ul>

</section>

<!-- Footer with Contact Details -->

<footer>

<p>Contact me at: [email protected] | Phone: +123-456-7890</p>

</footer>

</div>

</body>

</html>

3. Explanation of the HTML Structure:

 Header:
This contains the name of the person (John Doe) styled with h1.
 Contact Information Section:
The contact information (email, phone number, and address) is placed inside a
section and styled for visibility.
 Professional Summary:
A brief summary describing the professional profile of the candidate.
 Education Section:
This section lists the educational background, including degrees and institutions, in an
unordered list.
 Work Experience Section:
Lists job roles, companies, and responsibilities in another unordered list. Nested lists
are used to describe job duties.
 Skills Section:
This section lists relevant technical skills in bullet points.
 Projects Section:
Includes a list of projects the person has worked on, along with brief descriptions.
 Footer:
The footer contains additional contact details.

4. Output:

When the HTML file (cv.html) is opened in a web browser, the CV will be displayed as a
structured and well-organized web page. The sections will be visually separated, and the
contact details, education, skills, and experience will be clearly visible.

Practical Conclusion:

This practical demonstrates how to create a web page that showcases a CV using basic
HTML and CSS. You can further enhance this CV with advanced styling techniques using
CSS or add interactivity with JavaScript. This is a great exercise for beginners to learn how to
structure content on a web page using semantic HTML elements.
Practical : 5
Practical: Write an XML Program to Display Products
Objective:

To write an XML file that contains information about products (such as product name, price,
description, and category) and demonstrate how the data can be structured using XML.

Tools Required:

 Text editor (e.g., Notepad++, VS Code, Sublime Text, etc.)


 Web browser or XML viewer for displaying the file

Steps to Follow:

1. Create a Project Folder:

Create a folder named ProductCatalog. Inside this folder, create an XML file named
products.xml.

2. Write the XML Structure:

We will create an XML file that holds details about various products, including their name,
price, description, and category.

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

<products>

<!-- First Product -->

<product>

<name>Wireless Mouse</name>

<category>Electronics</category>

<price currency="USD">25.99</price>

<description>A reliable wireless mouse with smooth scrolling and precise


tracking.</description>

</product>

<!-- Second Product -->

<product>

<name>Coffee Maker</name>
<category>Appliances</category>

<price currency="USD">45.50</price>

<description>Automatic coffee maker with 12-cup capacity and programmable


timer.</description>

</product>

<!-- Third Product -->

<product>

<name>Notebook</name>

<category>Stationery</category>

<price currency="USD">3.99</price>

<description>80-page lined notebook, perfect for note-taking or journaling.</description>

</product>

<!-- Fourth Product -->

<product>

<name>Bluetooth Speaker</name>

<category>Electronics</category>

<price currency="USD">35.00</price>

<description>Portable Bluetooth speaker with excellent sound quality and battery


life.</description>

</product>

<!-- Fifth Product -->

<product>

<name>Running Shoes</name>

<category>Sports</category>

<price currency="USD">79.99</price>

<description>Lightweight running shoes designed for comfort and performance.</description>

</product>

</products>
3. Explanation of the XML Structure:

 XML Declaration:

xml
Copy code
<?xml version="1.0" encoding="UTF-8"?>

This line specifies that the XML version is 1.0 and that it uses UTF-8 character
encoding.

 Root Element: The root element of this XML document is <products>, which
contains all the product entries.
 Product Element: Each individual product is represented by a <product> element.
Inside each product element, we have:
o <name>: The name of the product.
o <category>: The category or type of the product.
o <price>: The price of the product, including an attribute currency to specify the
currency type.
o <description>: A brief description of the product.

4. How to Display and Use XML:

XML can be viewed in a web browser or in any XML viewer, but it is most commonly used
as a data format. In practical applications, XML data can be parsed and processed using
programming languages such as JavaScript, PHP, Python, etc.

Example of Displaying XML with XSLT for Styling:

If you want to display the XML data in a web-friendly format, you can use XSLT (Extensible
Stylesheet Language Transformations) to transform XML into HTML.

Sample XSLT (products.xsl):


<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="/">
<html>
<head>
<title>Product Catalog</title>
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #000;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Product Catalog</h1>
<table>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price (USD)</th>
<th>Description</th>
</tr>
<xsl:for-each select="products/product">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="category"/></td>
<td><xsl:value-of select="price"/></td>
<td><xsl:value-of select="description"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

To apply this XSLT, include a reference to the XSL file in the products.xml file like this:

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


<?xml-stylesheet type="text/xsl" href="products.xsl"?>
<products>
<!-- Product data as in previous example -->
</products>

5. Output:

When the XML file is opened in a web browser (with the XSLT file included), it will display
the product data in a neatly formatted table.

Practical Conclusion:

This practical demonstrates how to create an XML document to structure product data and,
optionally, display it on a web page using XSLT. XML is commonly used for data storage
and sharing in web applications, making it an essential tool for developers working with
structured data.
Practical : 6
Practical: Create a Web Page with All Types of Cascading
Style Sheets (CSS)
Objective:

To create a web page that demonstrates the three types of CSS: Inline CSS, Internal
(Embedded) CSS, and External CSS.

Tools Required:

 Text editor (e.g., Notepad++, VS Code, Sublime Text, etc.)


 Web browser (e.g., Chrome, Firefox)

Steps to Follow:

1. Create a Project Folder:

Create a folder named CSSDemo. Inside this folder:

 Create an HTML file named index.html.


 Create a CSS file named styles.css for external CSS.

2. Write the HTML Code (index.html):

The HTML page will include examples of all three types of CSS: Inline, Internal, and
External.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS Types Demonstration</title>

<!-- External CSS Linking -->


<link rel="stylesheet" href="styles.css">

<!-- Internal CSS -->


<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
}
section {
padding: 20px;
}
.internal-css-example {
color: #ff6347;
border: 2px solid #ff6347;
padding: 10px;
background-color: #fff3f0;
text-align: center;
}
</style>
</head>
<body>

<!-- Header Section -->


<header>
<h1>Demonstrating All Types of CSS</h1>
</header>

<!-- Section 1: External CSS -->


<section>
<h2>External CSS Example</h2>
<p>This paragraph is styled using external CSS. Check the
<code>styles.css</code> file.</p>
</section>

<!-- Section 2: Internal CSS -->


<section class="internal-css-example">
<h2>Internal (Embedded) CSS Example</h2>
<p>This section is styled using internal CSS, declared in the
<code>&lt;style&gt;</code> tag in the <code>&lt;head&gt;</code> section of
the HTML.</p>
</section>

<!-- Section 3: Inline CSS -->


<section>
<h2>Inline CSS Example</h2>
<p style="color: blue; font-size: 20px; font-weight: bold;">This
paragraph is styled using inline CSS, defined directly within the
<code>&lt;p&gt;</code> tag.</p>
</section>

</body>
</html>

3. Write the External CSS (styles.css):

Create an external stylesheet named styles.css inside the CSSDemo folder.

/* External CSS - styles.css */


body {
background-color: #e0f7fa;
}

section {
margin: 20px;
padding: 20px;
border-radius: 5px;
}

h2 {
color: #00796b;
}

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

header h1 {
font-size: 36px;
}

4. Explanation of the CSS Types:

 External CSS:
In the HTML <head> section, the <link> tag is used to include the external stylesheet
(styles.css). This is applied to style elements globally.

html
Copy code
<link rel="stylesheet" href="styles.css">

 Internal (Embedded) CSS:


Internal CSS is written inside the <style> tag within the <head> of the HTML file. It
is used to style specific elements within the HTML document.

<style>
body {
font-family: Arial, sans-serif;
}
/* Other internal CSS rules */
</style>

 Inline CSS:
Inline CSS is applied directly to individual HTML elements using the style attribute
within the element tag itself. This is typically used for quick styling, but it's not
recommended for large projects.

html
Copy code
<p style="color: blue; font-size: 20px; font-weight: bold;">This
paragraph is styled using inline CSS.</p>

5. Final Directory Structure:

CSSDemo/
├── index.html # HTML file with inline and internal CSS
├── styles.css # External CSS file

6. Output:

 The external CSS will apply styles such as background color and text styling globally.
 The internal CSS will style the specific section (like the color of headings and the
design of one specific section).
 Inline CSS will directly apply styles (like font size, weight, and color) to individual
elements within the body of the HTML.

Practical Conclusion:

This practical demonstrates how to create a web page using all three types of CSS: External,
Internal (Embedded), and Inline. It shows how each type is implemented and the effects they
have on the presentation of an HTML page. For better maintainability and scalability,
external CSS is preferred, while inline CSS is used sparingly.
Practical : 7
Practical: Write a JavaScript to Calculate Squares and
Cubes of Numbers from 0 to 10 and Display in an HTML
Table
Objective:

To write a JavaScript program that calculates the squares and cubes of numbers from 0 to 10,
and displays the results in an HTML table.

Tools Required:

 Text editor (e.g., Notepad++, VS Code, Sublime Text)


 Web browser (e.g., Chrome, Firefox)

Steps to Follow:

1. Create a Project Folder:

Create a folder named SquaresAndCubes. Inside this folder, create an HTML file named
index.html.

2. Write the HTML Code (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Squares and Cubes Table</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
table {
margin: 20px auto;
border-collapse: collapse;
width: 50%;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>

<h1>Squares and Cubes of Numbers from 0 to 10</h1>

<table id="resultTable">
<tr>
<th>Number</th>
<th>Square</th>
<th>Cube</th>
</tr>
</table>

<script>
// JavaScript to calculate squares and cubes and insert into the
HTML table
const table = document.getElementById('resultTable');

for (let num = 0; num <= 10; num++) {


const square = num * num;
const cube = num * num * num;

// Create a new row for the current number


const row = document.createElement('tr');

// Create table data cells for the number, its square, and its
cube
const numberCell = document.createElement('td');
numberCell.textContent = num;

const squareCell = document.createElement('td');


squareCell.textContent = square;

const cubeCell = document.createElement('td');


cubeCell.textContent = cube;

// Append the cells to the row


row.appendChild(numberCell);
row.appendChild(squareCell);
row.appendChild(cubeCell);

// Append the row to the table


table.appendChild(row);
}
</script>

</body>
</html>

3. Explanation of the Code:

 HTML Structure:
o The table is created using standard HTML <table>, <tr>, <th>, and <td>
tags. Initially, only the table header row is present in the HTML (Number,
Square, and Cube).
 CSS Styling:
o The table is styled to be centered, with alternating row colors for readability. It
uses border-collapse for clean borders, and box-shadow for subtle depth.
 JavaScript Logic:
o The JavaScript function runs a for loop from 0 to 10, calculating the square
and cube for each number.
o For each iteration of the loop:
 A new row (<tr>) is created.
 Three cells (<td>) are created for the number, its square, and its cube.
 The cells are appended to the row, and the row is appended to the
table.
o The final table dynamically shows numbers 0 to 10, their squares, and cubes.

4. Final Output:

When the index.html file is opened in a browser, the web page will display a table with
three columns:

 Number: The number itself (from 0 to 10).


 Square: The square of the number.
 Cube: The cube of the number.

5. Expected Output:

Number Square Cube


0 0 0
1 1 1
2 4 8
3 9 27
4 16 64
5 25 125
6 36 216
7 49 343
8 64 512
9 81 729
10 100 1000

6. Explanation of Logic:

 JavaScript Loop: The loop runs from 0 to 10.


o For each iteration, it calculates the square (num * num) and cube (num * num
* num) of the current number.
o A new row is created for each number, and the three values (number, square,
and cube) are inserted into the table.
Practical Conclusion:

This practical demonstrates how to use JavaScript to calculate squares and cubes of numbers,
and dynamically generate an HTML table to display the results. It also integrates basic
HTML, CSS, and JavaScript to enhance understanding of dynamic table generation on the
web.
Practical: 8
Practical: PHP Program to Display a Digital Clock
Showing the Current Server Time
Objective:

To write a PHP program that displays the current server time in the form of a digital clock
that updates every second.

Tools Required:

 A local server environment (e.g., XAMPP, WAMP, or MAMP)


 A text editor (e.g., Notepad++, VS Code, Sublime Text)
 A web browser to view the output

Steps to Follow:

1. Set Up a Local Server:

Ensure you have a local server installed (such as XAMPP, WAMP, or MAMP). For XAMPP
users:

 Start Apache from the XAMPP control panel.


 Place your project files in the htdocs directory (usually located at C:\xampp\
htdocs).

2. Create a Project Folder:

Create a folder named DigitalClockPHP in the htdocs directory. Inside this folder, create a
PHP file named clock.php.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<title>Digital Clock</title>

<style>

body {

font-family: 'Arial', sans-serif;


text-align: center;

background-color: #f0f0f0;

margin: 0;

padding: 0;

.clock-container {

margin-top: 20%;

.clock {

font-size: 60px;

font-weight: bold;

background-color: #333;

color: white;

display: inline-block;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

</style>

</head>

<body>

<div class="clock-container">

<div class="clock" id="clock">

<?php

date_default_timezone_set("YOUR_TIMEZONE"); // Set your server's timezone (e.g.,


'America/New_York')

echo date("h:i:s A"); // Display the initial server time in 'Hour:Minute:Second AM/PM'
format

?>

</div>

</div>
<script>

function updateClock() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

document.getElementById('clock').innerHTML = xhr.responseText;

xhr.open('GET', 'time.php', true); // Request updated time from 'time.php'

xhr.send();

setInterval(updateClock, 1000); // Refresh the time every second

</script>

</body>

</html>

4. Create the time.php File:

In the same folder (DigitalClockPHP), create a new file named time.php to dynamically
update the time.

<?php

date_default_timezone_set("YOUR_TIMEZONE"); // Set the server's timezone (e.g.,


'America/New_York')

echo date("h:i:s A"); // Output the current time in 'Hour:Minute:Second AM/PM' format

?>

5. Explanation of the Code:

 PHP Logic (time.php):


o The time.php file contains PHP code that gets the current time using date().
o The date_default_timezone_set("YOUR_TIMEZONE") function sets the
timezone to match the server's location. Replace "YOUR_TIMEZONE" with your
local timezone (e.g., "America/New_York", "Europe/London").
o The date("h:i:s A") function formats the time as hour:minute:second
AM/PM (12-hour format).
 HTML and JavaScript (clock.php):
o The page contains a div that displays the time returned by the PHP script.
o JavaScript uses XMLHttpRequest to asynchronously fetch the time from
time.php every second using setInterval(updateClock, 1000). The
fetched time is then updated in the div with the id="clock".
o The clock is styled using basic CSS to appear like a digital clock.

6. How to Run the Program:

1. Start the Server: Start the Apache server in XAMPP/WAMP/MAMP.


2. Open the clock.php File in a Browser: In your browser, navigate to:

http://localhost/DigitalClockPHP/clock.php

3. See the Output: The current server time will be displayed in the form of a digital
clock, and it will automatically update every second.

7. Output Example:

 Initially, the time will be displayed like this:


 The time will keep updating every second, mimicking the behavior of a real-time
digital clock.

Practical Conclusion:

This practical demonstrates how to use PHP to display a digital clock that shows the current
server time. By integrating PHP and JavaScript (with AJAX), the time updates every second
without reloading the entire page, providing a real-time clock functionality. This exercise
showcases the combination of server-side and client-side technologies for dynamic content
rendering.

You might also like