Lab 2: Lists, Frames, and Media Embedding

Published

January 30, 2026

This lab completes workbook experiments 3 and 4.

Workbook Alignment

  • Experiment 3: Display list items in different styles
  • Experiment 4: Use frames to include images and videos

Learning Objectives

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

  • create ordered, unordered, and description lists
  • customize list markers and nested list structures
  • understand frames and the modern iframe-based alternative
  • embed images, videos, and external pages safely
  • build a media-rich practice page using HTML and CSS

Software and Files Required

  • completion of Lab 1
  • VS Code or any text editor
  • a modern browser
  • a folder named Lab02
  • one image named campus.jpg
  • one optional local video file named sample.mp4

Experiment 3: Lists in Different Styles

Problem Statement

Write a program to display list items using multiple list styles.

Folder Structure

Lab02/
  lists.html
  campus.jpg
  sample.mp4

Procedure

  1. Create the Lab02 folder.
  2. Add a new file named lists.html.
  3. Create separate sections for unordered, ordered, alphabetic, and description lists.
  4. Apply CSS classes to change marker styles.
  5. Open the page in a browser and confirm that each list style is clearly visible.

Solution Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BMC201 Lab 2 - List Styles</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 900px;
      margin: 24px auto;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
    }

    .card {
      padding: 16px;
      border: 1px solid #d1d5db;
      border-radius: 10px;
      background: #f8fafc;
    }

    .square-list { list-style-type: square; }
    .roman-list { list-style-type: upper-roman; }
    .alpha-list { list-style-type: lower-alpha; }
  </style>
</head>
<body>
  <h1>Different List Styles in HTML</h1>

  <div class="grid">
    <section class="card">
      <h2>Unordered List</h2>
      <ul class="square-list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </section>

    <section class="card">
      <h2>Ordered List</h2>
      <ol class="roman-list">
        <li>Requirement Analysis</li>
        <li>Design</li>
        <li>Implementation</li>
      </ol>
    </section>

    <section class="card">
      <h2>Alphabetic List</h2>
      <ol class="alpha-list">
        <li>Frontend</li>
        <li>Backend</li>
        <li>Database</li>
      </ol>
    </section>

    <section class="card">
      <h2>Description List</h2>
      <dl>
        <dt>HTML</dt>
        <dd>Structure of a web page</dd>
        <dt>CSS</dt>
        <dd>Presentation and styling</dd>
        <dt>JavaScript</dt>
        <dd>Interactivity and logic</dd>
      </dl>
    </section>
  </div>
</body>
</html>

Expected Result

The browser should display four separate blocks showing different list styles with readable spacing and clear visual distinction.

Experiment 4: Frames and Embedded Media

Problem Statement

Create a web page that demonstrates the traditional idea of frames by using a modern page layout with embedded images and videos.

Note on Current Practice

Traditional HTML <frameset> is obsolete. In modern web development, the practical replacement is to use normal page layout plus <iframe>, <img>, and <video>.

Procedure

  1. Create a new file named media.html in the Lab02 folder.
  2. Save campus.jpg in the same folder.
  3. Add a two-column layout using CSS Grid.
  4. Place an image in the left panel and embedded video content in the main area.
  5. Test the page in a browser and confirm that both local and online media are shown correctly.

Solution Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BMC201 Lab 2 - Embedded Media</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      background: #f1f5f9;
    }

    .container {
      display: grid;
      grid-template-columns: 1fr 2fr;
      min-height: 100vh;
    }

    aside, main {
      padding: 20px;
    }

    aside {
      background: #0f172a;
      color: white;
    }

    img, iframe, video {
      width: 100%;
      border-radius: 8px;
      border: none;
      margin-bottom: 16px;
    }
  </style>
</head>
<body>
  <div class="container">
    <aside>
      <h2>Media Panel</h2>
      <p>This section acts like a side frame for images and quick links.</p>
      <img src="campus.jpg" alt="College campus">
    </aside>

    <main>
      <h1>Embedded Media Page</h1>

      <h2>YouTube Video</h2>
      <iframe
        height="315"
        src="https://www.youtube.com/embed/dD2EISBDjWM"
        title="Embedded video"
        allowfullscreen>
      </iframe>

      <h2>Local Video</h2>
      <video controls>
        <source src="sample.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </main>
  </div>
</body>
</html>

Expected Result

The browser should show a side media panel with an image and a main content area containing an embedded online video and a playable local video.

Observation Questions

  1. What is the difference between <ol>, <ul>, and <dl>?
  2. Why is <frameset> considered obsolete in HTML5?
  3. Why should embedded media include titles or fallback text?
  4. What layout advantage does CSS Grid provide in this lab?

Viva Questions

  1. What is the purpose of the allowfullscreen attribute in an iframe?
  2. What is the difference between embedding a local video and an online video?
  3. Why is the alt attribute important for images?
  4. How can nested lists improve page organization?

Submission Checklist

  • lists.html
  • media.html
  • campus.jpg
  • optional local video file
  • screenshots of both pages
  • short answer file for observation and viva questions

Extension Task

Add a navigation bar linking lists.html and media.html, and include one nested list and one additional embedded educational resource.