w3htmlschool https://w3htmlschool.com/ Simple Tutorials for Smart Learning Wed, 18 Feb 2026 05:17:35 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://w3htmlschool.com/wp-content/uploads/2025/08/cropped-Untitled-design-1-32x32.webp w3htmlschool https://w3htmlschool.com/ 32 32 How to Check Python Version – A Quick Guide https://w3htmlschool.com/howto/how-to-check-python-version-a-quick-guide/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-check-python-version-a-quick-guide Wed, 12 Feb 2025 12:40:10 +0000 https://w3htmlschool.com/?p=6953 How to Check Python Version – A Quick Guide If you are learning Python programming, installing libraries like NumPy, Pandas, or Django, or working on a machine learning project, the…

The post How to Check Python Version – A Quick Guide appeared first on w3htmlschool.

]]>

How to Check Python Version – A Quick Guide

If you are learning Python programming, installing libraries like NumPy, Pandas, or Django, or working on a machine learning project, the first thing you should know is your Python version.

Different projects require different Python versions. Some packages work only on Python 3.8+, while older systems may still use Python 2.7.

In this quick guide, you will learn:

  • How to check Python version on Windows

  • How to check Python version on Mac

  • How to check Python version on Linux

  • How to check Python version inside VS Code

  • How to fix common version errors

Let’s start.

Why Checking Python Version is Important

Before installing packages using:

pip install package-name

You should verify your Python version because:

  • Some libraries do not support older versions

  • Python 2 is no longer supported

  • Virtual environments may use different versions

  • Deployment servers may require specific versions

How to Check Python Version on Windows

Method 1: Using Command Prompt

Step 1:

Press Windows + R

Step 2:

Type:

cmd

Step 3:

In Command Prompt, type:

python --version

//OR

python -V

Example Output:

Python 3.12.1

That means Python 3.12.1 is installed on your system.

If That Doesn’t Work

Try:

py --version

On Windows, the py launcher is commonly used.

How to Check Python Version on Mac

Step 1:

Open Terminal

Step 2:

Type:

python3 --version

//Mac usually uses:

python --version

//for older versions.

Example Output:

Python 3.11.6

How to Check Python Version on Linux

Open terminal and type:

python3 --version

If multiple versions exist:

which python

//or

which python3

This shows the installation path.

How to Check Python Version Inside Python

You can also check Python version inside the interpreter.

Step 1:

Open terminal and type:

python

Step 2:

Inside Python shell:

import sys
print(sys.version)

Output Example:

3.12.1 (main, Jan 10 2026, ...)

This method is useful in coding environments.

How to Check Python Version in VS Code

If you use VS Code:

Method 1:

Look at bottom-left corner → Python version is displayed.

Method 2:

Press:

Ctrl + Shift + P

//Search for:

Python: Select Interpreter

You will see installed versions.

How to Check Python Version in Jupyter Notebook

Inside notebook cell:

!python --version
//OR
import sys
sys.version

Very useful for data science learners.

How to Check Pip Version

Since pip is used to install packages, check it using:

pip --version

Example output:

pip 24.0 from Python 3.12
 
This also tells you which Python version pip is connected to.

What is the Latest Python Version in 2026?

As of 2026, Python 3.12 and 3.13 are commonly used.

You should always use the latest stable version unless your project requires an older version.

Common Errors and Fixes

Error 1: “Python is not recognized”

Solution:

  • Add Python to PATH during installation

  • Reinstall Python and check “Add Python to PATH”

Error 2: Multiple Python Versions Installed

Check all versions:

 
where python   (Windows)
which python   (Mac/Linux)

//Use specific version:

python3.11 --version

Bonus: How to Check Installed Python Packages

To see installed libraries:

pip list

To check specific package version:

pip show numpy

Best Practice for Developers

  • Use Python 3 (never Python 2)

  • Use virtual environments

  • Keep Python updated

  • Match Python version with production server

FAQ

How do I check Python version quickly?

Use:

python --version

What is the difference between python and python3?

Some systems use python for older versions and python3 for modern Python 3 versions.

Why does my system show Python 2.7?

Older operating systems still include Python 2 by default. Install Python 3 manually.

The post How to Check Python Version – A Quick Guide appeared first on w3htmlschool.

]]> How to Run a Python Script – A Beginner’s Guide https://w3htmlschool.com/howto/how-to-run-a-python-script-a-beginners-guide/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-run-a-python-script-a-beginners-guide Wed, 12 Feb 2025 12:20:39 +0000 https://w3htmlschool.com/?p=6943 How to Run a Python Script – A Beginner’s Guide If you’re learning Python, one of the first things you need to understand is how to run a Python script.…

The post How to Run a Python Script – A Beginner’s Guide appeared first on w3htmlschool.

]]>

How to Run a Python Script – A Beginner's Guide

If you’re learning Python, one of the first things you need to understand is how to run a Python script. Writing code is only half the job — executing it correctly is what brings your program to life.

This beginner-friendly guide explains how to run a Python script on Windows, macOS, and Linux. You’ll also learn how to execute Python files using Command Prompt, Terminal, VS Code, PyCharm, and IDLE.

By the end of this guide, you’ll confidently know how to run a Python script in any environment.

What Is a Python Script?

A Python script is a file containing Python code. These files usually have the extension:

