HTML 4 : Building a Basic HTML Web Page: Paragraphs, Formatting, Images, Links, and Tables

May 13, 2025

📄 Building a Basic HTML Web Page: Paragraphs, Formatting, Images, Links, and Tables

Creating a web page with HTML involves combining various elements to structure and display content effectively. Below are the essential features you can add to an HTML page, each explained with code examples.

1. ✅ Adding Paragraphs to the HTML Web Page

Paragraphs are added using the <p> tag.

<p>This is a paragraph of text on a web page.</p>
<p>Here is another paragraph explaining a new topic.</p>

2. 💬 Adding Bold Text

Bold text helps highlight important words or phrases. Use the <b> or <strong> tag.

<p>This is a <b>bold</b> word.</p>
<p>This is also <strong>strongly emphasized</strong> text.</p>

3. 🔠 Displaying Headings (H1 to H6)

HTML provides six heading levels, from <h1> (largest) to <h6> (smallest).

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Smaller Section</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

4. 🔗 Adding Links

You can create hyperlinks using the <a> tag and the href attribute.

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

5. ━ Adding a Ruler (Horizontal Line)

The <hr> tag creates a horizontal line to separate sections.

<p>First section ends here.</p>
<hr>
<p>Second section starts here.</p>

6. 🖼️ Adding an Image

Use the <img> tag to insert images. Always include alt for accessibility.

<img src="https://via.placeholder.com/150" alt="Sample Image" width="150" height="150">

7. ↩️ Adding Line Breaks

Use the <br> tag to insert a line break (new line) within text.

<p>Line one.<br>Line two.<br>Line three.</p>

8. Repeated ✅ Adding Paragraphs

HTML allows multiple paragraphs simply by using more <p> tags.

<p>First paragraph.</p>
<p>Second paragraph with more content.</p>

9. Italicizing Adding Italic Text

Use <i> or <em> to make text italic.

<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>

10. ✏️ Adding Underlined Text

Underlined text can be added with the <u> tag.

<p>This is <u>underlined</u> text.</p>

11. 📊 Adding a Table to the HTML Web Page

Tables display data in rows and columns. Use <table>, <tr>, <th>, and <td>.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Occupation</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Engineer</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>25</td>
    <td>Designer</td>
  </tr>
</table>

<table> starts the table.
<tr> defines a row.
<th> is a header cell.
<td> is a data cell.
border="1" adds a simple border.

🧩 Full Example HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Elements Example</title>
</head>
<body>

<h1>HTML Content Examples</h1>

<p>This is a paragraph with some <b>bold</b>, <i>italic</i>, and <u>underlined</u> text.</p>

<h2>Sample Headings</h2>
<h3>This is an H3 heading</h3>

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

<img src="https://via.placeholder.com/150" alt="Placeholder Image">

<p>Line one.<br>Line two.<br>Line three.</p>

<h2>User Table</h2>
<table border="1">
  <tr>
    <th>Username</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>john_doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>jane_doe</td>
    <td>jane@example.com</td>
  </tr>
</table>

</body>
</html>

With these basic HTML elements, you can build well-structured, visually clear, and interactive web pages. Let me know if you want to expand this with forms, lists, CSS, or JavaScript!

Search This Blog

SDET By VS_Automation