Embedding Media In HTML: Images, Videos, and Audio
Introduction:
In this lesson, we focus on embedding various types of media into HTML documents.
This is an essential skill for Web3 developers, as it enables the integration of multimedia elements, enhancing user interaction and engagement within decentralized applications (dApps).
Remember, watching the lesson video will offer a deeper understanding of this topic.
Learning Objectives:
By the end of this lesson, you will be able to:
- Understand how to embed images, videos, and audio in HTML documents.
- Learn the proper use of the
<img>,<video>, and<audio>tags. - Apply these techniques to enrich the user experience in your Web3 projects.
Lesson Video:
Embedding Images In HTML:
<img>Tag: Used to embed images in HTML.- Attributes:
src: Specifies the path to the image file.alt: Provides alternative text for the image.widthandheight: Define the dimensions of the image.
- Attributes:
Embedding Videos In HTML:
<video>Tag: For embedding video files.- Attributes:
src: Path to the video file.controls: Adds play, pause, and volume controls.
- It’s recommended to use video hosting platforms for better performance and bandwidth management.
- Attributes:
Embedding Audio In HTML:
<audio>Tag: To include audio files.- Attributes:
src: Path to the audio file.controls: Displays audio controls like play and volume.
- Attributes:
Example Codes for Practical Application:
Expanding the Capstone Project
Expanding on our Token Minter dApp, let’s enhance its features using what you learned from this lesson.
Existing Code from Previous Lesson:
<!DOCTYPE html> <!-- Defines HTML5 document type -->
<html>
<head>
<title>Token Minter dApp</title> <!-- Page title -->
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to our Token Minter dApp</h1>
<!-- Navigation Menu -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#mint">Mint Tokens</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<!-- Main Content Section -->
<main>
<!-- Home Section -->
<section id="home">
<p>This dApp allows users to mint their own tokens on the blockchain.</p>
</section>
<section id="mint">
<p>Token minting section.</p>
<!-- Token minting form will be added here -->
<!-- Form -->
<form action="#">
<label for="tokenName">Token Name:</label>
<input type="text" id="tokenName" name="tokenName"><br>
<label for="amount">Amount:</label>
<input type="number" id="amount" name="amount"><br>
<input type="submit" value="Mint Token">
</form>
</section>
<section id="about">
<!-- Information about the dApp -->
</section>
<!-- Unordered List -->
<ul>
<!-- <li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li> -->
</ul>
<!-- Table -->
<table>
<tr>
<th>Token Name</th>
<th>Amount</th>
</tr>
<tr>
<td>Token A</td>
<td>100</td>
</tr>
<tr>
<td>Token B</td>
<td>200</td>
</tr>
</table>
</main>
<!-- Footer Section -->
<footer>
<p>Contact us: <a href="mailto:hello@dProgrammingUniversity.com">hello@dProgramminguniversity.com</a></p>
<!-- External Link -->
<p>For more information, visit
<a href="https://dProgrammingUniversity.com/Discord" target="_blank" title="dPU Discord">
dProgramming University
</a>.
</p>
</footer>
</body>
</html>
Enhance the Capstone Project:
<!-- Media Section -->
<section id="media">
<!-- Embedding an Image -->
<img src="images/token-image.jpg" alt="Token" width="300" height="200">
<!-- Embedding a Video -->
<video src="videos/minting-process.mp4" controls width="400"></video>
<!-- Embedding Audio -->
<audio src="audio/mint-sound.mp3" controls></audio>
</section>
Your code may look like this now after adding the above:
<!DOCTYPE html> <!-- Defines HTML5 document type -->
<html>
<head>
<title>Token Minter dApp</title> <!-- Page title -->
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to our Token Minter dApp</h1>
<!-- Navigation Menu -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#mint">Mint Tokens</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<!-- Main Content Section -->
<main>
<!-- Home Section -->
<section id="home">
<p>This dApp allows users to mint their own tokens on the blockchain.</p>
</section>
<section id="mint">
<p>Token minting section.</p>
<!-- Token minting form will be added here -->
<!-- Form -->
<form action="#">
<label for="tokenName">Token Name:</label>
<input type="text" id="tokenName" name="tokenName"><br>
<label for="amount">Amount:</label>
<input type="number" id="amount" name="amount"><br>
<input type="submit" value="Mint Token">
</form>
</section>
<section id="about">
<!-- Information about the dApp -->
</section>
<!-- Unordered List -->
<ul>
<!-- <li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li> -->
</ul>
<!-- Table -->
<table>
<tr>
<th>Token Name</th>
<th>Amount</th>
</tr>
<tr>
<td>Token A</td>
<td>100</td>
</tr>
<tr>
<td>Token B</td>
<td>200</td>
</tr>
</table>
<!-- Media Section -->
<section id="media">
<!-- Embedding an Image -->
<img src="/media/images/token-image.png" alt="Token minter image" width="500" height="100">
<br>
<!-- Embedding a Video -->
<video src="/media/videos/s1l7.mp4" controls width="400"></video>
<p>
<iframe
width="772" height="480"
src="https://www.youtube.com/embed/tNGYUJGs_xI"
title="How To Switch From Mainnet To Devnet on Solana Solflare Wallet - Web3 Development 101 Course Ep13"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</p>
<!-- Embedding Audio -->
<audio src="audio/mint-sound.mp3" controls></audio>
</section>
</main>
<!-- Footer Section -->
<footer>
<p>Contact us: <a href="mailto:hello@dProgrammingUniversity.com">hello@dProgramminguniversity.com</a></p>
<!-- External Link -->
<p>For more information, visit
<a href="https://dProgrammingUniversity.com/Discord" target="_blank" title="dPU Discord">
dProgramming University
</a>.
</p>
</footer>
</body>
</html>
In this update, we’ve added images, video and audio to the HTML document.
Conclusion:
Embedding media in HTML is a powerful way to enhance the visual appeal and interactivity of your Web3 application.
By incorporating images, videos, and audio, you provide a richer and more engaging user experience, which is vital in the decentralized space.
Resources & References:
To deepen your understanding of this lesson, you can explore the following resources:
These resources provide comprehensive guides and examples that will be invaluable as you learn and apply them in your journey of Web3 frontend development.
Support:
If you need help with this lesson, questions, suggestions and improvement. The best way to get help is to use the comment below:
1. First check existing comments if your questions have been answered before posting.
2. If no existing related question with an answer, then you can post a new one (kindly avoid duplicating previously asked and answered questions).
NOTE: This is the most recommended way of getting support directly from the instructor of this course. Posting on other platforms like Discord may get support from other community members and not from the course instructor directly.
Images|Videos|Links: To support your question with a screenshot, Github repo link or other media, kindly upload it somewhere online like Drive/Dropbox or Github (for codes) first, then post the link to it in your comment. Please do not upload media/codes directly, it may fail or cause your comment to be deleted.
Please ONLY post questions that are specific to this lesson not the entire course to ensure others can find it helpful. Each lesson allows comments relating to it ONLY. Off-lesson questions will be deleted even if they relate to this course as a whole but as long as they are not specific to this lesson, they are not allowed.