Saturday, 18 January 2025

Creating Webpages: A Beginner’s Guide to HTML Lab Work

HTML-based computer lab for students, structured into different labs, each focusing on different aspects of HTML. This will guide the students through creating a simple HTML page, adding various elements like paragraphs, images, tables, forms, links, and lists.

Lab 1: Introduction to HTML and Basic Structure

Objective: Introduce students to the basics of HTML structure and how to create a simple webpage with headings and paragraphs.

Tasks:

  1. Create a Basic HTML Document:

    • Open a text editor (e.g., Notepad++ or Visual Studio Code).
    • Write a simple HTML document structure: 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to the Computer Lab</h1>
    <p>This is an introductory page for the computer lab.</p>
</body>
</html>

  2. Basic Tags Overview:

    • Explain the role of tags like <html>, <head>, <body>, <title>, <h1>, and <p>.
    • Have students experiment with changing the text within the <h1> and <p> tags.

Lab 2: Working with Lists and Anchors

Objective: Teach students how to create unordered and ordered lists and add hyperlinks (anchor tags).

Tasks:

  1. Creating an Unordered List:

    • Add an unordered list with a few items: 
      <h2>Computer Lab Rules</h2>
<ul>
    <li>No food or drinks allowed.</li>
    <li>Respect your peers and maintain silence.</li>
    <li>Always log off when done using the computer.</li>
</ul>

  2. Creating an Ordered List:

    • Add an ordered list of steps for using the computer: 
      <h2>Steps to Log into the Computer</h2>
<ol>
    <li>Press the power button.</li>
    <li>Enter your username and password.</li>
    <li>Click on "Log In".</li>
</ol>

  3. Adding Anchor Links:

    • Add a link to another page or website using the <a> tag: 
      <p>For more information, visit <a href="https://www.example.com">our official website</a>.</p>

Lab 3: Adding Images and Formatting Text

Objective: Learn how to add images and apply basic text formatting such as bold, italic, and underline.

Tasks:

  1. Adding an Image:

    • Add an image of the computer lab to the webpage: 
      <h2>Our Computer Lab</h2>
<img src="lab-image.jpg" alt="Computer Lab" width="500">

  2. Text Formatting:

    • Demonstrate text formatting using tags: 
      <p><b>Important:</b> Make sure you follow the lab rules to ensure a smooth experience.</p>
<p><i>This is an italicized sentence.</i></p>
<p><u>This text is underlined.</u></p>

Lab 4: Creating Forms

Objective: Teach students how to create a simple form for student registration.

Tasks:

  1. Basic Form Structure:

    • Create a form with the following input fields: 
      <h2>Student Registration Form</h2>
<form action="#" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>

    <label for="course">Course:</label>
    <select id="course" name="course">
        <option value="cs101">Computer Science 101</option>
        <option value="it102">Information Technology 102</option>
    </select><br><br>

    <input type="submit" value="Register">
</form>

  2. Form Elements:

    • Explain form elements like <input>, <label>, <select>, and <textarea>.
    • Show how to use the action and method attributes in a form.

Lab 5: Working with Tables

Objective: Teach students how to structure data in a table format.

Tasks:

  1. Create a Basic Table:

    • Create a table to display student information: 
      <h2>Student List</h2>
<table>
    <tr>
        <th>Student ID</th>
        <th>Name</th>
        <th>Course</th>
        <th>Grade</th>
    </tr>
    <tr>
        <td>001</td>
        <td>John Doe</td>
        <td>CS101</td>
        <td>A</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Jane Smith</td>
        <td>IT102</td>
        <td>B</td>
    </tr>
</table>

  2. Table Styling:

    • Add basic styling to the table using inline CSS or internal style sheets.

Lab 6: Final Project - Computer Lab Webpage

Objective: Apply all the concepts learned to create a complete webpage for a computer lab.

Tasks:

  1. Create a Full Webpage:

    • Build a multi-section webpage with a home page, a student registration form, a table for courses offered, and lab rules.
    • Include all the elements: headings, paragraphs, images, links, forms, lists, tables, and CSS.

  2. Linking Pages:

    • Create navigation links to different sections or pages (e.g., Home, Registration, Courses, Lab Rules).


on

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts