Today was an exciting day as I delved deeper into HTML and learned some essential elements that are fundamental for creating structured and interactive web pages. Here's a summary of what I accomplished:
1. Creating Tables in HTML
I learned how to create tables in HTML, which are useful for displaying data in a structured format. Tables are composed of rows (<tr>) and cells (<td> for data cells and <th> for header cells). One of the most interesting aspects I learned about was the use of colspan and rowspan attributes:
colspan: This attribute allows a cell to span across multiple columns.rowspan: This attribute allows a cell to span across multiple rows.
These attributes help in creating complex table layouts and merging cells for better organization of data.
Here’s an example of a table I created to display a food menu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML LV-3</title>
</head>
<body>
<table border="black">
<caption> <b>Food Menu</b></caption>
<thead>
<tr>
<th rowspan="2">Item</th>
<th colspan="2">Price</th>
</tr>
<tr>
<th>INR</th>
<th>USD</th>
</tr>
</thead>
<tbody>
<tr>
<td>Frooti</td>
<td>10</td>
<td>0.14</td>
</tr>
<tr>
<td>Samosa</td>
<td>1</td>
<td>0.17</td>
</tr>
<tr>
<td>Chips</td>
<td>20</td>
<td>0.28</td>
</tr>
</tbody>
</table>
</body>
</html>
Here’s another example of a table displaying physical training data:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Practice</title>
</head>
<body>
<table border="black">
<caption>P.T Data</caption>
<tr>
<td rowspan="2"></td>
<td colspan="2" >Average</td>
<td rowspan="2">Red Eyes</td>
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
</tr>
<tbody>
<tr>
<td>Males</td>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<td>Females</td>
<td>1.7</td>
<td>0.002</td>
<td>30%</td>
</tr>
</tbody>
</table>
</body>
</html>
##
2. Making Forms in HTML
Forms are crucial for collecting user input, and I learned about various elements and attributes used in forms:
Input Elements: The
<input>tag is used to create various types of input fields like text, password, email, etc.Placeholder Attribute: This attribute provides a hint to the user about what to enter in the input field.
Labels: The
<label>element is used to define labels for input elements, making forms more accessible and user-friendly.
Here’s an example of a form I created:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms in HTML</title>
</head>
<body>
<form action="/action">
<div>
<label for="username">Username</label>
<input type="text" placeholder="Enter the Username" id="username">
</div>
<div>
<label for="password">Password</label>
<input type="password" placeholder="Enter the password" id="password">
</div>
<button>Submit</button>
<button>Hello</button>
</form>
</body>
</html>
3. Learning About the Button Element
I also learned about the <button> element, which is used to create clickable buttons. Buttons can be used to submit forms or to trigger JavaScript functions. The <button> element is quite versatile as it allows for content like text, images, or any HTML within it.
Here's an example of a button element:
<button type="button" onclick="alert('Button clicked!')">Click Me</button>
Overall, Day 5 was packed with valuable insights into HTML. Learning about tables, forms, and buttons has equipped me with the knowledge to create more interactive and structured web pages. Stay tuned for more updates on my HTML learning journey!