Learn HTML: Advanced Concepts
6. Forms in HTML
HTML forms are used to collect user input. Forms contain various elements like text boxes, radio buttons, checkboxes, and submit buttons.
Here's an example form:
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female<br>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label><br>
<input type="submit" value="Submit">
</form>
Elements within a form include:
<input type="text">: Text box<input type="email">: Email input box<input type="radio">: Radio buttons for options<input type="checkbox">: Checkboxes<input type="submit">: Submit button
7. Multimedia in HTML
HTML allows you to embed multimedia like images, audio, and videos into a webpage.
Here's an example of how to add multimedia:
<!-- Adding an Image -->
<img src="image.jpg" alt="A description of the image" width="500">
<!-- Adding Audio -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<!-- Adding Video -->
<video width="600" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
Multimedia elements:
<img>: Adds an image to the page.<audio>: Embeds an audio file.<video>: Embeds a video file.
8. Lists in HTML
HTML supports ordered and unordered lists. Ordered lists use numbers, while unordered lists use bullet points.
<!-- Unordered List -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Ordered List -->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Two main types of lists:
<ul>: Unordered list with bullet points.<ol>: Ordered list with numbers.
9. Semantic HTML Tags
Semantic HTML introduces meaningful tags that clearly describe their purpose. These include:
<header>: Defines the header section of a webpage.<nav>: Defines a navigation menu.<main>: Specifies the main content area of a webpage.<section>: Defines a section within the document.<article>: Defines an article or independent piece of content.<footer>: Defines the footer section of a webpage.
Example of using semantic HTML:
<header>
<h1>My Website</h1>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a>
</nav>
</header>
<main>
<article>
<h2>Introduction to HTML</h2>
<p>HTML is the standard markup language for creating web pages...</p>
</article>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
10. Creating Hyperlinks
Links are created using the <a> tag. They allow users to navigate between different pages or sections.
<a href="https://www.example.com">Go to Example.com</a>
<a href="#section1">Jump to Section 1 on the same page</a>
