Web Development — HTML
Embedding in HTML| Series: 06
Category : Web Development | HTML
In this web development series, you will understand the concept of Embedding Contents [ Images, Video, Audio ], Web Development series : 05 you can understand the Table which is used in Websites using HTML Tags.
Embedding Contents [ Images, Video, Audio ]
We can add three types of content in webpages
- (Image) we can add images by <img/> tag in HTML with height and width attribute we can resize the image in webpage. and src attribute is used to find the location of the images in local_drive or in online. The alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image.
Syntax:
<img src="" alt="" width = "" height = ""/>Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-img_table</title>
</head>
<body>
<h1>HTML_img_tag</h1>
<hr>
<h1>Image's of the DOG</h1>
<img src="dog.jpg" alt="dog" width="250px"/>
<br>
<img src="dog1.jpg" alt="dog1" width="250px"/>
</body>
</html>OUTPUT:
2. (Video) It is same as adding Images instead of <img/>tag we use
<video></video> , video tag also have attribute like [ width=” ”, height=” ”, controls], width and height attribute do the same thing, and controls attribute gives the controls button like play, pause, volume button on video in webpage and we can download the video from there, inside video tag we have <source> tag and it have two attribute src=”” and type="" this are used to find the location of the video and it type.
Let see example.
Syntax:
<video width = "" height = "" conrols>
<source src="" type="video/mp4">
</video> Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-video_tag</title>
</head>
<body>
<h1>HTML-video_tag</h1>
<hr>
<h2>Dog Video</h2>
<video width="320" height="240" controls>
<source src="dog.mp4" type="video/mp4">
</video>
</body>
</html>OUTPUT:
3. (Audio) same as adding video in webpage, autoplay attribute do when we refresh the webpage it will automatically play the audio.
Syntax:
<audio controls autoplay>
<source src="" type="audio/mpeg">
</audio>Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-audio_tag</title>
</head>
<body>
<h1>HTML-audio_tag</h1>
<hr>
<h2>Audio of the Dog</h2>
<audio controls autoplay>
<source src="dog-barking.mp3" type="audio/mpeg">
</audio>
</body>
</html>OUTPUT:
What next?
In our next blog we going to see iFrame in HTML.
Next in this series : iFrame in HTML.
Coming soon