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!

404Found Team

Posted: Jan 14th, 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.

SubReddit Discord