DEV Community

ofameh
ofameh

Posted on

Day 4/10 HTML

#webdev #javascript #beginners #programming

Slow day compared to yesterday.
Started off with a refresher of yesterday's topic then moved on to today's topic
Studied HTML Media
Images, Audio, Videos...
(WILL ATTACH PROJECT LATER AS IM HAVING GITHUB ISSUES)

*My notes: *

Embedding Images

To embed an image in HTML, use the <img> tag. This tag is self-closing and requires the src attribute to specify the image's path and the alt attribute to provide alternative text for accessibility.

Example:

 <img src="path/to/image.jpg" alt="Description of image" width="600" height="400">
Enter fullscreen mode Exit fullscreen mode
  • src: Path to the image file (relative or absolute URL).
  • alt: Text description of the image (important for accessibility and SEO).
  • width and height: Optional attributes to specify dimensions.

Embedding Audio

To embed audio, use the <audio> tag. This tag requires the controls attribute to display playback controls and can contain multiple <source> elements for different audio formats.

Example:

<audio controls>
  <source src="path/to/audio.mp3" type="audio/mpeg">
  <source src="path/to/audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
Enter fullscreen mode Exit fullscreen mode
  • controls: Displays playback controls.
  • : Specifies the audio file and its MIME type.

Embedding Video

To embed video, use the <video> tag. Similar to the <audio> tag, it requires the controls attribute and can contain multiple <source> elements.
Example:

<video width="600" height="400" controls>
  <source src="path/to/video.mp4" type="video/mp4">
  <source src="path/to/video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
Enter fullscreen mode Exit fullscreen mode
  • width and height: Specifies the dimensions of the video player.
  • controls: Displays playback controls.
  • : Specifies the video file and its MIME type.

All together

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Embedding Example</title>
</head>
<body>

  <h1>Embedding Images, Audio, and Video in HTML</h1>

  <h2>Image Example</h2>
  <img src="path/to/image.jpg" alt="Beautiful Landscape" width="600" height="400">

  <h2>Audio Example</h2>
  <audio controls>
    <source src="path/to/audio.mp3" type="audio/mpeg">
    <source src="path/to/audio.ogg" type="audio/ogg">
    Your browser does not support the audio element.
  </audio>

  <h2>Video Example</h2>
  <video width="600" height="400" controls>
    <source src="path/to/video.mp4" type="video/mp4">
    <source src="path/to/video.ogg" type="video/ogg">
    Your browser does not support the video tag.
  </video>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Done

Top comments (0)

Read next

cryptosandy profile image

Revolutionizing Payments: The WhiteBIT Crypto Card in Action

Crypto.Andy (DEV) -

aryan_shourie profile image

The JavaScript History API

Aryan Dev Shourie -

yasserelgammal profile image

The Importance of Minimizing Database Queries in Backend Development

Yasser Elgammal -

dariel_vila_2d5ebae1c430f profile image

KaibanJS v0.11.0: Empowering Developers with Advanced RAG Tools

Dariel Vila -