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).

HTML Example
<!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

HTML Example
<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

HTML Example
<p>Check out my favorite website: <a href="https://www.example.com" target="_blank">Example</a></p>

Adding Images

HTML Example
<img src="https://via.placeholder.com/150" alt="Placeholder Image">

Step 5: Styling with Inline CSS (Optional)


HTML Example
<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


HTML Example
<!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!


John Doe

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.