- Introduction to HTML
- What is HTML
- Structure of an HTML Document
- Importance of Doctype
- Tags
- Elements
- Attributes
- Example with Tags, Elements, and Attributes
- Understanding the head and body Tags in HTML
- The Head Tag
- The Body Tag
- HTML Text Fundamentals
- Text Formatting Tags
- Paragraphs
- Strong Emphasis
- Emphasis
- Nuances of White Space in HTML
- Convention of Using Lowercase for Tags
- Working with Lists and Links in HTML
- Creating Ordered and Unordered Lists
- Ordered Lists
- Unordered Lists
- Creation of Hyperlinks Using the <a> Tag
- Creating Internal Links
- Creating External Links
- Adding Images and Media in HTML
- Embedding Images Using the <img> Tag
- Embedding Videos and Audio
- Video
- Audio
- Responsive Media Using HTML5
- Working code for embedding images, videos, and audio
- HTML Forms and Input Types
- Overview
- Creating Forms with the <form> Tag
- Importance of the <label> Tag for Accessibility
- Working code for HTML Forms and Input Types
- Tables in HTML
- Tables in HTML Overview
- Creating and Structuring Tables
- Importance of Table Accessibility
- Styling Options
- Working code for Tables in HTML
- Semantic HTML
- Semantic HTML Overview
- Importance of Semantic HTML
- Header Tag
- Nav Tag
- Article Tag
- Section Tag
- Footer Tag
- Example of a Semantic HTML Layout
- Advanced HTML Attributes
- Advanced HTML Attributes Overview
- The id Attribute
- The class Attribute
- The style Attribute
- Custom data Attributes
- Complete working code for Advanced HTML Attributes
- HTML Document Head
- HTML Document Head Overview
- Title Tag
- Meta Tags
- Link Tag
- Script Tag
- Working Code Sample
- Building a Simple Webpage Using HTML
- Project
- Project Overview
- Key Takeaways
- Course Summary
Working code for HTML Forms and Input Types
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="submit-your-form-handler" method="post">
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</p>
<p>
<input type="submit" value="Register">
</p>
</form>
</body>
</html>
Explanation of the Code
The webpage begins with the declaration of <!DOCTYPE html>. Includes settings, for language, character set, and viewport in the <head> section.
Creating a Form:
- The <form> tag specifies an action attribute to show where the form data should be sent upon submission and a method attribute set to post indicating that the form data should be part of the HTTP request body.
- Each input element (text, email, and password) is placed within a <p> tag for formatting to ensure they display on lines.
Labels and Inputs:
- The <label> tags use the for attribute to link each label with its corresponding form input by matching id attributes. This is crucial for accessibility as it allows screen readers to properly convey the purpose of each input field.
- By including the required attribute on the input tags it mandates that these fields must be completed before submitting the form providing a layer of client-side validation.
To conclude there is a submit button at the end of the form that enables users to send their information once all details are filled out.
This illustration showcases a fully operational user registration form with considerations, for accessibility. You can enhance it further with CSS for design or JavaScript, for functionalities and validation if needed
ChatGPT
Python
PowerShell
PL/SQL
Spring Boot
CSS