filename.py
//For example:

hello.py
calculator.py
app.py

When you run a Python script, the Python interpreter reads the file and executes the instructions line by line

Step 1: Install Python

Before learning how to run a Python script, you must install Python.

Check if Python Is Already Installed

Open Command Prompt (Windows) or Terminal (Mac/Linux) and type:

 
python --version
or

python3 --version

If Python is installed, you will see something like:

Python 3.12.1

If not, download it from:

https://www.python.org/downloads/

During installation on Windows, make sure to check:

✔ Add Python to PATH

This ensures you can run Python from the command line.

Step 2: Create a Python Script

Create a file named:

 
hello.py

Add this code:

 
print("Hello, World!")

Save the file.

Now you are ready to run a Python script.

How to Run a Python Script on Windows

There are multiple ways to run a Python script on Windows.

Method 1: Run Python Script Using Command Prompt (CMD)

Step 1: Open Command Prompt

Win + R → type cmd → Press Enter

Step 2: Navigate to File Location

Use the cd command:

cd Desktop
//Or:
cd C:\Users\YourName\Desktop

Step 3: Run the Python Script

Use the following command to run your script:

python hello.py

If you have multiple versions of Python installed, you might need to use:

python3 hello.py

Output:

Hello, World!

Method 2: Double Click the .py File

You can double-click the file.

⚠ However:

  • The window may close immediately.

  • Not recommended for beginners.

Better option:

input("Press Enter to exit")

Method 3: Run Python Script in IDLE

DLE comes installed with Python.

Steps:

  1. Open IDLE

  2. Click File → Open

  3. Select hello.py

  4. Click Run → Run Module (F5)

How to Run a Python Script on macOS

Open Terminal.

Navigate to File

 cd Desktop

Run Script

 python3 hello.py

//On macOS, always use python3.

How to Run a Python Script on Linux

Open Terminal.

Run:

python3 hello.py

Linux systems usually use python3 by default.

Running Python Script Using VS Code

VS Code is very popular among developers.

Steps:

  1. Install VS Code

  2. Install Python extension

  3. Open folder

  4. Open .py file

  5. Click Run button

Or use terminal inside VS Code:

python hello.py

Running a Python Script in PyCharm

Step 1: Install PyCharm

Download and install PyCharm.

Step 2: Open or Create a Python Script

  1. Open PyCharm and create a new Python project.
  2. Inside the project folder, create a new file (hello.py).

Step 3: Run the Script

  1. Right-click on hello.py.
  2. Click Run ‘hello’.
  3. The output will appear in the Run window.

Best Practice: Use PyCharm’s built-in terminal (Alt + F12) to run scripts manually.

Different Ways to Run a Python Script

MethodBest ForDifficultyRecommended
Command PromptBeginnersEasy✅ Yes
VS CodeDevelopersEasy✅ Yes
PyCharmLarge ProjectsMedium✅ Yes
IDLEBasic LearningEasyYes
Double ClickQuick RunEasy❌ Not Recommended

How Python Executes a Script

When you run a Python script:

  1. Python interpreter reads the file

  2. Converts code to bytecode

  3. Executes line by line

  4. Displays output

Understanding this helps when debugging errors.

Running Python Script with Arguments

You can pass arguments from command line.

Example:

 

import sys

print("Script name:", sys.argv[0])
print("Argument:", sys.argv[1])

Run:

 python hello.py Test

Output:

 Script name: hello.py
Argument: Test

Running Python Script Automatically

You can make script executable (Linux/macOS).

Add at top:

#!/usr/bin/env python3
//Then:

chmod +x hello.py
./hello.py

Common Errors When Running Python Script

1. Python Not Recognized

Error:

'python' is not recognized

Solution:
Reinstall Python and check “Add to PATH”.

2. File Not Found

Error:

 
No such file or directory

Solution:
Make sure you are in correct folder using cd.

3. Indentation Error

Python uses indentation.

Wrong:

 
if True:
print("Hello")

Correct:

 
if True:
print("Hello")

Running Python Script vs Interactive Mode

FeatureScript ModeInteractive Mode
File SavedYesNo
Best ForProjectsTesting
ReusableYesNo
Beginner FriendlyYesYes
//Interactive mode:

python

Best IDEs to Run Python Script

IDEFreeBeginner FriendlyAdvanced Features
VS CodeYesYesYes
PyCharmCommunityYesYes
IDLEYesYesLimited
JupyterYesYesData Science

Real-World Example: Running a Calculator Script

//Create:

num1 = int(input("Enter first number: "))
num2 = int(input("Enter second number: "))

print("Sum:", num1 + num2)
//Run:

python calculator.py

Security Tip When Running Python Scripts

Never run unknown Python scripts downloaded from the internet.

They can:

  • Delete files

  • Access personal data

  • Install malware

Always review code before running.

FAQs – How to Run a Python Script

1. How do I run a Python script from command line?

Use:

python filename.py

Or:

 
python3 filename.py

2. Why is Python not recognized in CMD?

Because Python is not added to PATH. Reinstall Python and check “Add to PATH”.

3. Can I run Python without installing?

Yes, use online compilers like:

  • Replit

  • Google Colab

4. What is the difference between python and python3?

Some systems have Python 2 and Python 3 installed separately.

