✅ Creating a Simple Webpage: Putting HTML Tags into Practice
📌 Create a Simple Webpage Using HTML | Practical HTML Tutorial
👋 Introduction
In the last two steps of this HTML series, we learned:
🔹 Step 1: Learn HTML for Beginners
🔹 Step 2: Learn About HTML Tags in Detail
Now, it’s time to put all that knowledge into action and create a basic HTML webpage from scratch. Whether you’re new to coding or just exploring web development, this is the perfect starting point!
🎯 Objective
We will create a simple HTML webpage that contains:
-
A title and heading
-
A paragraph
-
An image
-
A link
-
A list
-
A horizontal line
-
Proper structure using
<html>,<head>, and<body>
🧰 Tools Required
✅ You don’t need any fancy software.
Just use:
-
Notepad (Windows) or TextEdit (Mac)
-
Any web browser (Chrome, Firefox, Edge)
📝 Step-by-Step: Create Your First HTML Page
🪜 Step 1: Open Notepad or Text Editor
Open your text editor and copy the following code:
💻 Full HTML Page Code:
🧠 What This Code Does:
| Code Section | Purpose |
|---|---|
<!DOCTYPE html> |
Declares HTML5 |
<html>, <head>, <body> |
Basic structure |
<title> |
Sets browser tab title |
<h1>, <h2>, <h3> |
Headings of different sizes |
<p> |
Paragraphs |
<ul>, <li> |
Unordered list of hobbies |
<a> |
Hyperlink that opens in new tab |
<img> |
Displays an image from the web |
<hr> |
Horizontal line separator |
🖥️ Step 2: Save the File
-
In Notepad → Click File → Save As
-
Name it:
index.html -
Save as type: All Files
-
Encoding: UTF-8
-
Save it on your desktop or any folder
🌐 Step 3: Open in Browser
Double-click on the index.html file. It will open in your browser and you’ll see your first webpage live!
🎉 Congratulations! You just built your first webpage using only HTML.
🧽 Bonus Tips:
-
✅ Always test your code by saving and refreshing the browser.
-
✅ Use
target="_blank"to open links in new tab. -
✅ Use
alttext for images to improve accessibility and SEO. -
✅ Use meaningful headings (
<h1>to<h6>) for better structure.
🔄 What You Learned in This Post:
✅ HTML page structure
✅ Headings, paragraphs, lists, links, and images
✅ How to save and open an HTML file in browser
🔗 Blog Series Navigation:
🎯 What’s Next?
In the next blog post, we’ll cover:
📢 Step 4: “Introduction to HTML Attributes and How They Work” next?
Learn HTML