HTML Attributes: What They Are and How to Use Them
Introduction:
In this lesson, we will explore HTML attributes, a fundamental aspect of HTML that enhances the functionality and appearance of web elements.
This lesson is tailored for beginners, regardless of their prior coding experience, with a focus on the relevance of these attributes in Web3 development.
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 what HTML attributes are and how they function.
- Recognize common HTML attributes and their applications.
- Learn to apply these attributes in practical scenarios, particularly in the context of Web3.
Lesson Video:
What are HTML Attributes?
HTML attributes provide additional information about elements. They are always specified in the start tag and usually come in name/value pairs like name="value".
Attributes are used to adjust the behaviour and appearance of HTML elements.
Common HTML Attributes and Their Uses:
src(in<img>tag): Specifies the URL of the image to be displayed.href(in<a>tag): Indicates the link’s destination.alt(in<img>tag): Provides alternative text for an image.id: Assigns a unique identifier to an element.class: Classifies elements for styling with CSS.style: Applies inline CSS styles to an element.title: Offers additional information about an element, typically shown as a tooltip.
Example Codes for Practical Application:
Expanding the Capstone Project
Expanding on our Token Minter dApp, let’s enhance its features using HTML attributes.
Existing Code from Previous Lesson:
<!DOCTYPE html>
<html>
<head>
<title>Token Minter dApp</title>
</head>
<body>
<h1>Welcome to our Token Minter dApp</h1>
<p>This dApp allows users to mint their own tokens on the blockchain.</p>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About the dApp</h2>
<p>Learn more about how our dApp works and the blockchain technology behind it.</p>
</section>
<aside>
<h3>Additional Resources:</h3>
<p>1. Learn more about blockchain technology and how it works.</p>
<!-- Links to additional resources -->
</aside>
<footer>
<p>Contact us: <a href="mailto:hello@dProgramminguniversity.com">hello@dProgramminguniversity.com</a></p>
</footer>
</body>
</html>
Adding Attributes to Enhance the Capstone Project:
<body>
<h1 id="main-title">Welcome to our Token Minter dApp</h1> <!-- Main heading -->
<p title="Introduction to Token Minter">This dApp allows users to mint their own tokens on the blockchain.</p> <!-- stite tagline/description -->
<img src="logo.png" alt="Token Minter dApp Logo" style="width:100px;height:100px;">
<!-- Existing content here -->
</body>
In this update, we’ve used the id attribute to uniquely identify the main heading, the title attribute to provide additional information, the src and alt attributes for image embedding, and the href attribute to link to external resources.
Conclusion:
Understanding and utilizing HTML attributes is crucial in creating interactive and user-friendly web pages, especially in Web3 applications.
These attributes help in customizing the behavior and presentation of your content, making your dApp more engaging and accessible.
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 HTML attributes 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.