5. How do I stop a running Python script?

The post How to Run a Python Script – A Beginner’s Guide appeared first on w3htmlschool.

]]> How to Make a Table in HTML: A Step-by-Step Guide https://w3htmlschool.com/howto/html-how-to-make-a-table/?utm_source=rss&utm_medium=rss&utm_campaign=html-how-to-make-a-table Sat, 10 Feb 2024 09:44:29 +0000 https://w3htmlschool.com/?p=4774 How to Make a Table in HTML: A Step-by-Step Guide Tables in HTML are a powerful way to display data in rows and columns. This guide will walk you through…

The post How to Make a Table in HTML: A Step-by-Step Guide appeared first on w3htmlschool.

]]>

How to Make a Table in HTML: A Step-by-Step Guide

Tables in HTML are a powerful way to display data in rows and columns. This guide will walk you through the process of creating tables, adding headers, merging cells, and using CSS to style them effectively.

 

Introduction: Why HTML Tables Are Important

Tables are used to organize data in rows and columns, making information easy to read and understand. As a beginner learning HTML, tables help you display structured data clearly.

You will commonly see HTML tables used for:

  • Student marksheets

  • Pricing tables

  • Employee details

  • Product comparison tables

  • Reports and dashboards

In this guide, you’ll learn how to make a table in HTML from scratch, explained clearly like a classroom lesson—no prior knowledge required.

What Is an HTML Table?

An HTML table is used to display data in a grid format made of:

  • Rows

  • Columns

  • Cells

HTML tables are created using a combination of specific tags such as:

  • <table>

  • <tr>

  • <th>

  • <td>

Basic Structure of an HTML Table

Before writing code, let’s understand the structure:

Table
 ├── Table Row
 │    ├── Table Header
 │    └── Table Data

Step 1: Create a Simple HTML Table

Example Code

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>22</td>
    <td>Delhi</td>
  </tr>
  <tr>
    <td>Anita</td>
    <td>21</td>
    <td>Mumbai</td>
  </tr>
</table>

Output Explanation

  • <table> creates the table

  • <tr> creates a row

  • <th> creates a header cell (bold by default)

  • <td> creates a data cell

  • border="1" adds a visible border (for learning only)

Step 2: Understanding Table Tags

<table>

Defines the table container.

<tr> (Table Row)

Creates a horizontal row.

<th> (Table Header)

Used for headings (bold & centered by default).

<td> (Table Data)

Used for regular data cells.

 

Step 3: Add Table Caption (Optional but Useful)

Example

<table border="1">
  <caption>Student Details</caption>
  <tr>
    <th>Name</th>
    <th>Class</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>10</td>
    <td>85</td>
  </tr>
</table>

Explanation

The <caption> tag gives a title to the table, improving readability and accessibility.

 

Step 4: Add Table Borders Using CSS (Best Practice)

Old Method:

<table border="1">

Modern Method (Recommended):

HTML

<table class="student-table">

CSS

.student-table {
  border-collapse: collapse;
  width: 100%;
}

.student-table th,
.student-table td {
  border: 1px solid #333;
  padding: 10px;
  text-align: center;
}

Why CSS Is Better

  • Cleaner HTML

  • More control over design

  • Professional standard

  • SEO-friendly

Step 5: Table Head, Body, and Footer (Professional Tables)

<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Laptop</td>
      <td>₹50,000</td>
    </tr>
    <tr>
      <td>Mobile</td>
      <td>₹20,000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Total</td>
      <td>₹70,000</td>
    </tr>
  </tfoot>
</table>

✅ Explanation

  • <thead> → Table header

  • <tbody> → Main data

  • <tfoot> → Summary/footer

Step 6: Merge Cells Using Colspan and Rowspan

Merge Columns (colspan)

<td colspan="2">Total</td>

 Merge Rows (rowspan)

<td rowspan="2">Math</td>
Example
<table border="1">
  <tr>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td rowspan="2">Math</td>
    <td>90</td>
  </tr>
  <tr>
    <td>95</td>
  </tr>
</table>

HTML Tables vs CSS Layouts (Important Concept)

FeatureHTML TableCSS Layout
Used ForTabular dataPage layout
SEO Friendly✅ Yes✅ Yes
Responsive❌ Limited✅ Better
Recommended for Layout❌ No✅ Yes

Use tables only for data, not page layout.

Common Beginner Mistakes

  • Forgetting <tr> inside <table>
  •  Using tables for page layout
  • Missing closing tags
  • Not using <th> for headers
  • Overusing border attribute

Best Practices for HTML Tables

  • Use tables only for data
  •  Use CSS for styling
  •  Add <caption> for clarity 
  • Keep tables simple
  • Use <thead>, <tbody>, <tfoot>

Real-World Example: Student Marksheet Table

<table class="marks-table">
  <caption>Student Marksheet</caption>
  <tr>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>English</td>
    <td>88</td>
  </tr>
  <tr>
    <td>Science</td>
    <td>92</td>
  </tr>
</table>

FAQs: HTML Tables

1. How do I create a table in HTML?

Use <table>, <tr>, <th>, and <td> tags.

2. Is the border attribute still used?

It works, but CSS is recommended.

3. Can tables be responsive?

Yes, with CSS and media queries.

4. What is the difference between <th> and <td>?

