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="https://dev.to/ofameh/path/to/image.jpg" alt="Description of image" width="600" height="400">
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="https://dev.to/ofameh/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>
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="https://dev.to/ofameh/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>
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="https://dev.to/ofameh/path/to/image.jpg" alt="Beautiful Landscape" width="600" height="400">
<h2>Audio Example</h2>
<audio controls>
<source src="https://dev.to/ofameh/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="https://dev.to/ofameh/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>
