You are currently viewing Your First Web Page: An Introduction to HTML

Your First Web Page: An Introduction to HTML

Spread the love

Introduction

Welcome to the exciting world of web development! Every website you visit is built upon HTML, the HyperText Markup Language. HTML provides the fundamental structure and content of a web page, much like a skeleton.

In this beginner-friendly guide, we’ll walk you through creating your very first web page. By the end, you’ll understand basic HTML elements and have the confidence to start building simple web structures. Let’s begin!

Prerequisites

You only need two things:

  1. A Text Editor: We recommend Visual Studio Code (VS Code), a free, powerful, and cross-platform editor popular among developers. Basic text editors like Notepad (Windows) or TextEdit (macOS – remember to save as plain text!) also work.
  2. A Web Browser: Any browser like Chrome, Firefox, Edge, or Safari will do to view your page.

1. What is HTML? The Building Blocks

HTML uses “tags” to mark up different parts of a document. These tags tell the web browser how to display content. Most HTML tags come in pairs: an opening tag and a closing tag.

  • Opening Tag: <tagname>
  • Closing Tag: </tagname> (note the forward slash /)

Everything between the tags is the “content.” The tag and its content form an “element.”

Example: <p>This is a paragraph.</p>

Some tags are “self-closing” (or void elements) and don’t require a closing tag, such as <img> for images.

2. Setting Up Your Workspace

Let’s create the file for our web page:

  1. Create a Folder: Make a new folder named my-first-website on your desktop.
  2. Open Your Text Editor: Launch VS Code or your chosen editor.
  3. Save the File:
    • Go to File > Save As....
    • Navigate to your my-first-website folder.
    • Name the file index.html. The .html extension is vital for browsers to recognize it as a web page.
    • TextEdit users (macOS): Ensure you save as “Plain Text” (UTF-8) and deselect “If no extension is provided, use ‘.txt'”.

You now have an empty HTML file ready!

3. The Basic HTML Structure

Every HTML page begins with a fundamental structure. Add the following code to your index.html file:

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

    <!-- All visible content goes here -->

</body>
</html>

Here’s a breakdown:

  • <!DOCTYPE html>: Declares the document as HTML5.
  • <html lang="en">: The root element; all other content nests inside. lang="en" specifies English.
  • <head>: Contains meta-information not displayed on the page itself.
    • <meta charset="UTF-8">: Ensures proper character display.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures responsiveness for different devices.
    • <title>My First Web Page</title>: Text displayed in the browser tab.
  • <body>: Contains all the visible content of your web page.

Save your index.html file.

4. Adding Content: Headings, Paragraphs, and Images

Now, let’s fill the <body> with content.

4.1 Headings (<h1> to <h6>)

Headings (<h1> to <h6>) structure your content, from most important (<h1>) to least (<h6>).

Add this inside your <body> tags:

<body>

    <h1>Welcome to My Awesome Page!</h1>
    <h2>About This Guide</h2>
    <h3>What You Will Learn</h3>

</body>

Save your file.

4.2 Paragraphs (<p>)

Paragraphs (<p>) are for blocks of text.

Add these paragraphs below your headings:

<body>

    <h1>Welcome to My Awesome Page!</h1>
    <p>This is my very first web page, and I'm excited to share it with you!</p>

    <h2>About This Guide</h2>
    <p>In this guide, you're learning the absolute fundamentals of HTML, covering project setup and basic elements.</p>

    <h3>What You Will Learn</h3>
    <p>You'll understand HTML structure, headings, paragraphs, and how to include images. It's a great start!</p>

</body>

Save your file.

4.3 Images (<img>)

The <img> tag embeds images and is self-closing. It requires two key attributes:

  • src: (source) The path to the image file (URL or local path).
  • alt: (alternative text) A textual description for accessibility and when the image can’t load.

Let’s use an online placeholder image:

<body>

    <h1>Welcome to My Awesome Page!</h1>
    <p>This is my very first web page, and I'm excited to share it with you!</p>

    <img src="https://via.placeholder.com/600x200?text=My+First+Web+Page" alt="A placeholder image with text 'My First Web Page'">

    <h2>About This Guide</h2>
    <p>In this guide, you're learning the absolute fundamentals of HTML, covering project setup and basic elements.</p>

    <h3>What You Will Learn</h3>
    <p>You'll understand HTML structure, headings, paragraphs, and how to include images. It's a great start!</p>

</body>

To use your own image: Place your image file (e.g., my-picture.jpg) in the same my-first-website folder and change src="my-picture.jpg".

Save your file.

5. Viewing Your Page

Time to see your creation!

  1. Navigate: Open your file explorer/Finder to your my-first-website folder.
  2. Open index.html: Double-click the file.

Your browser will open, displaying your web page. Congratulations – you’ve built and viewed your first web page!

Common Pitfalls and Solutions

  • Missing Closing Tags: Most tags need a closing counterpart (e.g., <p> with </p>). Unclosed tags can cause display issues.
  • Typos: Even small spelling mistakes in tag names or attributes can prevent elements from rendering. Double-check your code carefully.
  • Incorrect Image Paths: If an image doesn’t show, verify the src attribute. Is the filename correct and is the image in the specified location (same folder, subfolder, or correct URL)?
  • Not Saving Changes: Always save your index.html file after modifications (Ctrl+S/Cmd+S) before refreshing your browser.

Conclusion & Next Steps

You’ve successfully built your first web page using HTML! You now understand basic structure, headings, paragraphs, and images. This foundational knowledge is key for any web developer.

What’s next?

  • More HTML: Explore links (<a>), lists (<ul>, <ol>), and tables (<table>).
  • CSS (Cascading Style Sheets): Learn to style your HTML – adding colors, fonts, and layouts to make your page look great.
  • JavaScript: Add interactivity to your page, making elements dynamic and responsive to user actions.

Keep exploring, keep building, and enjoy your coding journey!

Resources for Further Learning

Tags: , , ,

Leave a Reply