<th> is for headings; <td> is for data.

5. Should I use tables for layout?

No. Use CSS layouts like Flexbox or Grid.

The post How to Make a Table in HTML: A Step-by-Step Guide appeared first on w3htmlschool.

]]> How to comment in html ? https://w3htmlschool.com/howto/how-to-comment-in-html/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-comment-in-html Fri, 09 Feb 2024 16:27:03 +0000 https://w3htmlschool.com/?p=4768 How to comment in html ? HTML comments allow developers to add notes within the HTML code that are ignored by web browsers. Comments are useful for documenting code, explaining…

The post How to comment in html ? appeared first on w3htmlschool.

]]>

How to comment in html ?

HTML comments allow developers to add notes within the HTML code that are ignored by web browsers. Comments are useful for documenting code, explaining functionality, and leaving reminders for yourself or other developers who may work on the project. In this guide, I’ll explain how to add comments in HTML, their syntax, best practices, and provide examples to illustrate their usage effectively.

Syntax of HTML Comments:

HTML comments are enclosed within <!-- and --> delimiters. Anything between these delimiters is treated as a comment and is not rendered by the browser. Here’s the basic syntax:

<!-- This is a comment -->

HTML comments can span multiple lines and can contain any text, including special characters and tags.

Single-Line Comments:

Single-line comments are typically used for brief explanations or annotations within the code. They are added on a single line and terminate at the end of the line. Here’s an example:

<!-- This is a single-line comment -->

Multi-Line Comments:

Multi-line comments are suitable for longer explanations or commenting out blocks of code. They can span multiple lines and are enclosed within the <!-- and --> delimiters. Here’s an example:

<!--
    This is a multi-line comment.
    It can span across multiple lines.
    Comments are ignored by web browsers.
-->

Commenting Out Code:

HTML comments are commonly used to temporarily disable or “comment out” sections of code without removing them entirely. This is helpful for debugging, testing alternative solutions, or temporarily disabling functionality. For example:

<!-- <p>This paragraph is temporarily disabled.</p> -->

In this example, the <p> element is commented out, meaning it won’t be rendered by the browser, but the code remains intact for future reference.

Best Practices for Using Comments:

  • Be Concise: Keep comments brief and to the point, focusing on essential information.
  • Use Clear Language: Write comments in clear, understandable language to facilitate collaboration and understanding.
  • Update Regularly: Keep comments up to date with changes to the code to ensure accuracy and relevance.
  • Avoid Redundancy: Only add comments when necessary, avoiding redundant or obvious explanations.
  • Use Comments Sparingly: While comments are valuable for documentation, excessive comments can clutter the code and make it harder to read.

Example: Using Comments in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Comments Example</title>
</head>
<body>
    <!-- This is a comment explaining the purpose of the header -->
    <header>
        <h1>Welcome to my website</h1>
    </header>
    
    <!-- This is a comment explaining the navigation section -->
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    
    <!-- This is a comment explaining the main content section -->
    <section>
        <h2>About Us</h2>
        <p>Hi There </p>
    </section>
    
    <!-- This is a comment explaining the footer -->
    <footer>
        <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

The post How to comment in html ? appeared first on w3htmlschool.

]]> How to add an image in html ? https://w3htmlschool.com/howto/how-to-add-an-image-in-html/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-add-an-image-in-html Fri, 09 Feb 2024 15:49:13 +0000 https://w3htmlschool.com/?p=4762 How to Add an Image in HTML: A Step-by-Step Guide The Basics of Adding Images in HTML In HTML, images are added using the <img> tag. This tag is self-closing,…

The post How to add an image in html ? appeared first on w3htmlschool.

]]>

How to Add an Image in HTML: A Step-by-Step Guide

The Basics of Adding Images in HTML

In HTML, images are added using the <img> tag. This tag is self-closing, meaning it does not require a closing tag.

Basic Syntax of the img Tag

The <img> tag requires the following attributes:

AttributeDescriptionRequired
srcSpecifies the path to the image fileYes
altProvides alternative text for the imageYes
width/heightOptional attributes to define image dimensionsNo

Example:

<img src="example.jpg" alt="Description of the image" width="500">

Adding Images with Different File Paths

Local File

Use a relative path if the image is in the same directory as the HTML file.

<img src="image.jpg" alt="Local image">

Subfolder

If the image is in a subfolder, specify the folder name in the path.

<img src="images/photo.jpg" alt="Subfolder image">

 Absolute URL

Use the full URL for images hosted on external servers.

<img src="https://example.com/image.jpg" alt="Remote image">

 Responsive Images

To make images responsive (adjustable based on screen size), use CSS or set the width attribute to 100%.

Example:

<img src="example.jpg" alt="Responsive image" style="max-width: 100%; height: auto;">

Best Practices for Adding Images

Always Include alt Text:

Always Include alt Text:

Describe the image for accessibility and SEO.

Use meaningful text (e.g., “Golden Retriever puppy playing in the park”).

Optimize Image Size:

Use tools to compress images without losing quality to improve page load times.

Common tools: TinyPNG, ImageOptim.

Use Modern Formats:

Consider using formats like WebP for faster loading and smaller file sizes.

Lazy Loading:

  • Defer loading images outside the viewport to improve performance.
