Building a Simple Website with HTML: A Beginner’s Guide

Written by

learnmodernwebdevelopment

in

Embarking on the journey of web development can seem daunting, but it doesn’t have to be. In this tutorial, we’ll strip away the complexities and build a basic website using only HTML. We’ll focus on understanding the fundamental building blocks of the web, creating a simple, yet functional, website that you can proudly call your own. This project is ideal for beginners, providing a solid foundation for more advanced web development concepts.

Understanding the Basics: What is HTML?

HTML, which stands for HyperText Markup Language, is the standard markup language for creating web pages. Think of it as the skeleton of your website. It provides the structure and content, telling the browser how to display text, images, and other elements. HTML uses tags, which are keywords enclosed in angle brackets (e.g., <p>, <h1>), to define elements.

Here’s a simple analogy: imagine you’re building a house. HTML is like the blueprint, specifying where the walls, doors, and windows go. CSS (which we won’t cover extensively in this tutorial) is like the interior design, determining the colors, styles, and layout. JavaScript, on the other hand, is like the electrical wiring and plumbing, adding interactivity and functionality.

Setting Up Your Workspace

Before we start coding, let’s set up our workspace. All you need is a text editor. You can use a simple text editor like Notepad (Windows) or TextEdit (Mac), but I recommend a code editor like Visual Studio Code (VS Code), Sublime Text, or Atom. These editors offer features like syntax highlighting, auto-completion, and code formatting, which make coding much easier. VS Code is free, widely used, and has a vast ecosystem of extensions, making it an excellent choice for beginners.

Once you’ve installed your text editor, create a new folder for your website project. Inside this folder, create a new file and name it index.html. This is the standard name for the main page of a website.

The Basic HTML Structure

Every HTML document has a basic structure. Let’s start by writing the fundamental code:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <!-- Your content goes here -->
</body>
</html>

Let’s break down each part:

  • <!DOCTYPE html>: This declaration tells the browser that this is an HTML5 document.
  • <html>: This is the root element of the HTML page. It encloses all other elements.
  • <head>: This section contains meta-information about the HTML document, such as the title (which appears in the browser tab), character set, and links to external resources (like CSS stylesheets and JavaScript files).
  • <title>: This tag defines the title of the HTML page, which is shown in the browser’s title bar or tab.
  • <body>: This section contains the visible page content, such as text, images, links, and other elements.

Adding Content: Headings and Paragraphs

Now, let’s add some content to our website. We’ll start with a heading and a paragraph.

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.  I am learning HTML!</p>
</body>
</html>

In this code:

  • <h1>: This tag defines a level 1 heading (the most important heading). There are heading tags from <h1> to <h6>, with <h6> being the least important.
  • <p>: This tag defines a paragraph of text.

Save the index.html file and open it in your web browser. You should see the heading and paragraph displayed on the page.

Adding Images

Let’s add an image to our website. You’ll need an image file (e.g., a .jpg or .png file) in the same folder as your index.html file. If your image is in a different folder, you’ll need to specify the correct path.

Here’s the code to add an image:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <img src="my-image.jpg" alt="A description of the image">
</body>
</html>

In this code:

  • <img src="my-image.jpg" alt="A description of the image">: This tag defines an image.
  • src="my-image.jpg": This attribute specifies the path to the image file. Replace my-image.jpg with the actual filename of your image.
  • alt="A description of the image": This attribute provides alternative text for the image. It’s important for accessibility (for users with visual impairments) and SEO. If the image cannot be displayed, the alt text will be shown instead. Always provide descriptive alt text.

Save the file and refresh your browser. You should now see the image on your webpage.

Creating Links

Links (or hyperlinks) are essential for navigating between web pages. Let’s create a link to another website.

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <img src="my-image.jpg" alt="A description of the image">
  <a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

In this code:

  • <a href="https://www.example.com">Visit Example.com</a>: This tag defines a link.
  • href="https://www.example.com": This attribute specifies the URL (web address) of the link. Replace https://www.example.com with the URL you want to link to.
  • Visit Example.com: This is the text that will be displayed as the link.

Save the file and refresh your browser. You should see the link. Clicking on it will take you to the specified website (example.com in this case).

Lists: Ordered and Unordered

Lists are a great way to organize information. HTML provides two main types of lists: ordered lists (numbered) and unordered lists (bulleted).

Unordered Lists

Here’s how to create an unordered list:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <img src="my-image.jpg" alt="A description of the image">
  <a href="https://www.example.com">Visit Example.com</a>

  <h2>My Favorite Fruits</h2>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
  </ul>
</body>
</html>

In this code:

  • <ul>: This tag defines an unordered list.
  • <li>: This tag defines a list item.

Save the file and refresh your browser. You should see a bulleted list of your favorite fruits.

Ordered Lists

Here’s how to create an ordered list:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <img src="my-image.jpg" alt="A description of the image">
  <a href="https://www.example.com">Visit Example.com</a>

  <h2>My Favorite Fruits</h2>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
  </ul>

  <h2>Steps to Make Coffee</h2>
  <ol>
    <li>Boil water</li>
    <li>Add coffee grounds</li>
    <li>Pour hot water over grounds</li>
    <li>Let it brew</li>
    <li>Enjoy!</li>
  </ol>
</body>
</html>

In this code:

  • <ol>: This tag defines an ordered list.
  • <li>: This tag defines a list item.

Save the file and refresh your browser. You should see a numbered list of the steps to make coffee.

Tables: Organizing Data

Tables are used to display data in rows and columns. Here’s how to create a simple table:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <img src="my-image.jpg" alt="A description of the image">
  <a href="https://www.example.com">Visit Example.com</a>

  <h2>My Favorite Fruits</h2>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
  </ul>

  <h2>Steps to Make Coffee</h2>
  <ol>
    <li>Boil water</li>
    <li>Add coffee grounds</li>
    <li>Pour hot water over grounds</li>
    <li>Let it brew</li>
    <li>Enjoy!</li>
  </ol>

  <h2>Fruit Prices</h2>
  <table>
    <tr>
      <th>Fruit</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>Apple</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$0.50</td>
    </tr>
  </table>
</body>
</html>

In this code:

  • <table>: This tag defines a table.
  • <tr>: This tag defines a table row.
  • <th>: This tag defines a table header cell (usually bold).
  • <td>: This tag defines a table data cell.

Save the file and refresh your browser. You should see a table displaying the fruit prices.

Adding Structure with <div> and <span>

The <div> and <span> elements are essential for structuring your HTML and applying CSS styles. They don’t have any inherent meaning or styling; they’re used as containers to group other elements.

  • <div>: This is a block-level element, meaning it takes up the full width available and starts on a new line. It’s often used to create sections or containers for larger parts of your page.
  • <span>: This is an inline element, meaning it only takes up as much width as necessary and doesn’t start on a new line. It’s often used to style small portions of text within a paragraph.

Here’s an example of how to use <div> and <span>:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <div>
    <p>This is a paragraph of text within a <span>div</span> element.</p>
    <p>Another paragraph within the same <span>div</span>.</p>
  </div>
  <p>This is a paragraph outside the <span>div</span> element.</p>
</body>
</html>

In this example, the two paragraphs are grouped within a <div> element. The <span> element is used to highlight the word “div” within the paragraphs. These elements are crucial for applying styles with CSS, which we will not cover extensively here, but is the next logical step in web development.

Common Mistakes and How to Fix Them

Even experienced developers make mistakes. Here are some common errors and how to avoid them:

  • Missing Closing Tags: Every opening tag (e.g., <p>) should have a corresponding closing tag (e.g., </p>). This is a very common mistake. Always double-check that you have closed all your tags correctly. Your code editor will often highlight unclosed tags.
  • Incorrect Attribute Values: Attribute values (like the image source src) should be enclosed in quotes (e.g., src="my-image.jpg"). Missing quotes can cause your code to behave unexpectedly.
  • Incorrect File Paths: When referencing images or other files, make sure the file path is correct. If your image isn’t displaying, double-check the src attribute in your <img> tag. Relative paths (like "my-image.jpg") are relative to the HTML file’s location.
  • Forgetting the <!DOCTYPE html> Declaration: This declaration is crucial for telling the browser that you’re using HTML5. Without it, the browser might render your page in quirks mode, which can lead to unexpected results.
  • Case Sensitivity: While HTML is generally not case-sensitive, it’s good practice to use lowercase for tags and attributes (e.g., <p> instead of <P>). This makes your code more readable and consistent.

Key Takeaways

  • HTML provides the structure and content of a website.
  • Tags are the building blocks of HTML.
  • The basic HTML structure includes <html>, <head>, and <body> elements.
  • You can add content using headings (<h1> – <h6>) and paragraphs (<p>).
  • Images are added using the <img> tag and the src and alt attributes.
  • Links are created using the <a> tag and the href attribute.
  • Lists are created using <ul> (unordered) and <ol> (ordered) tags.
  • Tables are created using <table>, <tr>, <th>, and <td> tags.
  • <div> and <span> are used for structuring and styling content.

FAQ

Here are some frequently asked questions about HTML:

  1. What is the difference between HTML and CSS? HTML provides the structure and content of a web page, while CSS (Cascading Style Sheets) controls the visual presentation and layout. Think of HTML as the skeleton and CSS as the clothing and makeup.
  2. Do I need to learn JavaScript to build a website? Not necessarily for a basic website. HTML and CSS are enough to create a static website. However, JavaScript is essential for adding interactivity and dynamic features.
  3. What is the best text editor for HTML? While any text editor can be used, code editors like VS Code, Sublime Text, and Atom are highly recommended because they offer features like syntax highlighting and auto-completion, which make coding easier. VS Code is a popular choice for beginners due to its ease of use and extensive extensions.
  4. How do I get my website online? Once you’ve created your HTML files, you’ll need a web hosting service to store your files and make them accessible on the internet. You’ll also need a domain name (web address). There are many web hosting providers available, such as Bluehost, SiteGround, and GoDaddy.
  5. What are semantic HTML tags? Semantic HTML tags are tags that have meaning and describe the content they contain. Examples include <article>, <aside>, <nav>, <header>, and <footer>. They improve the readability and accessibility of your code and help search engines understand the structure of your website.

This tutorial provides a foundational understanding of HTML. As you continue your web development journey, you’ll delve deeper into CSS for styling and JavaScript for interactivity. Remember to practice regularly, experiment with different elements, and don’t be afraid to make mistakes. The web development world is vast and ever-evolving, so continuous learning and exploration is key to success. With each line of code, you’re not just building a website; you’re building a skill, a portfolio, and a gateway to countless opportunities.

More posts