HTML First Page

ADVERTISEMENT

Let’s get hands-on now! You’ve learned what HTML is and how a basic structure looks — now it’s time to create your very first HTML page and view it in a browser. 🎉

Don’t worry — this is super simple, and I’ll walk you through every step.

📁 Step 1: Create a File

  1. Open any text editor (e.g., Notepad, VS Code, Sublime)
  2. Create a new file and save it as:
index.html

✅ Tip: Always use .html extension so browsers know how to handle it.

✍️ Step 2: Write HTML Code

Paste the following starter HTML code inside your index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First HTML Page</title>
</head>
<body>

  <h1>Welcome to My First Web Page</h1>
  <p>This is a simple HTML page created by me!</p>

</body>
</html>

You can edit the <title>, <h1>, and <p> content to make it your own.

🌍 Step 3: Open in Browser

Now, just double-click the file or:

  • Right-click the file → Open with → Choose Browser (e.g., Chrome, Firefox)

Boom 💥! You’ve just created your first webpage!

🛠️ How It Works:

TagWhat it does
<!DOCTYPE html>Tells browser it’s HTML5
<html>Starts your HTML page
<head>Metadata & title
<body>The visible part
<h1>Big heading
<p>Paragraph of text

🧪 Try This: Add Your Own Elements

Try adding this below the paragraph to explore more:

<hr>
<a href="https://w3buddy.com" target="_blank">Visit W3Buddy</a>
  • <hr> adds a horizontal line
  • <a> adds a link to another page

✅ Best Practices

  • Always use proper indentation
  • Use lowercase for tags
  • Save the file every time before refreshing browser
  • Don’t worry about styling yet — that comes with CSS!

📝 Quick Recap

  • You created a file called index.html
  • Wrote the basic structure of HTML
  • Opened it in a browser and saw your first webpage 🎉
  • You’re officially a web developer now 😄

👉 Coming Up Next:

Let’s explore the tools and editors that can make your life easier.
📚 Next: HTML Editors and Tools

ADVERTISEMENT