First HTML Program: Hello World Tutorial

Create your first HTML page from scratch. Step-by-step guide to writing and running your first HTML program.

Introduction

Let's create your first HTML page! We'll build a simple "Hello World" web page step by step.

What You Will Learn

Creating an HTML file
Basic HTML structure
Adding text and headings
Running your HTML page in a browser
Understanding the basic tags

Prerequisites

A text editor (VS Code recommended)
A web browser (Chrome, Firefox, etc.)

Step 1: Create a Project Folder

Create a new folder called html-practice anywhere on your computer.

Step 2: Create Your First HTML File

Open VS Code
File → Open Folder → Select html-practice
Click "New File" icon
Name it index.html

Step 3: Write Your First HTML Code

Type this into index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is my first HTML page. I'm learning HTML!</p>
</body>
</html>

Step 4: Understand the Code

Let's break it down:

`<!DOCTYPE html>`

Tells the browser this is an HTML5 document
Always put this first line

`<html lang="en">`

Root element of the page
lang="en" tells search engines the page is in English

`<head>`

Contains meta information about the page
Not visible on the page itself

`<meta charset="UTF-8">`

Sets the character encoding to UTF-8
Ensures all characters display correctly

`<meta name="viewport" ...>`

Helps with responsive design on mobile devices

`<title>`

Sets the page title shown in browser tab

`<body>`

Contains all visible content of the page
What users see and interact with

`<h1>`

Level 1 heading - largest and most important

`<p>`

Paragraph of text

Step 5: Save the File

Press Ctrl+S (Windows/Linux) or Cmd+S (Mac)
Make sure it's saved as index.html

Step 6: Open in Browser

Option 1: Direct Open

Find index.html in file explorer
Double-click it
It opens in your default browser

Option 2: Live Server (Recommended)

Install "Live Server" extension in VS Code
Right-click index.html
Select "Open with Live Server"
Page opens and auto-reloads when you edit!

Step 7: Make It Better!

Let's add more content. Update your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My First Website!</h1>
    </header>
    
    <main>
        <section>
            <h2>About Me</h2>
            <p>Hi! I'm learning HTML and this is my first web page.</p>
        </section>
        
        <section>
            <h2>My Hobbies</h2>
            <ul>
                <li>Reading</li>
                <li>Coding</li>
                <li>Gaming</li>
                <li>Hiking</li>
            </ul>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 My First Website. All rights reserved.</p>
    </footer>
</body>
</html>

Step 8: Save and Refresh

Save the file (Ctrl+S)
Refresh your browser (F5 or Ctrl+R)
See your updated page!

Let's Experiment!

Try these changes:

Add another heading:

<h3>My Favorite Foods</h3>

Add a longer paragraph:

<p>I love learning web development. HTML is fun and easy!</p>

Add an ordered list:

<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ol>

What's Next?

Congratulations! You just created your first web page! 🎉

Now you're ready to learn:

More about HTML structure
Text elements
Links and images
Lists and tables
And much more!

Common Mistakes to Avoid

❌ Forgetting closing tags ❌ Mixing up tag names ❌ Not saving the file ❌ Wrong file extension (.txt instead of .html)

Best Practices

✅ Use proper indentation ✅ Use semantic elements ✅ Always save with .html extension ✅ Test in multiple browsers ✅ Keep code organized

FAQs

Q: What is index.html? A: It's the default filename for the home page of a website.

Q: Can I use Notepad instead of VS Code? A: Yes, but VS Code is much better for development.

Q: Do I need an internet connection? A: No, you can create and view HTML files locally.

Q: Why isn't my page updating? A: Make sure you saved the file and refresh the browser.

Summary

You created your first HTML page! You learned the basic structure, added content, and viewed it in a browser. Keep practicing!

Next Topic

Now let's learn Understanding HTML Structure in more detail.

← Back to Syllabus