<img src="image.jpg" alt="Lazy loaded image" loading="lazy">

Adding a Clickable Image

You can wrap the <img> tag inside an <a> tag to make the image clickable.

Example:

<a href="https://example.com">
    <img src="example.jpg" alt="Clickable image" width="300">
</a>

Using Decorative Images

If the image is purely decorative, you can leave the alt attribute empty. Avoid this for informative images.

Example:

<img src="decorative.jpg" alt="" role="presentation">

Example: Full HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adding an Image</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>Here is an image of a sunset:</p>
    <img src="sunset.jpg" alt="Beautiful sunset over the mountains" width="600" loading="lazy">
</body>
</html>
[WpProQuiz 6]

The post How to add an image in html ? appeared first on w3htmlschool.

]]> How to Center Text in HTML: Complete Step-by-Step Guide with Examples https://w3htmlschool.com/howto/how-to-center-text-in-html/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-center-text-in-html Fri, 09 Feb 2024 14:10:26 +0000 https://w3htmlschool.com/?p=4748 Introduction: Why Text Centering Matters in Web Design Text alignment is one of the first things users notice on a website. Well-aligned text makes content easy to read, visually balanced,…

The post How to Center Text in HTML: Complete Step-by-Step Guide with Examples appeared first on w3htmlschool.

]]>

Introduction: Why Text Centering Matters in Web Design

Text alignment is one of the first things users notice on a website. Well-aligned text makes content easy to read, visually balanced, and professional-looking.

In real-life websites, text centering is commonly used in:

  • Website headings and banners

  • Buttons and call-to-action text

  • Portfolio hero sections

  • Login forms and cards

  • Landing pages

As a beginner learning HTML, understanding how to center text in HTML correctly is a foundational skill you’ll use again and again.

In this guide, you’ll learn all the ways to center text, which methods are outdated, and which are recommended by industry standards.

What Does “Center Text in HTML” Mean?

When we say HTML text center, we usually mean:

  • Aligning text horizontally in the middle of its container

This is done using CSS text alignment, not modern HTML tags.

Methods to Center Text in HTML (Step-by-Step)

Let’s go through every method—starting from outdated approaches to modern best practices.

A. Using the <center> Tag ( Deprecated – Not Recommended)

 

What Is the <center> Tag?

The <center> tag was used in old HTML to center text.

 Why It’s Not Recommended

  • Deprecated in HTML5

  • Not supported in modern standards

  • Mixes content with presentation

  • Bad for SEO and accessibility

 Example (Do Not Use)

<center>This text is centered</center>

Output Explanation

The text appears centered, but this method should never be used in professional websites.

B. Using Inline CSS (text-align: center)

Explanation

Inline CSS applies styles directly inside an HTML element.

Example

<p style="text-align: center;">
  This text is centered using inline CSS.
</p>

Output Explanation

The paragraph text is centered horizontally.

 When to Use

  • Quick testing

  • Small demos

Why Not Ideal

  • Hard to maintain

  • Not reusable

  • Not scalable

C. Using Internal CSS (Better Approach)

Explanation

Internal CSS is written inside a <style> tag in the <head> section.

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .center-text {
      text-align: center;
    }
  </style>
</head>
<body>

<p class="center-text">This text is centered using internal CSS.</p>

</body>
</html>

Output Explanation

The text aligns to the center using a reusable CSS class.

D. Using External CSS ( Best Practice)

Explanation

External CSS keeps styling in a separate file, which is clean, professional, and SEO-friendly.

HTML File

<p class="center-text">This text is centered using external CSS.</p>

CSS File (style.css)

.center-text {
  text-align: center;
}

Output Explanation

Text is centered cleanly, and styles can be reused across multiple pages.

Why This Is Best

  • Clean code

  • Easy maintenance

  • Industry standard

  • SEO-friendly

Centering Text in Common HTML Elements

Center Text Inside a Div

<div style="text-align: center;">
  Centered text inside a div
</div>

Center Text in a Button

<button style="text-align: center;">
  Click Me
</button>

💡 Button text is centered by default, but text-align helps when customizing.

Center Headings

<h1 style="text-align: center;">
  Centered Heading
</h1>

Center Paragraph Text

 
<p style="text-align: center;">
  This paragraph is centered.
</p>

CSS vs HTML Text Alignment (Important for SEO)

FeatureHTML AlignmentCSS Alignment
Modern Standard❌ No✅ Yes
SEO Friendly❌ Poor✅ Excellent
Reusable❌ No✅ Yes
Clean Code❌ No✅ Yes
Recommended❌ No✅ Yes

Conclusion: Always use CSS text-align center instead of HTML tags.

Common Beginner Mistakes

  •  Forgetting to add text-align: center
    Using <center> tag
  • Mixing HTML and CSS styles
  •  Confusing horizontal centering with vertical centering
  • Applying styles to the wrong element

Best Practices (Industry Standard)

  • Always use CSS
  • Create reusable classes
  • Keep HTML clean
  • Use external CSS files
  • Write readable,
  • maintainable code

Real-World Example: Portfolio Hero Section

HTML

<section class="hero">
  <h1>Hi, I’m Arvinder</h1>
  <p>Web Developer & Trainer</p>
  <button>View My Work</button>
</section>

CSS

.hero {
  text-align: center;
  padding: 50px;
}

