Web development tutorial A-2
Lesson Two: Learning HTML from Scratch - Advanced Tags and Tables
Website design
January 30, 2025
Lesson Two: Learning HTML from Scratch - Advanced Tags and Tables
Welcome to the second lesson in the series "Learning HTML from Scratch to Mastery!" In this lesson, we will dive deeper into HTML and learn how to use advanced tags such as tables and forms. Additionally, we will introduce some basic styling using CSS.
1. Tables
Tables are used to display data in an organized manner with rows and columns. In HTML, we use the following tags to create tables:
-
<table>: Defines the beginning and end of the table. -
<tr>: Defines a row in the table. -
<th>: Defines a column header (Header Cell). -
<td>: Defines a cell in the table (Data Cell).
Simple Table Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Ahmed</td>
<td>25</td>
<td>Egypt</td>
</tr>
<tr>
<td>Mohamed</td>
<td>30</td>
<td>Saudi Arabia</td>
</tr>
</table>Code Explanation:
-
border="1": Adds borders to the table (this can be removed or modified using CSS later). -
<th>: Used for column headers. -
<td>: Used for table data.
2. Forms
Forms are used to collect data from users, such as registration information or search queries. In HTML, we use the following tags to create forms:
-
<form>: Defines the beginning and end of the form. -
<input>: Used for data input (text, email, password, etc.). -
<label>: Links text to the input field. -
<button>: Used to create buttons like a submit button.
Simple Registration Form Example:
<form action="/submit" 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="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Register</button>
</form>Code Explanation:
-
action="/submit": Specifies where the data will be sent. -
method="post": Specifies the method of sending data. -
<input type="text">: Used for text input. -
<input type="email">: Used for email input. -
<input type="password">: Used for password input.
3. Semantic Tags
Semantic tags are used to give meaning to the structure of a webpage, making it more readable for browsers and search engines. Some of these tags include:
-
<header>: Used for the page header. -
<nav>: Used for the navigation section. -
<section>: Used for a section of the page. -
<article>: Used for independent content. -
<footer>: Used for the page footer.
Example Using Semantic Tags:
<header>
<h1>My Personal Website</h1>
<nav>
<a href="#about">About Me</a> |
<a href="#contact">Contact Me</a>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>I am a beginner web developer who loves learning new technologies.</p>
</section>
<footer>
<p>All rights reserved © 2023</p>
</footer>
4. Introduction to CSS
CSS (Cascading Style Sheets) is a language used to style HTML pages. CSS can be added to HTML in several ways:
-
Inline CSS:
<p style="color: blue; font-size: 20px;">This text is blue.</p>-
Internal CSS:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>- External CSS:
<head>
<link rel="stylesheet" href="styles.css">
</head>Simple Text Styling Example
<head>
<style>
h1 {
color: green;
text-align: center;
}
p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This text is styled using CSS.</p>
</body>5. Practical Exercise
Try creating an HTML page that includes the following elements:
-
A table showing your weekly schedule (days, activities).
-
A simple registration form with fields for name, email, and password.
-
Use semantic tags like
<header>and<footer>to organize the page. -
Add simple styling using CSS to change text color and font size.
What’s Next?
In the next lesson, we will dive deeper into CSS and learn how to style pages professionally. We will cover topics such as colors, fonts, margins, and containers. Get ready for more fun and practical application!
📌 Tip: Don’t hesitate to experiment with the code and modify it to see the results. Practice is the key to mastery! 🚀
Comments
There are no comments
Please login to leave a review
