freeCodeCamp.org Watch on YouTube

HTML Tutorial - How to Make a Super Simple Website

3 min read 1 year ago
Published on Aug 01, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial will guide you through the basics of HTML, enabling you to create your very first simple website. By the end of this guide, you'll understand key HTML concepts, syntax, and how to structure a basic web page. This knowledge is foundational for anyone interested in web development.

Step 1: Understanding HTML

  • HTML stands for Hypertext Markup Language.
  • It is a markup language, not a programming language, used to display content on webpages.
  • You can create an HTML file on your computer and view it in a browser without needing to upload it to the internet.

Step 2: Setting Up Your HTML File

  1. Open your file explorer (File Explorer on Windows or Finder on Mac).
  2. Navigate to your desired location (like the desktop).
  3. Create a new file named index.html.
    • If you don't see file extensions, enable "File name extensions" in the View tab (Windows).
  4. Open the file in your preferred code editor (e.g., Visual Studio Code, Notepad++, Sublime Text).
  5. Also, open the file in a web browser to view changes live.

Step 3: Writing Your First HTML Code

  • Start with the basic structure of an HTML document:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First Website</title>
</head>
<body>
    <h1>This is my very first website</h1>
    <p>I am extremely excited!</p>
</body>
</html>

Key Tags Explained

  • <!DOCTYPE html>: Declares the document type (HTML5).
  • <html>: The root element of the HTML document.
  • <head>: Contains metadata, links to CSS or JavaScript, and the document title.
  • <body>: Contains the visible content of the webpage.

Step 4: Adding Basic Content

  • Use various tags to add content to your webpage:
    • Headers: Use <h1> to <h6> for headings.
    • Paragraphs: Use <p> for text blocks.
    • Links: Use <a href="URL">Link Text</a> to create hyperlinks.

Example of adding a link:

<a href="https://www.google.com" target="_blank">Visit Google</a>

Step 5: Inserting Images

  • Use the <img> tag to add images.
  • Example:
<img src="path/to/image.png" alt="Description of image">
  • Ensure the image file is in the same directory as your HTML file or provide a valid URL.

Step 6: Creating Lists

  • Unordered List: Use <ul> for bulleted lists.
  • Ordered List: Use <ol> for numbered lists.

Example of an unordered list:

<ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Pineapples</li>
</ul>

Step 7: Building Tables

  • Use the <table>, <tr>, <th>, and <td> tags to create tables.

Example:

<table border="1">
    <tr>
        <th>Month</th>
        <th>Rent</th>
        <th>Utilities</th>
    </tr>
    <tr>
        <td>August</td>
        <td>$1500</td>
        <td>$150</td>
    </tr>
</table>

Step 8: Organizing Your Code

  • Keep your HTML code organized:
    • Use indentation for nested elements.
    • Follow a consistent structure for readability.

Conclusion

You have now created a simple HTML website! Remember to save your work frequently and refresh your browser to see changes. As you gain confidence, consider exploring CSS for styling and JavaScript for functionality to enhance your web development skills. Happy coding!

Table of Contents

Recent