
Building Your First Web Page with HTML: A Beginner's Tutorial
Difficulty: Easy
Posted: Jan 11th, 2025 | By the 404Found Team
HTML (HyperText Markup Language) is the foundation of the web. It structures content on the internet, allowing browsers to display text, images, videos, and more. In this tutorial, we’ll guide you through creating your first web page step-by-step. By the end, you’ll have a simple yet functional web page you can build upon.
What You’ll Learn:
- Basic HTML structure.
- How to add headings, paragraphs, images, and links.
- How to save and view your HTML file in a browser.
Step 1: Setting Up
Tools You’ll Need:
- A text editor (e.g., Notepad on Windows, TextEdit on Mac, or VS Code for more advanced features).
- A web browser (Chrome, Firefox, Edge, etc.).
Step 2: Creating the HTML File
Open your text editor. Save a new file as index.html
(make sure the extension is .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 Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is my first attempt at creating a web page using HTML. Let’s add some more elements below.</p>
</body>
</html>
Step 3: Viewing Your Web Page
Locate your saved index.html
file on your computer. Double-click the file to open it in your default web browser. You should see a simple web page with a heading and a paragraph.
Step 4: Adding More Elements
Headings and Paragraphs
<h2>About Me</h2>
<p>I am learning how to create websites using HTML. This is just the beginning of my journey.</p>
Adding Links
<p>Check out my favorite website: <a href="https://www.example.com" target="_blank">Example</a></p>
Adding Images
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
Step 5: Styling with Inline CSS (Optional)
<h1 style="color: blue; text-align: center;">Welcome to My First Web Page!</h1>
<p style="font-size: 18px; line-height: 1.6;">This is styled text.</p>
Step 6: Full Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Welcome to My First Web Page!</h1>
<p style="font-size: 18px; line-height: 1.6;">This is my first attempt at creating a web page using HTML. Let’s add some more elements below.</p>
<h2>About Me</h2>
<p>I am learning how to create websites using HTML. This is just the beginning of my journey.</p>
<p>Check out my favorite website: <a href="https://www.example.com" target="_blank">Example</a></p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>
Step 7: Next Steps
Congratulations! You’ve created your first web page. Here’s what you can try next:
- Add more content like lists (
<ul>
or<ol>
), tables (<table>
), or forms (<form>
). - Learn about CSS to style your page.
- Explore JavaScript to add interactivity.
Next, check out are CSS tutorial! Styling Your First Web Page with CSS
Stay curious, and happy coding!
404Found team
Posted: Jan 13th, 2025
At 404Found, we are committed to providing high-quality content that keeps you well-informed in the fast-paced and constantly evolving world of technology. Our goal is to ensure you stay up-to-date with the latest trends, innovations, and insights that shape the tech landscape.