Creating Your First HTML Page
So far, you’ve learned what HTML is and how a basic HTML document is
structured. Now it’s time to put your knowledge into action and create your first HTML page using XAMPP or WAMP. This will help you understand how web pages are
displayed using a local server on your computer.
✅ What You Need
Before we start, make sure you have:
·
XAMPP or WAMP
installed on your computer.
·
A text editor (like
Notepad, VS Code, Sublime Text, etc.).
·
A web browser (like Chrome
or Firefox).
📁 Step 1: Create a
Project Folder
If you are using XAMPP:
1.
Go to the XAMPP installation
directory. Usually:
C:\xampp\htdocs\
2.
Inside the htdocs folder,
create a new folder for your project. For example:
C:\xampp\htdocs\myfirstsite\
If you are using WAMP:
1.
Go to the WAMP installation
directory. Usually:
C:\wamp64\www\
2.
Inside the www folder, create
your project folder. For example:
C:\wamp64\www\myfirstsite\
This folder will store your HTML files and
other project assets.
🧾 Step 2: Create Your HTML File
1.
Open your text editor.
2.
Copy and paste the following basic
HTML template:
<!DOCTYPE html><html><head> <title>My First HTML Page</title></head><body> <h1>Welcome to My First Web Page!</h1> <p>This is a simple HTML page served using XAMPP or WAMP.</p></body></html>
3.
Save the file as index.html
inside your project folder.
🚀 Step 3: Start the
Server
In XAMPP:
1.
Launch XAMPP Control Panel.
2.
Start the Apache module (Click Start button next to Apache).
In WAMP:
1.
Start WAMP Server.
2.
Wait for the WAMP icon in the
system tray to turn green, which
means Apache is running.
🌐 Step 4: View Your Page
in Browser
Now open your web browser and type:
·
For XAMPP:
http://localhost/myfirstsite/
·
For WAMP:
http://localhost/myfirstsite/
You should see your HTML page with the heading “Welcome to My First Web
Page!”
🎯 Recap
·
You created a project
folder in the correct location (htdocs or www).
·
Wrote a simple HTML file.
·
Viewed your page using localhost.
This is your first step in becoming a web
developer!
💡 Tip:
Always name your main file index.html
— browsers automatically look for this file when loading a folder on a web
server.