HTML Media Tutorial (Video, Images, Audio, etc)

HTML provides various elements for embedding and displaying different types of media, including images, audio, video, and other multimedia content.

Images

Images are essential for enhancing the visual appeal of web pages. 

<img src="image.jpg" alt="Description of the image">
  1. <img>: The image element.
  2. src: Specifies the image file's source (URL or local path).
  3. alt: Provides an alternative text for the image for accessibility and in case the image can't be displayed.

    4. You can also provide width and height using width="size" and height="size" attributes.

Audio

You can embed audio files for background music, sound effects, or podcasts. 

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
  1. <audio>: The audio element.
  2. controls: Adds audio player controls (play, pause, volume, etc.).
  3. <source>: Specifies the audio source and its type.

Video

Embed videos for tutorials, marketing, or entertainment. 

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>
  1. <video>: The video element.
  2. controls: Adds video player controls.
  3. width and height: Define the video's dimensions.
  4. <source>: Specifies the video source and its type.

Embedding Other Content

You can also embed content from other sources like YouTube or Vimeo. 

<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="640" height="360" frameborder="0" allowfullscreen></iframe>
  1. <iframe>: An inline frame element for embedding external content.
  2. src: The source URL.
  3. width and height: Define the frame's dimensions.
  4. frameborder: Set to "0" to remove the frame border.
  5. allowfullscreen: Enables fullscreen mode.

Image Maps

Image maps allow you to define clickable areas within an image. 

<img src="image.jpg" alt="World Map" usemap="#map">
<map name="map">
  <area shape="circle" coords="90,58,3" href="location1.html" alt="Location 1">
  <area shape="circle" coords="200,120,5" href="location2.html" alt="Location 2">
</map>
  1. <img>: The image element.
  2. usemap: Associates the image with a map.
  3. <map>: Defines the map and its areas with coordinates and links.