Lab 1: Hello World HTML

Introduction

Welcome to your first hands-on lab on HTML! HTML, or HyperText Markup Language, is the standard language used to create web pages. In this lab, we will learn the basics of HTML syntax by creating a simple "Hello, World!" webpage using the JDoodle HTML editor.

Objectives

By the end of this lab, you will be able to:

  1. Understand the basic structure of an HTML document.
  2. Create a simple HTML document.
  3. Use basic HTML tags to display text on a webpage.

Lab Steps

Step 1: Access the JDoodle HTML Editor

  1. Open your web browser and go to JDoodle HTML Editor.
  2. You will see a blank editor where you can write your HTML code.

Step 2: Basic HTML Structure

  1. In the editor, type the following code to create the basic structure of an HTML document:

    <!DOCTYPE html>
<html>
<head>
    <title>Hello World Page</title>
</head>
<body>
    <!-- Content will go here -->
</body>
</html>

  2. This code defines a basic HTML document:

    • <!DOCTYPE html>: Declares the document type and version of HTML.
    • <html>: The root element of an HTML page.
    • <head>: Contains meta-information about the HTML document, such as the title.
    • <title>: Sets the title of the webpage, which appears in the browser tab.
    • <body>: Contains the content of the HTML document that will be displayed on the webpage.

Step 3: Adding Content to the Body

  1. Inside the <body> tags, add a heading and a paragraph:

    <body>
    <h1>Hello, World!</h1>
    <p>Welcome to your first HTML page.</p>
</body>

  2. The <h1> tag defines a top-level heading, and the <p> tag defines a paragraph.

Step 4: Running Your Code

  1. Click the "Execute" button in the JDoodle editor.
  2. You should see a preview of your webpage displaying "Hello, World!" as a heading and "Welcome to your first HTML page." as a paragraph.

Step 5: Experimenting with HTML Tags

  1. Try adding more HTML tags to experiment with different types of content:

    • Add a second heading with the <h2> tag:

      <h2>This is a subheading</h2>

    • Add a list with the <ul> and <li> tags:

      <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

    • Add a hyperlink with the <a> tag:

      <a href="https://www.example.com">Visit Example.com</a>

  2. Click "Execute" after adding each new tag to see the changes in your webpage preview.

Summary

Congratulations! You have successfully created your first HTML document and learned the basics of HTML syntax. You now know how to set up the structure of an HTML document and use basic tags to add content to a webpage. Keep experimenting with different tags and structures to become more familiar with HTML. Happy coding!