Day 3: Links, Images & Media

Goal

Learn how to add interactivity and media to your HTML pages using links, images, and audio/video elements.

Topics

• Links: <a>
• Images: <img>
• Audio: <audio>
• Video: <video>

Links

Links allow users to navigate to other pages or websites.

<a href="https://example.com">External Link</a>  <!-- Goes to another website -->
<a href="about.html">Internal Link</a>  <!-- Goes to another page in your site -->

Images

Images can be displayed using the <img> tag. Always include an alt attribute for accessibility.

<img src="image.jpg" alt="A description of the image">

Audio & Video

You can embed audio and video directly into your page.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Practice

Try adding media and links to your page:

• Add at least two links: one internal page, one external website.
• Insert an image with proper alt text.
• Add a video or audio clip using <video> or <audio> with controls.

Example

<h1>My Favorite Media</h1>

<p>Check out my favorite website: <a href="https://example.com">Example</a></p>
<p>Go to my about page: <a href="about.html">About Me</a></p>

<h2>Image Example</h2>
<img src="myphoto.jpg" alt="Photo of me">

<h2>Video Example</h2>
<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>