A Beginner’s Guide to HTML: Building Your First Webpage

HTML (Hypertext Markup Language) is the fundamental building block of the web. It’s used to structure content on a webpage, defining elements like headings, paragraphs, lists, images, and links. In this tutorial, we’ll walk you through creating a basic HTML document.

1. Setting Up Your Workspace

Choose a text editor: You can use any plain text editor. Popular options include:
Visual Studio Code
Sublime Text
Notepad++
Atom
Create a new file: Save the file with a .html extension, like index.html.

2. Basic HTML Structure

Every HTML document has a basic structure:

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>: This declaration specifies the document type.
<html>: This tag represents the root of an HTML document.
<head>: This section contains metadata about the webpage, like the title.
<title>: Sets the title of the webpage, which appears in the browser’s tab.
<body>: This section contains the visible content of the webpage.

3. Adding Content

Let’s add some content to our webpage:

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</body>
</html>

<h1>: Creates a heading level 1.
<p>: Creates a paragraph.
<ul>: Creates an unordered list.
<li>: Creates a list item.

4. Formatting Text

You can format text using HTML tags:

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <h2>Bold and Italic Text</h2>
  <p>This text is <b>bold</b>. This text is <i>italic</i>.</p>
</body>
</html>

<b>: Makes text bold.
<i>: Makes text italic.

5. Creating Links

To link to another webpage, use the <a> tag:

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <a href="https://www.google.com">Visit Google</a>
</body>
</html>

The href attribute specifies the URL of the linked page.

6. Adding Images

To insert an image, use the <img> tag:

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <img src="image.jpg" alt="A beautiful image">
</body>
</html>

The src attribute specifies the path to the image file. The alt attribute provides alternative text for users who cannot see the image.

7. Viewing Your Webpage

Save the file: Save your HTML file.
Open in a browser: Double-click the file to open it in your default web browser.

Congratulations! You’ve created your first HTML webpage. This is just the beginning. Explore more HTML elements and attributes to build more complex and interactive webpages.

Winter Haven Web Design