Lab 2: Using Key HTML Tags

Introduction

Welcome to the hands-on lab for using key HTML tags! HTML (HyperText Markup Language) is the standard language for creating web pages. In this lab, you will learn how to use some of the most essential HTML tags to structure and format content on a webpage. We will use the JDoodle HTML editor for this exercise.

Objectives

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

  1. Understand the purpose and usage of key HTML tags.
  2. Use tags to create headings, paragraphs, lists, links, images, and tables.
  3. Structure a basic webpage using these HTML tags.

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>Key HTML Tags</title>
</head>
<body>
    <!-- Content will go here -->
</body>
</html>

  2. This code sets up a basic HTML document with a <head> and <body> section.

Step 3: Adding Headings and Paragraphs

  1. Inside the <body> tags, add the following code to create headings and paragraphs:

    <h1>Welcome to HTML</h1>
<p>This is a paragraph under the main heading. HTML is the standard language for creating webpages.</p>

<h2>Subheading</h2>
<p>This is a paragraph under a subheading. HTML consists of various tags that help structure a webpage.</p>

  2. The <h1> and <h2> tags define headings, and the <p> tag defines a paragraph.

Step 4: Creating Lists

  1. Add an unordered list and an ordered list:

    <h3>Unordered List</h3>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<h3>Ordered List</h3>
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

  2. The <ul> tag defines an unordered list, and the <ol> tag defines an ordered list. Each list item is defined using the <li> tag.

  1. Add a hyperlink and an image:

    <h3>Hyperlink</h3>
<p>Visit <a href="https://www.example.com">Example.com</a> for more information.</p>

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

  2. The <a> tag defines a hyperlink, and the <img> tag defines an image.

Step 6: Creating a Table

  1. Add a simple table:

    <h3>Simple Table</h3>
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
    </tr>
    <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
    </tr>
</table>

  2. The <table> tag defines a table, <tr> defines a table row, <th> defines a table header, and <td> defines a table cell.

Step 7: Running Your Code

  1. Click the "Execute" button in the JDoodle editor.
  2. You should see a preview of your webpage displaying the headings, paragraphs, lists, links, images, and table.

Summary

Congratulations! You have successfully created a webpage using key HTML tags. You now know how to use tags to create headings, paragraphs, lists, links, images, and tables. These fundamental tags are essential for structuring and formatting content on a webpage. Keep practicing and experimenting with different tags to enhance your HTML skills. Happy coding!