Result

A clean, professional, centered hero section—commonly used in portfolios and landing pages.

FAQs: HTML Text Centering

1. How do I center text in HTML?

Use CSS:

text-align: center;

2. Is the <center> tag still used?

No. It is deprecated and should not be used.

3. Can I center text without CSS?

Technically yes (using <center>), but it is not recommended.

4. How do I center text inside a div?

Apply:

div {
  text-align: center;
}

5. What is the best way to center text in HTML?

Using external CSS with reusable classes.

The post How to Center Text in HTML: Complete Step-by-Step Guide with Examples appeared first on w3htmlschool.

]]> What is html? https://w3htmlschool.com/howto/what-is-html-2/?utm_source=rss&utm_medium=rss&utm_campaign=what-is-html-2 Fri, 09 Feb 2024 13:58:15 +0000 https://w3htmlschool.com/?p=4743 What is HTML? HTML Defined HTML stands for HyperText Markup Language. It is the standard language used to create and design web pages. HTML structures content on the web by…

The post What is html? appeared first on w3htmlschool.

]]>

What is HTML?

HTML Defined

HTML stands for HyperText Markup Language. It is the standard language used to create and design web pages. HTML structures content on the web by using a system of elements and tags, making it possible to display text, images, videos, links, and other media in a browser.

Key Features of HTML

  • HyperText: Refers to the ability to link text and resources across different pages or websites using hyperlinks.
  • Markup Language: A system for annotating documents, defining the structure and presentation of web content.
  • Platform-Independent: Works on any device with a web browser.
  • Foundation of the Web: It is the backbone of web development, enabling developers to create structured, readable content.

Basic Structure of an HTML Document

An HTML document is made up of elements enclosed in tags. Here is a basic example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Introduction to HTML</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>This is a simple HTML document.</p>
</body>
</html>

Explanation:

  1. <!DOCTYPE html>: Declares the document type and version of HTML.
  2. <html>: The root element that contains all the other elements.
  3. <head>: Contains metadata like the title, character encoding, and links to styles or scripts.
  4. <body>: Contains the visible content of the page, such as headings, paragraphs, and images.

What Can HTML Do?

Text Formatting: Display and style headings, paragraphs, and lists.

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Images and Media: Embed images, videos, and audio.

<img src="image.jpg" alt="A description of the image">

Links: Create hyperlinks to navigate to other pages.

<a href="https://www.example.com">Visit Example</a>

Tables: Organize data in rows and columns.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

Forms: Collect user input.

<form action="/submit">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>

Best Practices When Writing HTML

Use Semantic Tags

Use Semantic Tags: Use tags that convey meaning (e.g., <header>, <footer>, <main>).

 
<header>
    <h1>Website Header</h1>
</header>

Close All Tags: Ensure every opening tag has a corresponding closing tag.

<p>This is a paragraph.</p>

Indentation: Properly indent your code for readability.

Alt Text for Images: Provide meaningful descriptions for accessibility.

<img src="image.jpg" alt="A scenic view of the mountains">

Validate Your Code: Use tools like the W3C Validator to check for errors.

The post What is html? appeared first on w3htmlschool.

]]> PostgreSQL vs MySQL: A Comprehensive Comparison https://w3htmlschool.com/howto/postgresql-vs-mysql/?utm_source=rss&utm_medium=rss&utm_campaign=postgresql-vs-mysql Wed, 07 Feb 2024 12:05:05 +0000 https://w3htmlschool.com/?p=4716 PostgreSQL vs MySQL: A Comprehensive Comparison Overview of PostgreSQL and MySQL PostgreSQL Definition: PostgreSQL is an advanced, open-source object-relational database management system (ORDBMS) that focuses on extensibility and SQL compliance.…

The post PostgreSQL vs MySQL: A Comprehensive Comparison appeared first on w3htmlschool.

]]>

PostgreSQL vs MySQL: A Comprehensive Comparison

Overview of PostgreSQL and MySQL

PostgreSQL

  • Definition: PostgreSQL is an advanced, open-source object-relational database management system (ORDBMS) that focuses on extensibility and SQL compliance.
  • Key Features:
    • Supports complex queries and advanced data types.
    • ACID-compliant for robust transaction handling.
    • Highly extensible (custom functions, data types).
    • Ideal for applications requiring complex operations or analytical tasks.

MySQL

  • Definition: MySQL is a widely-used open-source relational database management system (RDBMS) known for its speed and reliability.
  • Key Features:
    • Optimized for web applications.
    • Supports multiple storage engines.
    • Simpler to set up and use.
    • Great for lightweight applications and CRUD operations.

Key Differences Between PostgreSQL and MySQL

AspectPostgreSQLMySQL
TypeObject-Relational Database (ORDBMS)Relational Database (RDBMS)
SQL ComplianceHighly compliant with SQL standardsPartially compliant
PerformanceExcels in complex queries, analytical workloadsExcels in simple read-heavy operations
Data TypesExtensive support for custom types, JSON, arraysLimited support for advanced data types
ACID ComplianceFully ACID-compliant in all configurationsACID compliance depends on the storage engine (e.g., InnoDB)
IndexingSupports advanced indexing like GIN, GiST, and BRINLimited advanced indexing options
ReplicationAsynchronous and synchronous replication supportedPrimarily asynchronous replication
ExtensionsHighly extensible with custom functions and pluginsLimited extensibility
CommunitySmaller but highly activeLarger and broader
Ease of UseSteeper learning curveEasier for beginners
Use CasesBest for analytics, geospatial data, and complex systemsIdeal for web apps, CMS, and e-commerce platforms

