Introduction
Creating your first web page might seem intimidating, but it's actually quite straightforward. In this guide, we'll walk through creating a simple HTML page and uploading it to your web hosting provider. By the end, you'll have your very own page live on the internet!
What You'll Need
- A text editor (we recommend Notepad++, Visual Studio Code, or even the basic Notepad that comes with Windows)
- A web hosting account (see our Web Hosting Guide if you don't have one yet)
- Access to your hosting provider's file manager or FTP details
Step 1: Create a Basic HTML File
Let's start by creating a simple HTML file on your computer:
- Open your text editor
- Create a new file
- Copy and paste the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is my first web page. I created it myself and uploaded it to the internet.</p>
<h2>About Me</h2>
<p>You can write a little bit about yourself here.</p>
<h2>My Interests</h2>
<ul>
<li>Interest 1</li>
<li>Interest 2</li>
<li>Interest 3</li>
</ul>
<p>© 2025 Your Name</p>
</body>
</html>
Feel free to customize the text between the tags to make the page your own.
Understanding the HTML Structure
Let's break down what each part of the code does:
- <!DOCTYPE html> - Tells the browser this is an HTML5 document
- <html> - The container for all HTML elements
- <head> - Contains meta information about the document
- <title> - Sets the page title that appears in the browser tab
- <body> - Contains the visible content of the page
- <h1>, <h2> - Heading tags for titles and subtitles
- <p> - Paragraph tags for text content
- <ul> and <li> - Create an unordered (bullet) list
Step 2: Save Your HTML File
- In your text editor, go to "File" > "Save As"
- Name your file "index.html" (this is the standard name for the main page of a website)
- Save it to a location you can easily find, like your Desktop
Why "index.html"?
Most web servers are configured to automatically display a file named "index.html" when someone visits your website. If you use a different name, visitors would need to type that filename in the URL.
Step 3: Preview Your Page Locally
Before uploading, you can see how your page looks:
- Find the index.html file you just saved
- Double-click it to open it in your default web browser
- You should see your web page displayed in the browser
Step 4: Upload Your Page to Your Hosting Provider
Now that your page is ready, let's upload it to your web hosting account:
Option 1: Using Your Hosting Provider's File Manager
- Log in to your hosting provider's control panel (often called cPanel, Plesk, or similar)
- Find and open the File Manager tool
- Navigate to the public directory (usually called "public_html", "www", or "htdocs")
- Click "Upload" and select your index.html file
- Wait for the upload to complete
Option 2: Using FTP (File Transfer Protocol)
- Download and install an FTP client like FileZilla (free)
- Enter your FTP credentials (provided by your hosting company)
- Connect to your server
- Navigate to the public directory on the server side
- Drag your index.html file from your computer to the server window
FTP Credentials
You'll need your FTP hostname (often your domain name or ftp.yourdomain.com), username, and password. Your hosting provider should have supplied these when you set up your account.
Step 5: View Your Live Web Page
Once your file is uploaded, you can see it live on the internet:
- Open a new browser window
- Type your domain name into the address bar (e.g., www.yourdomain.com)
- Press Enter to load the page
Congratulations! Your first web page is now live on the internet for anyone to see.