Day 4/10 HTML

Day 4/10 HTML

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″>

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>

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>

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>

Done

Please follow and like us:
Pin Share