Thursday, 7 July 2016

Html Image Audio Tags | How to Add Images and Audio in Html


Image, Audio tags in Html or Html 5 page used to add Images and Audio in web pages.

   To Add Images:

1.Type Image tag <img> Within body Tag of your web page to insert picture in your web page.

2.Provide the image path in the image tag with help of "src" keyword or attribute

ex:<img src="image/light.png"></img>

3.You can also describe the Width and Height for the image.

Html Image Tag Example:
<img  src="image/light.png" width="200px" height="300px"></img>

Note 1 : You can avoid  typing pixel(px) for Width and Height.

Note 2:If you do not define the width & height of image then it will automatically cover space of your web page according to original width & height of the image.

   
 To Add Audio File:


1.Type Audio tags <audio controls> <audio> Within body Tag of your web page to insert the audio file in your web page.you can add Mp3, Wav, Ogg format file using this tag.

The controls attribute adds audio controls like: play, pause, and volume control.
Html image and audio tag
2.Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element.so another tag is used for audio file with in the <audio> tag.

3.we use <source></source> tag for audio files.use src and type attribute for providing audio file path to audio file destination.while type attribute provide the format of audio file.

Html Audio Syntax:

<source src="horse.mp3" type="audio/mpeg">

Html Image And Audio tags Example:

<!DOCTYPE html>
<html>
<body>
<img src="html5.gif" alt="Not available" width="128px" height="128px">
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

</body>

</html>

Html audio image tags


Please comment and you can ask any question, if you have. THANKS
Html image and audio tag

2 comments:

Leave a Reply!