How To Guides – Step-by-Step Tutorials for Beginners Simple Tutorials for Smart Learning Wed, 29 Apr 2026 07:04:57 +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 How To Guides – Step-by-Step Tutorials for Beginners 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, […]

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 […]

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 PromptBeginnersEasyYes
VS CodeDevelopersEasyYes
PyCharmLarge ProjectsMediumYes
IDLEBasic LearningEasyYes
Double ClickQuick RunEasyNot 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 […]

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 rows and columns on a webpage.

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.

 

  • Always validate input string
  • Use correct delimiter
  • Handle missing values safely
  • Combine with implode() for reverse operation

Read more HTML Basic Tag

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 FriendlyYesYes
Responsive Limited Better
Recommended for LayoutNo 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 […]

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 […]

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 How to Center Text in HTML: CSS & HTML Methods Explained Text alignment is one of the most fundamental parts […]

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

]]>

How to Center Text in HTML: CSS & HTML Methods Explained

Text alignment is one of the most fundamental parts of web design. Whether you’re building a blog, landing page, or web app, knowing how to center text in HTML helps create clean, visually appealing layouts.

Centered text is commonly used for:

  • Headings and titles
  • Buttons and call-to-actions
  • Cards and UI components
  • Hero sections

If you’re a beginner, you might think there’s only one way to center text—but in reality, there are multiple methods, each suited for different scenarios.

In this complete guide, you’ll learn:

  • How to center text in HTML using simple CSS
  • Advanced techniques using Flexbox and Grid
  • How to center text both vertically and horizontally
  • Common mistakes and best practices

This article is based on your provided content and expanded into a full SEO-optimized guide.

How do you center text in HTML?

You can center text in HTML using CSS properties like text-align: center, Flexbox, or Grid. The most common method is using text-align: center for horizontal alignment.

How do you center text in HTML?

You can center text using CSS like text-align: center; or modern layout methods like Flexbox.

Method 1: Using text-align: center (Most Important)

<p style="text-align: center;">Centered Text</p>

Explanation

This is the simplest and most widely used method to center text in HTML.

  • It works for inline and block-level text
  • Applies horizontal alignment only
  • Best for paragraphs, headings, and simple layouts

 Example

<h1 style="text-align: center;">Welcome to My Website</h1>

This centers the heading across the page.

Method 2: Using CSS Class

<style>
.center {
  text-align: center;
}
</style>

<p class="center">Centered Text</p>

Why Use This?

Instead of repeating inline styles, you can:

  • Keep your code clean
  • Reuse styles across multiple elements
  • Improve maintainability

 Real Use Case

<h2 class="center">About Us</h2>
<p class="center">We provide web development tutorials.</p>

Method 3: Center Text Using Flexbox

<div style="display: flex; justify-content: center;">
  <p>Centered Text</p>
</div>

Explanation

Flexbox is a modern CSS layout system.

  • display: flex enables flexbox
  • justify-content: center centers horizontally

When to Use

  • Centering content inside containers
  • Layout design (cards, sections)
  • Responsive UI

Method 4: Center Text Vertically & Horizontally

<div style="display: flex; justify-content: center; align-items: center; height: 100px;">
  <p>Centered</p>
</div>

Explanation

This method solves a common problem:
Vertical + horizontal centering

  • justify-content: center → horizontal
  • align-items: center → vertical
  • height → required for vertical alignment
How to vertically center text in HTML? Use Flexbox with align-items: center and justify-content: center to align text both vertically and horizontally.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Method 5: Using CSS Grid

<div style="display: grid; place-items: center;">
  <p>Centered Text</p>
</div>

Explanation

CSS Grid is another powerful layout system.

  • place-items: center = vertical + horizontal centering
  • Cleaner than Flexbox for simple centering

Best For

  • Modern layouts
  • Minimal code solutions
  • Responsive design
<h1 style="text-align: center;">
  Centered Heading
</h1>

Method 6: Deprecated <center> Tag

 
<center>Centered Text</center>

Why Not Use It?

  • This tag is deprecated in HTML5
  • Not supported in modern standards
  • Poor for SEO and accessibility

Always use CSS instead

Comparison Table

MethodUse CaseDifficulty
text-alignSimple textEasy
FlexboxLayout controlMedium
GridAdvanced layoutsMedium
center tagDeprecatedNot recommended

