Crafting Simple HTML Documents
Introduction:
This lesson is dedicated to guiding beginners through the process of creating simple HTML documents.
These documents form the foundation of web pages and are crucial for 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 how to create a basic HTML document.
- Be able to structure a simple web page using HTML.
- Apply your knowledge to develop the frontend of a decentralized application (dApp).
Lesson Video:
What is an HTML Document?
An HTML document is a file containing Hypertext Markup Language code.
It is the standard format for documents designed to be displayed in a web browser.
Creating a Basic HTML Document:
- Document Type and Structure: Every HTML document starts with a
<!DOCTYPE html>declaration, which defines the document type and HTML version. The basic structure includes<html>,<head>, and<body>tags. - Head Section: The
<head>section contains meta-information about the document, such as the<title>tag, which sets the title of the webpage. - Body Section: The
<body>tag encloses the content that will be visible to users. It includes text, images, links, and other elements.
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:
<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>
Expanding the Document:
<body>
<!-- Header Section -->
<header>
<h1>Welcome to our Token Minter dApp</h1>
<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>
<section id="home">
<p>This dApp allows users to mint their own tokens on the blockchain.</p>
</section>
<section id="mint">
<!-- Token minting form will be added here -->
</section>
<section id="about">
<!-- Information about the dApp -->
</section>
</main>
<!-- Footer Section -->
<footer>
<p>Contact us: <a href="mailto:hello@dProgramminguniversity.com">hello@dProgramminguniversity.com</a></p>
</footer>
</body>
In this update, we’ve organized the document into clear sections: header, main content, and footer. Each section is marked by respective HTML tags (<header>, <main>, <footer>), providing a clear, logical structure to the webpage.
Conclusion:
Creating a basic HTML document is a vital skill for any web developer.
As a beginner, understanding these fundamentals is especially crucial in the realm of Web3 development, where front-end interfaces for dApps require clear structure and organization.
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.