When to Use PostgreSQL

  • Advanced Features Required: Applications needing advanced data types (e.g., JSONB, arrays) or complex queries.
  • Data Analytics: Scenarios with complex data analysis, reporting, or scientific computations.
  • Geospatial Applications: With its PostGIS extension, PostgreSQL is excellent for spatial and geographical data.
  • Customizable Solutions: Suitable for use cases requiring custom functions or data types.

When to Use MySQL

  • Web Applications: Ideal for websites, blogs, and CMS platforms like WordPress.
  • Read-Heavy Workloads: Efficient for applications with high volumes of read operations.
  • Simplicity: Suitable for projects where ease of use and setup are priorities.
  • E-commerce Platforms: Popular in applications like Magento, Shopify, and others.

Advantages of PostgreSQL

  • Feature-Rich: Advanced support for SQL features, custom types, and analytical functions.
  • Standards Compliance: Fully adheres to SQL standards, ensuring reliability and consistency.
  • Extensibility: Highly customizable, with support for user-defined functions and extensions.

Advantages of MySQL

  1. Speed and Simplicity: Known for being lightweight and faster for simple operations.
  2. Widespread Adoption: A large community and excellent third-party tool support.
  3. Flexibility: Multiple storage engines allow flexibility in optimization.

Performance Comparison

  • Read-Heavy Operations: MySQL often outperforms PostgreSQL due to its optimized storage engines.
  • Write-Heavy Operations: PostgreSQL offers better performance with concurrent transactions.
  • Complex Queries: PostgreSQL excels in handling complex and analytical queries.
[WpProQuiz 38]

The post PostgreSQL vs MySQL: A Comprehensive Comparison appeared first on w3htmlschool.

]]> How to Delete Facebook Account Permanently ? https://w3htmlschool.com/facebook/how-to-delete-facebook-account-permanently/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-delete-facebook-account-permanently Tue, 20 Jun 2023 05:57:52 +0000 https://w3htmlschool.com/?p=3894 How to Delete Facebook Account Permanently (2025 Guide) Are you ready to take control of your digital privacy and permanently delete your Facebook account? Whether it’s because of privacy concerns,…

The post How to Delete Facebook Account Permanently ? appeared first on w3htmlschool.

]]>

How to Delete Facebook Account Permanently (2025 Guide)

Are you ready to take control of your digital privacy and permanently delete your Facebook account? Whether it’s because of privacy concerns, a need to reduce screen time, or simply a desire to step away from social media, many users are choosing to say goodbye to Facebook in 2025.

In this comprehensive guide, we’ll walk you through:

  • The difference between deactivating and deleting your account

  • What happens when you permanently delete your Facebook account

  • How to back up your Facebook data

  • Step-by-step instructions to delete your account from desktop and mobile

  • Tips to ensure your data is fully removed

  • FAQs and common issues users face

  • How to delete Facebook-linked apps and services

Let’s dive in!

Deactivating vs. Deleting Your Facebook Account

Before we go further, let’s clarify the two available options:

FeatureDeactivate AccountDelete Account Permanently
Temporary✅❌
Can reactivate anytime✅❌
Profile hidden from others✅✅
Keeps Messenger access✅❌
Deletes all data❌✅
Time to reverse decisionN/A30 days

Important: If you’re unsure, start with deactivation. You can always come back and delete later.

What Happens When You Delete Your Facebook Account Permanently?

When you choose to delete your Facebook account permanently:

  • You lose access to your profile, photos, posts, videos, and everything else you’ve added.

  • You cannot reactivate the account.

  • Messages you sent remain visible to friends.

  • Pages you solely manage are deleted.

  • Facebook backups and data copies are erased within 90 days.

Step 1: Back Up Your Facebook Data

Before deleting, download a copy of your data, including photos, messages, and more.

Here’s how to download your Facebook data:

  1. Go to Settings & Privacy > Settings.

  2. Select Your Facebook Information on the left.

  3. Click Download your information.

  4. Choose Date range, Format (HTML or JSON), and Media Quality.

  5. Select the data types (Photos, Comments, Messages, etc.).

  6. Click Create File.

  7. Facebook will notify you once the file is ready.

Step 2: Delete Facebook Account Permanently (Desktop)

Follow these steps:

  1. Open https://www.facebook.com/settings.

  2. Click Your Facebook Information.

  3. Choose Deactivation and Deletion.

  4. Select Delete Account, then click Continue to Account Deletion.

  5. Enter your password to confirm.

  6. Click Delete Account.

✅ You’ll have 30 days to cancel deletion. After that, your data is gone forever.

Step 3: Delete Facebook Account Permanently (Mobile App)

On Android/iOS:

  1. Open the Facebook App.

  2. Tap the menu icon (☰).

  3. Go to Settings & Privacy > Settings.

  4. Tap Personal and account information.

  5. Tap Account ownership and control.

  6. Tap Deactivation and deletion.

  7. Choose Delete Account and continue.

  8. Enter your password and confirm.

