search

1.4. Class Exercise (15 minutes)

Objective: The goal of this exercise is to give students hands-on experience creating a basic HTML webpage that incorporates the fundamental elements they’ve learned so far: headings, paragraphs, and

hashtag
Instructions for the Exercise:

  1. Create a New HTML File:

  • Ask students to open their text editor (such as Notepad or Visual Studio Code) and create a new HTML file.

  • Name the file something simple, such as exercise.html. Ensure that it is saved with the .html extension.

  1. Write the HTML Code:

  • Guide students to write a small HTML document using the following structure:

// HTML code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class Exercise</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a simple webpage created during the class exercise.</p>
    <p>Visit my favorite website here: 
        <a href="https://www.example.com" target="_blank">Favorite Website</a>
    </p>
</body>
</html>

  • Explanation of the Code:

    • <h1> creates a heading at the top of the page.

    • <p> creates two paragraphs, one with introductory text and another with a hyperlink.

    • <a href="https://www.example.com" target="_blank"> creates a clickable link that opens in a new tab. Students can replace https://www.example.com with the URL of a website they like.

  1. Save the File:

  • After typing the code, instruct students to save the file.

  1. Open the HTML File in a Browser:

  • Ask students to open their exercise.html file in a web browser (e.g., Chrome, Firefox). They should see their heading, paragraphs, and clickable hyperlink.

Review and Feedback:

  1. Class Review:

  • Once students have completed their HTML page, choose a few volunteers to share their work with the class. You can either:

    • Have them share their screen (if the class is online), or

    • Ask them to copy and paste their code into a shared document or platform (like a class forum or learning management system).

  1. Feedback:

  • Provide feedback on their use of HTML elements:

    • Heading: Was the heading properly created and formatted?

    • Paragraphs: Did they use the <p> tag correctly to organize the text?

    • Hyperlink: Was the hyperlink functional, and did it open the intended page in a new tab (if target="_blank" was used)?

  • Encourage students to reflect on:

    • How the structure of their webpage was built.

    • Any challenges they faced when writing and testing their HTML code.

    • The importance of properly closing tags and using correct syntax.

hashtag
Extended Activity (Optional):

For students who finish early or want more practice, ask them to:

  • Add additional headings (e.g., <h2>, <h3>) and paragraphs to organize their content.

  • Experiment by adding more hyperlinks to different websites and trying out the title attribute for added descriptions:

This will help reinforce their understanding of HTML elements and attributes while allowing them to be creative with their page design.

This exercise not only helps students practice HTML but also sets a foundation for more complex topics, like styling with CSS and adding interactivity with JavaScript in future lessons.

Previous1.3. HTML Elements and Attributes (25 minutes)NextLecture_2_Working with Text and Media Elements

Last updated