Media: Adding Images, Audio, and Video – HTML & CSS - Mastery

📸 Media Types

In modern web development, HTML allows us to easily embed media content like images, audio, and video directly into web pages. These media elements improve user experience by making websites more interactive and engaging.

🖼️ Images

Tag: <img>
Purpose: Used to display pictures on a webpage.
Attributes:
- src: Specifies the path to the image file.
- alt: Alternative text shown if the image doesn’t load (important for accessibility).
- width and height: Define the image size.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Dimensions Anatomy</title>
<style>
  .infographic-imgdim {
    --ink:        #1a1a1a;
    --ink-soft:   #5c5c5c;
    --paper:      #ffffff;
    --paper-alt:  #f0ece4;
    --accent:     #2563eb;
    --accent-soft:#e3ebfd;
    --line:       #ddd6c9;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    border-radius: 14px;
    overflow: hidden;
  }
  .infographic-imgdim[data-theme="dark"] {
    --ink:        #e8e6e1;
    --ink-soft:   #9a968c;
    --paper:      #121212;
    --paper-alt:  #1e1e26;
    --accent:     #5b8def;
    --accent-soft:#202942;
    --line:       #2c313d;
  }
  .ha-layout { display: flex; flex-direction: column; gap: 1.5rem; }

  .ha-code-wrap {
    background: #0b0b0b;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
  }
  .ha-filetabs {
    display: flex;
    background: #161616;
    border-bottom: 1px solid #2a2a2a;
  }
  .ha-filetab {
    border: none;
    background: transparent;
    color: #8a8a8a;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-bottom: 2px solid #5b8def;
  }

  .ha-code {
    padding: 1rem 1.8rem 1rem 0.9rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1.8;
    overflow-x: auto;
  }
  .ha-line {
    display: block;
    white-space: pre;
    color: #8a8a8a;
    border-radius: 5px;
    padding: 0.05rem 0.4rem;
  }
  .ha-line.ha-clickable {
    cursor: pointer;
    color: #e5e5e5;
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }
  .ha-line.ha-clickable:hover { background: #1c2333; }
  .ha-line.ha-active {
    background: #1c2333;
    box-shadow: inset 3px 0 0 #5b8def;
    color: #ffffff;
  }
  .ha-tag { color: #60a5fa; font-weight: 700; }
  .ha-attr { color: #f2b96b; }
  .ha-str { color: #9ece6a; }
  .ha-dim-attr { color: #ffd166; font-weight: 800; }
  .ha-dim-val { color: #ffd166; font-weight: 800; }

  .ha-browser {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--paper);
  }
  .ha-browser-bar {
    background: var(--paper-alt);
    padding: 0.5rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--line);
  }
  .ha-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
  .ha-tab {
    background: var(--paper);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 0.72rem;
    color: var(--ink-soft);
    padding: 0.25rem 0.6rem;
  }
  .ha-urlrow {
    background: var(--paper-alt);
    padding: 0.35rem 0.7rem 0.6rem;
    font-size: 0.72rem;
    color: var(--ink-soft);
    font-family: "SFMono-Regular", Consolas, monospace;
  }

  .ha-screen {
    background: #ffffff;
    color: #111;
    padding: 1.2rem 1.4rem 1.4rem;
    font-family: Georgia, "Times New Roman", serif;
  }
  .ha-out-h1 { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.8rem; }
  .ha-out-imgwrap {
    display: inline-block;
    border-radius: 8px;
    padding: 2px;
    margin-bottom: 0.6rem;
    transition: outline 0.2s ease;
  }
  .ha-out-lit { outline: 2px solid var(--accent); }
  .ha-out-p { font-size: 0.85rem; margin: 0.3rem 0 0; }
</style>
</head>
<body>

<div class="infographic-imgdim" id="ha-root">
  <div class="ha-inner">
    <div class="ha-layout">

      <div class="ha-code-wrap">
        <div class="ha-filetabs">
          <button class="ha-filetab">index.html</button>
        </div>

        <div class="ha-code">
<span class="ha-line">&lt;<span class="ha-tag">body</span>&gt;</span>
<span class="ha-line ha-clickable" data-part="h1">  &lt;<span class="ha-tag">h1</span>&gt;Image Display&lt;/<span class="ha-tag">h1</span>&gt;</span>
<span class="ha-line ha-clickable ha-active" data-part="img">  &lt;<span class="ha-tag">img</span> <span class="ha-attr">src</span>=<span class="ha-str">"flower.jpg"</span> <span class="ha-attr">alt</span>=<span class="ha-str">"A beautiful flower"</span> <span class="ha-dim-attr">width</span>=<span class="ha-str">"<span class="ha-dim-val">300</span>"</span> <span class="ha-dim-attr">height</span>=<span class="ha-str">"<span class="ha-dim-val">200</span>"</span>&gt;</span>
<span class="ha-line ha-clickable" data-part="p">  &lt;<span class="ha-tag">p</span>&gt;This image shows a beautiful flower displayed at 300x200 pixels.&lt;/<span class="ha-tag">p</span>&gt;</span>
<span class="ha-line">&lt;/<span class="ha-tag">body</span>&gt;</span>
        </div>
      </div>

      <div class="ha-browser">
        <div class="ha-browser-bar">
          <span class="ha-dot"></span><span class="ha-dot"></span><span class="ha-dot"></span>
          <div class="ha-tab">🌐 Image Example</div>
        </div>
        <div class="ha-urlrow">127.0.0.1:5500/basicstructure.html</div>
        <div class="ha-screen">
          <div class="ha-out-h1" id="out-h1">Image Display</div>
          <span class="ha-out-imgwrap ha-out-lit" id="out-img">
            <svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" style="display:block;">
              <rect width="300" height="200" fill="#1a2b4a"/>
              <circle cx="90" cy="70" r="14" fill="#7ab8f5"/>
              <circle cx="115" cy="60" r="14" fill="#7ab8f5"/>
              <circle cx="130" cy="85" r="14" fill="#7ab8f5"/>
              <circle cx="105" cy="95" r="14" fill="#7ab8f5"/>
              <circle cx="108" cy="80" r="6" fill="#f4c95d"/>
              <circle cx="180" cy="120" r="12" fill="#a7cef7"/>
              <circle cx="200" cy="110" r="12" fill="#a7cef7"/>
              <circle cx="210" cy="130" r="12" fill="#a7cef7"/>
              <circle cx="188" cy="138" r="12" fill="#a7cef7"/>
              <circle cx="196" cy="122" r="5" fill="#f4c95d"/>
              <path d="M108,95 C90,140 60,160 40,190" stroke="#3f7a4a" stroke-width="4" fill="none"/>
              <path d="M196,132 C210,160 220,175 235,195" stroke="#3f7a4a" stroke-width="4" fill="none"/>
            </svg>
          </span>
          <p class="ha-out-p" id="out-p">This image shows a beautiful flower displayed at 300x200 pixels.</p>
        </div>
      </div>

    </div>
  </div>
</div>

<script>
(function () {
  const wrapper = document.getElementById('ha-root');
  const bodyAttr = document.body.getAttribute('data-darkmode');
  let dark;
  if (bodyAttr === 'true') {
    dark = true;
  } else if (bodyAttr === 'false') {
    dark = false;
  } else {
    const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
    dark = match ? match[1] === 'true' : false;
  }
  if (dark) wrapper.setAttribute('data-theme', 'dark');
})();

(function () {
  const outMap = { h1: 'out-h1', img: 'out-img', p: 'out-p' };

  document.querySelectorAll('.ha-line.ha-clickable').forEach(line => {
    line.addEventListener('click', () => {
      const part = line.getAttribute('data-part');
      document.querySelectorAll('.ha-line').forEach(l => {
        l.classList.toggle('ha-active', l.getAttribute('data-part') === part);
      });
      document.querySelectorAll('#out-h1, #out-img, #out-p').forEach(el => el.classList.remove('ha-out-lit'));
      document.getElementById(outMap[part]).classList.add('ha-out-lit');
    });
  });
})();
</script>

</body>
</html>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});

🎙️Audio

Tag: <audio>
Purpose: Embeds sound or music into the page.
Attributes:
- controls: Adds play, pause, volume controls.
- autoplay, loop, muted: Control playback behavior.
- src or <source> tag is used to link the audio file.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Audio Element Anatomy</title>
<style>
  .infographic-audio {
    --ink:        #1a1a1a;
    --ink-soft:   #5c5c5c;
    --paper:      #ffffff;
    --paper-alt:  #f0ece4;
    --accent:     #2563eb;
    --accent-soft:#e3ebfd;
    --line:       #ddd6c9;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    border-radius: 14px;
    overflow: hidden;
  }
  .infographic-audio[data-theme="dark"] {
    --ink:        #e8e6e1;
    --ink-soft:   #9a968c;
    --paper:      #121212;
    --paper-alt:  #1e1e26;
    --accent:     #5b8def;
    --accent-soft:#202942;
    --line:       #2c313d;
  }
  .ha-layout { display: flex; flex-direction: column; gap: 1.5rem; }

  .ha-code-wrap {
    background: #0b0b0b;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
  }
  .ha-filetabs {
    display: flex;
    background: #161616;
    border-bottom: 1px solid #2a2a2a;
  }
  .ha-filetab {
    border: none;
    background: transparent;
    color: #8a8a8a;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-bottom: 2px solid #5b8def;
  }

  .ha-code {
    padding: 1rem 1.8rem 1rem 0.9rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8rem;
    line-height: 1.8;
    overflow-x: auto;
  }
  .ha-line {
    display: block;
    white-space: pre;
    color: #8a8a8a;
    padding: 0.05rem 0.4rem;
  }
  .ha-tag { color: #60a5fa; font-weight: 700; }
  .ha-attr { color: #f2b96b; }
  .ha-str { color: #9ece6a; }
  .ha-comment { color: #5c6370; font-style: italic; }

  .ha-browser {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--paper);
  }
  .ha-browser-bar {
    background: var(--paper-alt);
    padding: 0.5rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--line);
  }
  .ha-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
  .ha-tab {
    background: var(--paper);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 0.72rem;
    color: var(--ink-soft);
    padding: 0.25rem 0.6rem;
  }
  .ha-urlrow {
    background: var(--paper-alt);
    padding: 0.35rem 0.7rem 0.6rem;
    font-size: 0.72rem;
    color: var(--ink-soft);
    font-family: "SFMono-Regular", Consolas, monospace;
  }

  .ha-screen {
    background: #ffffff;
    color: #111;
    padding: 1.2rem 1.4rem 1.4rem;
    font-family: Georgia, "Times New Roman", serif;
  }
  .ha-out-h1 { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.9rem; }
  .ha-note {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-top: 0.7rem;
  }
  audio { width: 100%; max-width: 320px; }
</style>
</head>
<body>

<div class="infographic-audio" id="ha-root">
  <div class="ha-inner">
    <div class="ha-layout">

      <div class="ha-code-wrap">
        <div class="ha-filetabs">
          <button class="ha-filetab">index.html</button>
        </div>

        <div class="ha-code">
<span class="ha-line">&lt;<span class="ha-tag">h1</span>&gt;My Audio Player&lt;/<span class="ha-tag">h1</span>&gt;</span>
<span class="ha-line">&lt;<span class="ha-tag">audio</span> <span class="ha-attr">controls</span>&gt;</span>
<span class="ha-line">  &lt;<span class="ha-tag">source</span> <span class="ha-attr">src</span>=<span class="ha-str">"music.mp3"</span> <span class="ha-attr">type</span>=<span class="ha-str">"audio/mpeg"</span>&gt;</span>
<span class="ha-line">  Your browser does not support the audio element.</span>
<span class="ha-line">&lt;/<span class="ha-tag">audio</span>&gt;</span>
        </div>
      </div>

      <div class="ha-browser">
        <div class="ha-browser-bar">
          <span class="ha-dot"></span><span class="ha-dot"></span><span class="ha-dot"></span>
          <div class="ha-tab">🌐 Audio Player Example</div>
        </div>
        <div class="ha-urlrow">127.0.0.1:5500/basicstructure.html</div>
        <div class="ha-screen">
          <div class="ha-out-h1">My Audio Player</div>
          <audio controls id="out-audio">
            Your browser does not support the audio element.
          </audio>
        </div>
      </div>

    </div>
  </div>
</div>

<script>
(function () {
  const wrapper = document.getElementById('ha-root');
  const bodyAttr = document.body.getAttribute('data-darkmode');
  let dark;
  if (bodyAttr === 'true') {
    dark = true;
  } else if (bodyAttr === 'false') {
    dark = false;
  } else {
    const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
    dark = match ? match[1] === 'true' : false;
  }
  if (dark) wrapper.setAttribute('data-theme', 'dark');
})();

// Synthesize a short two-tone chime as a WAV file and use it as the audio source,
// since we can't ship a real licensed mp3.
(function () {
  const sampleRate = 44100;
  const duration = 1.6;
  const totalSamples = Math.floor(sampleRate * duration);
  const data = new Float32Array(totalSamples);

  function tone(freq, start, len, amp) {
    for (let i = 0; i < len; i++) {
      const t = i / sampleRate;
      const env = Math.sin(Math.PI * (i / len)); // fade in/out envelope
      const idx = start + i;
      if (idx < totalSamples) {
        data[idx] += Math.sin(2 * Math.PI * freq * t) * amp * env;
      }
    }
  }

  const seg = Math.floor(sampleRate * 0.35);
  tone(523.25, 0, seg, 0.25);           // C5
  tone(659.25, seg, seg, 0.25);         // E5
  tone(783.99, seg * 2, seg, 0.25);     // G5
  tone(1046.5, seg * 3, totalSamples - seg * 3, 0.22); // C6

  // Encode as 16-bit PCM WAV
  const buffer = new ArrayBuffer(44 + totalSamples * 2);
  const view = new DataView(buffer);

  function writeString(offset, str) {
    for (let i = 0; i < str.length; i++) view.setUint8(offset + i, str.charCodeAt(i));
  }

  writeString(0, 'RIFF');
  view.setUint32(4, 36 + totalSamples * 2, true);
  writeString(8, 'WAVE');
  writeString(12, 'fmt ');
  view.setUint32(16, 16, true);
  view.setUint16(20, 1, true);
  view.setUint16(22, 1, true);
  view.setUint32(24, sampleRate, true);
  view.setUint32(28, sampleRate * 2, true);
  view.setUint16(32, 2, true);
  view.setUint16(34, 16, true);
  writeString(36, 'data');
  view.setUint32(40, totalSamples * 2, true);

  let offset = 44;
  for (let i = 0; i < totalSamples; i++) {
    const s = Math.max(-1, Math.min(1, data[i]));
    view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);
    offset += 2;
  }

  const blob = new Blob([buffer], { type: 'audio/wav' });
  const url = URL.createObjectURL(blob);
  document.getElementById('out-audio').src = url;
})();
</script>

</body>
</html>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});

📷 Video

Tag: <video>
Purpose: Embeds video content.
Attributes:
- controls, autoplay, muted, loop—similar to <audio>.
- width, height—to define video size.
- <source> is used to provide different video file types for compatibility.

Example:

<body>
  <h1>Video Player</h1>
  <video width="400" height="300" controls>
    <source src="movie.mp4" type="video/mp4" />
    Your browser does not support the video tag.
  </video>
</body>

✅ Why It Matters

Embedding media makes your website dynamic.
It helps in education, marketing, and entertainment.
Ensures better user interaction and retention.