Step 4: Remove Facebook App & Messenger

Deleting your account doesn’t automatically remove the apps from your device. Do this manually:

  • Android: Long press the app > Tap Uninstall.

  • iOS: Tap and hold the app > Tap the X or choose Remove App.

Also uninstall Facebook Messenger, which works separately from the main app.

Step 6: Delete Facebook Login from Third-Party Apps

If you’ve used “Login with Facebook” for apps like Spotify or Instagram:

  • Go to Settings > Apps and Websites

  • Remove all apps using Facebook Login.

  • Visit those apps and update your login method (email/password or Google login).

Step 7: Clear Facebook Cache from Browsers

Even after deletion, browser cache may retain some of your activity.

Clear Facebook cookies:

  • In Chrome: Settings > Privacy and Security > Clear Browsing Data

  • In Firefox: Settings > Privacy & Security > Cookies and Site Data > Manage Data

Step 8: Wait 30 Days Without Logging In

After requesting account deletion, Facebook gives you 30 days to change your mind. If you log in during this period, deletion is canceled.

So stay logged out until you receive confirmation that your account has been permanently deleted.

Common Questions About Deleting Facebook (FAQ)

Q1. Can I recover my Facebook account after deletion?

No. Once 30 days pass after requesting deletion, the account is permanently removed and cannot be recovered.

Q2. Will people still see my messages?

Yes. Messages you sent to others will remain in their inbox unless they delete them.

Q3. Can I delete Messenger without deleting Facebook?

You can deactivate Messenger separately only if your Facebook account is deactivated. You cannot delete Messenger alone.

Q4. How do I delete a Facebook Page?

Before deleting your main account, go to each Page > Settings > Remove Page > Delete Page.

Q5. Does deleting my Facebook account delete Instagram and WhatsApp too?

No. You must delete those accounts separately, even though they are owned by Meta.

The post How to Delete Facebook Account Permanently ? appeared first on w3htmlschool.

]]> How do APIs work? https://w3htmlschool.com/api/how-do-apis-work/?utm_source=rss&utm_medium=rss&utm_campaign=how-do-apis-work Mon, 15 May 2023 12:32:34 +0000 https://w3htmlschool.com/?p=3883 How API Works: A Step-by-Step Guide What is an API? API stands for Application Programming Interface. It is a set of rules and protocols that allow different software applications to…

The post How do APIs work? appeared first on w3htmlschool.

]]>

How API Works: A Step-by-Step Guide

What is an API?

API stands for Application Programming Interface. It is a set of rules and protocols that allow different software applications to communicate with each other. APIs act as intermediaries, enabling seamless data exchange between systems, applications, or devices.

Key Components of an API

  • Request: The client (e.g., a browser or application) sends a request to the server, asking for specific data or functionality.
  • Endpoint: A URL where the API can be accessed.
  • Methods: Defines the type of action to perform, commonly:
    • GET: Retrieve data.
    • POST: Send data.
    • PUT: Update data.
    • DELETE: Remove data.
  • Response: The server processes the request and sends back the requested data or a status code.

How Does an API Work?

Here is a step-by-step explanation of the API process:

  1. Client Initiates a Request:
    A user interacts with a client application (e.g., a weather app) and requests data (e.g., today’s weather).

  2. API Request Sent:
    The application sends an HTTP request to the API endpoint, including required parameters and headers.

  3. Server Processes Request:
    The server hosting the API receives the request, processes it (e.g., queries a database), and prepares the data.

  4. API Response Returned:
    The server sends back an HTTP response with the requested data or an error message.

  5. Client Displays Data:
    The application processes the response and displays the result to the user.

Diagram: How APIs Work

Here’s a visual representation of how APIs facilitate communication:

+-------------+         HTTP Request          +--------------------+
|    Client   |  ------------------------->   |        API         |
| Application |                                |   (Server-Side)    |
+-------------+         Response Data         +--------------------+

Explanation of the Diagram:

  1. The client application (e.g., a mobile app or web browser) sends an HTTP request to the API.
  2. The API processes the request and retrieves the necessary data from its database or another source.
  3. The API sends the requested data back to the client as an HTTP response.

Example of API in Action

Scenario: Fetching Weather Data Using an API

Client Request:

GET https://api.weather.com/v3/weather/forecast?location=NewYork&apikey=12345

Server Response:

{
    "location": "New York",
    "forecast": "Sunny",
    "temperature": "25°C"
}

Client Displays Data:
The application shows “Sunny, 25°C” to the user.

Types of APIs

  1. REST (Representational State Transfer):
    Most commonly used, lightweight, and stateless.

  2. SOAP (Simple Object Access Protocol):
    Uses XML-based messaging for structured communication.

  3. GraphQL:
    Allows clients to request exactly the data they need, reducing over-fetching.

Best Practices for APIs

Secure Communication

Secure Communication: Use HTTPS to encrypt data.

Error Handling: Provide meaningful status codes and error messages.

Rate Limiting: Prevent abuse by limiting the number of requests a client can make.

Versioning: Maintain multiple versions of the API to ensure backward compatibility.

Documentation: Provide clear and comprehensive API documentation.

[WpProQuiz 39]

The post How do APIs work? appeared first on w3htmlschool.

]]>