Learn HTML Basics to Advance in 7 Days: Day Two
Advanced HTML Tags
Welcome to Day Two of learning HTML. Today, we will explore more advanced HTML tags. These tags help you create more complex and interactive webpages.
- <div></div> - Defines a division or section in an HTML document. It is often used as a container for other elements.
- <span></span> - Used to group inline-elements in a document.
- <table></table> - Defines a table. Tables are used to display data in a tabular format.
- <form></form> - Used to create an HTML form for user input.
- <input> - Defines an input control.
- <textarea></textarea> - Defines a multi-line text input control.
- <button></button> - Defines a clickable button.
- <select></select> - Defines a drop-down list.
- <option></option> - Defines an option in a drop-down list.
- <label></label> - Defines a label for an <input> element.
HTML Forms
Forms are used to collect user input. Let's create a simple form:
<form action="submit_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Submit">
</form>
This form collects a name, email, and message from the user. When the user submits the form, the data is sent to "submit_form.php" using the POST method.
Tables in HTML
Tables are useful for displaying data in a structured way. Here is an example of a simple table:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Anna</td>
<td>30</td>
<td>London</td>
</tr>
</table>
This table has three columns: Name, Age, and City. It has two rows of data.
HTML Multimedia
HTML supports various multimedia elements like images, audio, and video. Let's look at some examples:
Images
<img src="image.jpg" alt="Description of image">
The <img> tag is used to embed an image in an HTML page. The "src" attribute specifies the path to the image, and the "alt" attribute provides alternative text for the image.
Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The <audio> tag is used to embed sound content in an HTML page. The "controls" attribute adds audio controls, like play, pause, and volume.
Video
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The <video> tag is used to embed video content in an HTML page. The "controls" attribute adds video controls, like play, pause, and volume.
Conclusion
Today, we learned more advanced HTML tags, how to create forms, use tables, and add multimedia elements like images, audio, and video. These tools allow you to create more interactive and engaging webpages. Keep practicing these elements to master HTML.
FAQ
What is a <div> tag used for?
The <div> tag is used to define a division or section in an HTML document. It is often used as a container for other elements.
How do you create a form in HTML?
Forms in HTML are created using the <form> tag, along with various input elements like <input>, <textarea>, and <button>.
What is the purpose of the <table> tag?
The <table> tag is used to create a table in an HTML document. Tables display data in rows and columns.
How do you add an image to an HTML page?
To add an image to an HTML page, use the <img> tag with the "src" attribute to specify the image's path and the "alt" attribute to provide alternative text.
Can you embed audio and video in HTML?
Yes, you can embed audio using the <audio> tag and video using the <video> tag. Both tags support various attributes to control playback.