6. HTML _ Images and Media

#IMAGE and MEDIA . . . 
 
In HTML, you can include images and other media (like videos and audio) using specific tags. 
Here’s a basic overview:

1. IMAGES 
 
 #Purpose and Importance
 
Images play a crucial role in web design by enhancing the
 visual appeal, providing context, 
and conveying information more effectively than text alone.
They can be used for various purposes, 
such as decorative elements, infographics, illustrations, or product photos.

The <img> Tag
The <img> tag is an inline HTML element used to embed images in a web page. Unlike other tags, 
the <img> tag is self-closing and does not require a closing tag.

The <img> tag is used to embed an image in an HTML document.
 
 #Basic Syntax: 
 
       <img src="image.jpg" alt="description of image">

 #Attribute Involve : 
 (a). 'src': The path or URL to the image file.
 (b). 'alt': Alternative test that describe the image if it 
             cannot be display.
 (c). 'width' AND 'height': Set the size of the image.
 (d). 'title' : Provides additional information about the 
                image when hovered over.

 #Briefly :-

(a). src (Source): The src attribute specifies the path or URL of the image file.
This can be a relative path (e.g., images/picture.jpg) or an absolute URL (e.g., https://example.com/picture.jpg).

(b).alt (Alternative Text): The alt attribute provides a text description of the image, 
which is displayed if the image fails to load. 
It is also used by screen readers to improve accessibility for visually impaired users. 
Writing meaningful alt text is crucial for accessibility.

(c).title: The title attribute offers additional information about the image, 
usually displayed as a tooltip when a user hovers over the image.

(d).width and height: These attributes define the dimensions of the image in pixels.
If only one is specified, the image's aspect ratio is maintained.

*EXAMPLE : 
            <img src="https://example.com/image.jpg" 
            alt="A beautiful scenery" width="530" height="400">

2. VIDEOS

Video content is increasingly important on the web for tutorials, marketing, entertainment, and more. 
The <video> tag allows web developers to embed video files directly into a web page.

 The " <video> " tag is used to embed video files.

 #Basic Syntax :
        
   <video width="300" height"200" controls>
      <source src="movie.mp4" type="video/mp4">
      Your browser does not support the video tag.
   </video>

 #Attribute Involve:

 (a). 'controls':- Adds video controls like play, pause etc.
 (b). 'autoplay':-Automatically plays the video when the page loads.
 (c). 'loop':- Makes the video loop(replay automatically when finished).
 (d). 'muted':- Mutes the video sound by deafult.
 (e). 'poster':- Specifies an image to be shown while the video is downloading or until the user hits the plau button.
 (f). 'width' and 'height':- Set the size of the video player.

 #Briefly :-

(a). controls : This attribute adds video controls (play, pause, volume, etc.). 
It’s a boolean attribute, meaning if present, it will add controls.
(b). autoplay: Automatically starts playing the video when the page loads.
This can be combined with muted for user-friendly autoplay (videos that start with sound can be intrusive).
(c). loop: Causes the video to restart automatically when it ends.
(d). muted: Mutes the video by default.
(e). poster: Specifies an image to be shown while the video is loading or until the user plays it.
(f). width and height: Set the video player’s dimensions.

3. AUDIO 

Audio is used on web pages for podcasts, music, notifications, etc.
 The <audio> tag allows embedding of audio files directly into a webpage.

  The '<audio>' tag is used to embed audio files.

 #Basic Syntax :-
    
        <audio controls>
          <source src="audio_url" type="audio/mpeg">
           Your browser does not support the audio element.
        </audio>
 
 #Attributes Involve :

(a). 'controls' :- Adds audio controls like play, pause etc.
(b). 'autoplay' :- Automatically plays the audio when the page loads.
(c).  'loop' :- Makes the audio loop(replay automatically when finished)
(d). 'muted' :- Mutes the audio by default.

 # Conclusion :-

These are the basic tags and attributes used to include images, videos, and audio in HTML.

Incorporating images, video, and audio into your web pages enhances
the user experience by providing rich, interactive content.
 Understanding how to use these elements effectively, along
 with their attributes and best practices,
 is key to modern web development.

Go to Link