HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Chapter Quiz Exercises

Images & Media

Webpages aren't just text; images and videos make them engaging.

Images `<img>`

The image tag is self-closing and requires two crucial attributes:

src: The path/URL to the image file.
alt: Alternative text describing the image. Critical for screen readers (accessibility) and if the image fails to load.

HTML5 Video & Audio

You can embed media directly without plugins.

<video>: Embeds video. Attributes like controls, autoplay, and loop manage behavior.
<audio>: Embeds sound files.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; text-align: center; background: #fafafa; }
    .media-container {
      display: flex;
      justify-content: center;
      gap: 30px;
      flex-wrap: wrap;
    }
    .media-card {
      background: white;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      max-width: 400px;
    }
    img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      /* CSS Object Fit ensures images don't stretch weirdly */
      object-fit: cover; 
    }
    video {
      width: 100%;
      border-radius: 8px;
      background: #000;
    }
    h3 { margin: 10px 0; color: #333; }
  </style>
</head>
<body>

<h2>Rich Media in HTML</h2>
  
  <div class="media-container">
    
    <div class="media-card">
      <h3>&lt;img&gt; Tag</h3>
      
      <img src="https://picsum.photos/id/1015/400/250" alt="A beautiful scenic valley">
      <p style="color:#666; font-size:0.9em;">Images can be styled to scale beautifully within their containers.</p>
    </div>

<div class="media-card">
      <h3>&lt;video&gt; Tag</h3>
      
      <video controls poster="https://picsum.photos/id/1025/400/250">
        <source src="movie.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
      <p style="color:#666; font-size:0.9em;">HTML5 videos support native browser controls for play, pause, and volume.</p>
    </div>
  </div>

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz

HTML & CSS Masterclass Tutorial

Course Topics

Images & Media

Images & Media

Images <img>

HTML5 Video & Audio

Try It Yourself

Topics

Images `<img>`