HTLM with Coding for Begainers

Blog

July 26, 2025

1. Basic HTML Structure

htmlCopyEdit<!DOCTYPE html>
<html>
<head>
  <title>White Color Example</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

2. Using White Color in HTML

There are several ways to use the color white:

a. Using Inline CSS

htmlCopyEdit<p style="color: white; background-color: black;">
  This is white text on a black background.
</p>

b. Using a CSS `<style>` Tag

htmlCopyEdit<style>
  body {
    background-color: white;
    color: black;
  }

  .white-text {
    color: white;
    background-color: navy;
  }
</style>

<p>This is normal text.</p>
<p class="white-text">This is white text on a navy background.</p>

3. CSS Colour Codes for White

You can use these values for white:

Format	Value
Name	`white`
HEX	`#FFFFFF`
RGB	`rgb(255,255,255)`
HSL	`hsl(0, 0%, 100%)`

Example:

htmlCopyEdit<p style="color: #FFFFFF; background-color: gray;">White text with HEX</p>

4. Test Page Example

htmlCopyEdit<!DOCTYPE html>
<html>
<head>
  <title>White in HTML</title>
  <style>
    body {
      background-color: black;
      color: white;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome!</h1>
  <p>This is a simple example of using white in HTML.</p>
</body>
</html>

HTML Lesson 1: Introduction to HTML

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create web pages.

Basic HTML Structure

Here is the basic skeleton of an HTML page:

htmlCopyEdit<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

Explanation:

Tag	Meaning
`<!DOCTYPE html>`	Declares the HTML version (HTML5).
`<html>`	The root element of an HTML document.
`<head>`	Contains meta info (title, styles, etc).
`<title>`	The title shown on the browser tab.
`<body>`	The visible content of the page.
`<h1>`	A large heading (level 1).
`<p>`	A paragraph of text.

Try it Yourself:

You can try this in any browser. Just follow these steps:

Step-by-Step:

Open Notepad (Windows) or TextEdit (Mac).
Paste the code above.
Save the file as index.html.
Double-click the file to open it in your browser.

BONUS: Add More Elements

Headings

htmlCopyEdit<h1>This is a big heading</h1>
<h2>This is smaller</h2>
<h3>Even smaller</h3>

Paragraph and Line Break

htmlCopyEdit<p>This is a paragraph.</p>
<p>This is another paragraph.<br>This line is a break.</p>

Image

htmlCopyEdit<img src="https://via.placeholder.com/150" alt="Sample image">

Link

htmlCopyEdit<a href="https://www.google.com" target="_blank">Visit Google</a>

Your First Mini Project

Here’s a complete small webpage for you to practice:

htmlCopyEdit<!DOCTYPE html>
<html>
  <head>
    <title>My Profile</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>My name is Abu Mansur. I am learning HTML.</p>

    <h2>My Hobbies</h2>
    <ul>
      <li>Reading</li>
      <li>Coding</li>
      <li>Watching movies</li>
    </ul>

    <p>Visit my favorite website: <a href="https://www.w3schools.com" target="_blank">W3Schools</a></p>
  </body>
</html>

javidmansur

View All Articles