Real-World Examples

Centering Headings

<h1 style="text-align: center;">My Blog</h1>

Centering Buttons

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

Centering Content in Cards

<div style="display: flex; justify-content: center; align-items: center; height: 200px;">
  <p>Card Content</p>
</div>

Common Mistakes

Using <center> Tag

Avoid outdated HTML practices

Forgetting Parent Container

Flexbox and Grid require a parent container

Confusing Vertical vs Horizontal

  • text-align → horizontal only
  • Flexbox/Grid → both

Not Setting Height

Vertical centering needs height

Best Practices

  • Use CSS instead of HTML attributes
  •  Prefer Flexbox or Grid for layouts
  • Keep styles reusable with classes
  • Write clean, readable code
  • Test responsiveness

Internal Resources (Recommended Reading)

FAQs: HTML Text Centering

How do I center text in HTML?

Use CSS:

text-align: center;

What is the best way to center text?

text-align: center for simple text
Flexbox/Grid for layouts

Can I center text vertically?

Yes, using Flexbox:

 
align-items: center;

Is the <center> tag still valid?

 No, it is deprecated in HTML5

How to center text in a div?

div {
text-align: center;
}
 

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 […]

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 […]

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 Use MySQL Commands (Complete Beginner 2026) https://w3htmlschool.com/howto/mysql-commands/?utm_source=rss&utm_medium=rss&utm_campaign=mysql-commands https://w3htmlschool.com/howto/mysql-commands/#respond Tue, 03 Aug 2021 16:25:49 +0000 https://w3htmlschool.com/?p=2467 How to Use MySQL Commands (Complete Beginner to Advanced Guide 2026) Introduction MySQL is one of the most powerful and […]

The post How to Use MySQL Commands (Complete Beginner 2026) appeared first on w3htmlschool.

]]>

How to Use MySQL Commands (Complete Beginner to Advanced Guide 2026)

Introduction

MySQL is one of the most powerful and widely used relational database management systems (RDBMS) in the world. It is used by startups, enterprise companies, e-commerce platforms, content management systems, and web applications.

If you are learning:

  • Web Development

  • PHP

  • WordPress

  • Data Analytics

  • Backend Development

  • Full Stack Development

Then understanding MySQL commands is essential.

In this complete guide, you will learn:

  • Basic MySQL commands

  • Intermediate queries

  • Advanced SQL concepts

  • Real-world examples

  • Best practices for performance

  • Commands used in interviews

This article is beginner-friendly but also covers advanced concepts for professionals.

What is MySQL?

MySQL is an open-source relational database management system that stores data in tables.

It uses SQL (Structured Query Language) to:

  • Store data

  • Retrieve data

  • Update data

  • Delete data

  • Manage databases

How to Start MySQL

If installed locally, open terminal and type:

mysql -u root -p

After entering your password, you will enter the MySQL shell.

Basic MySQL Commands (Must Know)

SHOW DATABASES

SHOW DATABASES;

CREATE DATABASE

Creates a new database:

CREATE DATABASE school_db;

USE DATABASE

Select a database:

USE school_db;

DROP DATABASE

Delete a database:

DROP DATABASE school_db;

⚠ Be careful. This permanently deletes data.

Table Commands in MySQL

CREATE TABLE

CREATE TABLE students (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100),
    email VARCHAR(100),
    age INT,
    course VARCHAR(50)
);

Explanation:

  • INT → Integer

  • VARCHAR → Text

  • PRIMARY KEY → Unique identifier

  • AUTO_INCREMENT → Automatically increases

SHOW TABLES

SHOW TABLES;

DESCRIBE TABLE

DESCRIBE students;

Shows structure of table.

DROP TABLE

DROP TABLE students;

Data Manipulation Commands (DML)

These are the most important commands.

INSERT INTO

Add data:

INSERT INTO students (name, email, age, course)
VALUES ('Rahul', 'rahul@gmail.com', 21, 'Web Development');

Insert multiple rows:

INSERT INTO students (name, email, age, course)
VALUES 
('Aman', 'aman@gmail.com', 22, 'Python'),
('Sneha', 'sneha@gmail.com', 23, 'Data Science');

SELECT (Most Important)

Retrieve data:

SELECT * FROM students;

Select specific columns:

SELECT name, course FROM students;

