Day TML

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 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="/static/imghwm/default1.png" data-src="path/to/image.jpg" class="lazy" alt="Description of image"    style="max-width:90%"  style="max-width:90%"> 

• 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

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.
</source></source></audio>

• controls: Displays playback controls.
• : Specifies the audio file and its MIME type.

Embedding Video

To embed video, use the

<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.
</source></source></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

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Embedding Example</title>



  <h1 id="Embedding-Images-Audio-and-Video-in-HTML">Embedding Images, Audio, and Video in HTML</h1>

  <h2 id="Image-Example">Image Example</h2>
  <img src="/static/imghwm/default1.png" data-src="path/to/image.jpg" class="lazy" alt="Beautiful Landscape"    style="max-width:90%"  style="max-width:90%">

  <h2 id="Audio-Example">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.
  </source></source></audio>

  <h2 id="Video-Example">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.
  </source></source></video>

Done

The above is the detailed content of Day TML. For more information, please follow other related articles on the PHP Chinese website!