a cartoon lion holding a laptop and a laptop in front of a chalkboard
HTML Tutorial by Webbhut

What is HTML?

HTML stands for HyperText Markup Language. It’s the standard markup language for creating web pages and web applications.

Basic Structure of an HTML Document:

<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>
<body>

    <!-- Your content goes here -->
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

It’s important to practice along with reading this tutorial. Copy the snippet below and place it in a text editor. Save the snippet with an extension .html (e.g., my_first_webpage.html)

Steps:

  1. Open your text editor. like Notepad (pre-installed), Notepad++(free tool and recommended), or any other code editor
  2. Copy and paste the above snippet into the editor.
  3. Please save the file with a .html extension (e.g., my_first_webpage.html) and make sure it is not .html.txt
  4. Open the saved file in your web browser to see how it looks.

Practicing this way helps reinforce the concepts and allows you to see the immediate results of your code.

Explanation:

  • <!DOCTYPE html>: This declaration defines the document type and version of HTML being used. In this case, it’s HTML5.
  • <html>: This element wraps the entire HTML content of the page.
  • <head>: This section contains meta-information about the document, such as its title and links to stylesheets or scripts.
  • <title>: Sets the document’s title, which appears in the browser’s title bar or tab.
  • <body>: This section contains the visible content of the document, such as text, images, and other elements.
  • <!-- Your content goes here -->: This is a comment. Comments are not displayed in the browser, but they can be useful for adding notes to your code.

Basic HTML Tags:

  • <h1>, <h2>, <h3>, … <h6>: Headings of different sizes.
  • <p>: Paragraph.
  • <a href="url">Link text</a>: Creates a hyperlink.
  • <img src="image-url" alt="alternate text">: Inserts an image.
  • <ul>: Unordered list.
  • <ol>: Ordered list.
  • <li>: List item.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>

    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>

    <h2>Links:</h2>
    <ul>
        <li><a href="https://example.com">Example Website</a></li>
        <li><a href="https://example.com">Another Example</a></li>
    </ul>

    <h3>Image:</h3>
    <img src="https://via.placeholder.com/150" alt="Placeholder Image">

</body>
</html>