WHERE Clause

Filter data:

SELECT * FROM students WHERE age > 21;

UPDATE

Modify data:

UPDATE students
SET course = 'Full Stack Development'
WHERE id = 1;

DELETE

DELETE FROM students WHERE id = 3;

Sorting and Filtering Commands

ORDER BY

SELECT * FROM students ORDER BY age DESC;

ASC → Ascending
DESC → Descending

LIMIT

SELECT * FROM students LIMIT 5;

Used in pagination.

LIKE

Search pattern:

SELECT * FROM students WHERE name LIKE 'R%';

% → wildcard

Aggregate Functions

These are used in reporting and dashboards.

COUNT()

SELECT COUNT(*) FROM students;

SUM()

SELECT SUM(age) FROM students;

AVG()

SELECT AVG(age) FROM students;

MAX() and MIN()

SELECT MAX(age) FROM students;
SELECT MIN(age) FROM students;

GROUP BY and HAVING

GROUP BY

SELECT course, COUNT(*) 
FROM students
GROUP BY course;

HAVING

SELECT course, COUNT(*) 
FROM students
GROUP BY course
HAVING COUNT(*) > 1;

JOIN Commands (Very Important for Interviews)

Assume we have two tables:

students
payments

INNER JOIN

SELECT students.name, payments.amount
FROM students
INNER JOIN payments
ON students.id = payments.student_id;

LEFT JOIN

RIGHT JOIN

SELECT students.name, payments.amount
FROM students
RIGHT JOIN payments
ON students.id = payments.student_id;

Constraints in MySQL

  • PRIMARY KEY

  • FOREIGN KEY

  • UNIQUE

  • NOT NULL

  • DEFAULT

Example:

CREATE TABLE courses (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    price DECIMAL(10,2) DEFAULT 0
);

Indexes for Performance

Create index:

CREATE INDEX idx_name ON students(name);

Indexes improve search speed.

Advanced MySQL Commands

ALTER TABLE

Add column:

ALTER TABLE students ADD phone VARCHAR(15);

Drop column:

ALTER TABLE students DROP phone;

TRUNCATE

Deletes all rows:

TRUNCATE TABLE students;

Faster than DELETE.

VIEW

Create virtual table:

CREATE VIEW student_view AS
SELECT name, course FROM students;

Stored Procedure

DELIMITER //

CREATE PROCEDURE GetStudents()
BEGIN
    SELECT * FROM students;
END //

DELIMITER ;

MySQL Commands Used in Real Projects

In real web projects:

  • Login system → SELECT + WHERE

  • Registration → INSERT

  • Dashboard → GROUP BY

  • Admin panel → UPDATE + DELETE

  • Reports → JOIN + COUNT

If you are building:

  • E-commerce website

  • School management system

  • CRM system

  • Blog platform

You will use these commands daily.

MySQL Interview Questions (Important)

  • Difference between DELETE and TRUNCATE

  • What is PRIMARY KEY?

  • What is JOIN?

  • What is Index?

  • What is Normalization?

  • Difference between WHERE and HAVING

Best Practices for MySQL

  • Always use WHERE with UPDATE and DELETE

  • Use indexes for large tables

  • Avoid SELECT * in production

  • Backup database regularly

  • Use prepared statements (security)

Common MySQL Errors and Solutions

Error: Access denied
Solution: Check username/password

Error: Unknown column
Solution: Check column name spelling

Error: Cannot delete or update parent row
Solution: Check foreign key constraint

Final Thoughts

MySQL commands are the backbone of:

  • Web development

  • Backend programming

  • Data analytics

  • Business applications

If you master these commands, you can:

  • Build dynamic websites

  • Create admin dashboards

  • Manage large datasets

  • Crack developer interviews

Start practicing daily in phpMyAdmin or MySQL Workbench.

FAQ

What are basic MySQL commands?

SHOW, CREATE, INSERT, SELECT, UPDATE, DELETE.

Is MySQL easy to learn?

Yes. Beginners can learn basics in 1–2 weeks with practice.

Is MySQL still in demand in 2026?

Yes. It is widely used in web development and enterprise systems.

The post How to Use MySQL Commands (Complete Beginner 2026) appeared first on w3htmlschool.

]]> https://w3htmlschool.com/howto/mysql-commands/feed/ 0