Learning Objectives
After completing this tutorial, you will be able to:
- Display your first content on a web page.
- Understand why nothing appeared earlier.
- Save and refresh your webpage correctly.
- Experience your first successful HTML page.
Table of Contents
- Introduction
- Why Was the Page Blank?
- Adding Your First Content
- Save and Refresh
- Understanding the Result
- Practice Exercise
- Assignment
- Summary
- Frequently Asked Questions
- Next Tutorial
Introduction
Congratulations!
Until now, you've created your project, added an index.html file, and learned the basic HTML document structure.
When you opened your webpage, it looked completely blank.
That wasn't a mistake.
In fact, it was exactly what we expected.
Today, you're going to make your webpage display its very first piece of content.
This is an exciting milestone because it's the first time you'll see something you created appear inside a web browser.
Every professional web developer remembers the first webpage they ever built. Today is your turn.
Why Was the Page Blank?
Let's look at your current HTML code.
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
</body>
</html>Notice something important.
The <body> element is empty.
Think of the <body> as an empty room.
The room exists, but there is no furniture, no table, no chair, and no decoration.
If a room is empty, there is nothing to see.
A webpage works in exactly the same way.
If the <body> contains nothing, the browser has nothing to display.
Adding Your First Content
Let's change that.
Inside the <body> element, type the following code.
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
Welcome to My First Website!
</body>
</html>That single line is now part of your webpage.
Although it looks simple, you've just added your first visible content.
Save and Refresh
Now follow these steps carefully.
Step 1
Save your index.html file.
Most code editors allow you to save by pressing:
Ctrl + S (Windows)
or
Command + S (Mac)
Step 2
Open your browser.
If the page is already open, simply press the Refresh button.
You should now see:
Welcome to My First Website!displayed on the page.
Congratulations!
Your browser is now reading your HTML file and displaying its content.
This is the beginning of every website you'll ever create.
Understanding the Result
You might notice that the text looks plain.
There are no colors.
No large fonts.
No spacing.
No beautiful design.
That is completely normal.
Right now, your webpage only contains HTML.
HTML provides the content and structure of a webpage.
The design comes later when we learn CSS.
For now, your goal is simply to understand how HTML displays information inside the browser.
Real-World Example
Imagine writing a letter.
The words you write are the content.
The font style, paper color, and layout make it look attractive.
HTML is like writing the words.
CSS is like designing the letter.
Without words, there is nothing to read.
Without HTML, there is nothing for CSS to style.
This is why every website begins with HTML.
Practice Exercise
Replace the text with your own message.
For example:
Hello, my name is Alex.or
I am learning Web Design.Save the file.
Refresh the browser.
Did the message change?
If yes, you've successfully edited your first webpage.
Assignment
Write three different messages inside the <body> element.
Example:
- Welcome to My Website!
- My name is ________.
- I will become a professional web designer.
Save the file after each change and refresh the browser to see the result.
This simple exercise will help you understand the connection between your code and the browser.
Summary
Today, you displayed your first visible content on a webpage.
You learned that an empty <body> produces an empty page, while any text placed inside the <body> becomes visible in the browser.
Although your page is simple, you've completed one of the most important milestones in web design—you've created a webpage that displays content.
From this point onward, every new HTML element you learn will appear inside the <body> section.
Frequently Asked Questions
Why does my text look plain?
Because HTML only provides structure and content. Styling will be added later using CSS.
Can I write anything inside the <body>?
Yes. Any text or HTML elements placed inside the <body> will appear in the browser.
Why do I need to refresh the browser?
The browser doesn't automatically know you've changed the file. Refreshing reloads the latest version of your webpage.