Module 2: Basic HTML Elements
In this module, we will cover the fundamental HTML elements: Headings, Paragraphs, Line Breaks, and Horizontal Rules. These elements are crucial for structuring content on a web page.
1. Understanding Headings (<h1> to <h6>)
Headings are used to define the structure and hierarchy of content on a webpage. HTML provides six levels of headings (<h1> to <h6>), where <h1> is the largest and most important, and <h6> is the smallest and least important.
Steps to Practice:
Open a code editor (like VS Code, Sublime Text, or Notepad++).
Create a new file and save it as headings.html.
Write the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headings Example</title>
</head>
<body>
<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<h4>This is an H4 Heading</h4>
<h5>This is an H5 Heading</h5>
<h6>This is an H6 Heading</h6>
</body>
</html>
Open the file in a browser and observe the different heading sizes.
Explanation:
<h1> is used for the main title or the most important heading.
<h2> to <h6> are used for subheadings or secondary information.
2. Paragraphs (<p>)
The <p> tag is used to create paragraphs of text. A paragraph adds space above and below the text by default.
Steps to Practice:
Create a new file and save it as paragraphs.html.
Add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph Example</title>
</head>
<body>
<h1>About HTML</h1>
<p>HTML stands for HyperText Markup Language. It is used to structure web pages and their content.</p>
<p>This is another paragraph to demonstrate spacing between multiple paragraphs.</p>
</body>
</html>
Open the file in a browser to see how paragraphs are displayed.
Explanation:
Paragraphs are automatically spaced apart from other elements.
You can create multiple paragraphs to separate content for readability.
3. Line Breaks (<br>)
The <br> tag is used to add a line break within text, forcing the content after it to appear on a new line.
Steps to Practice:
Create a new file named line-breaks.html.
Add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Break Example</title>
</head>
<body>
<h1>Line Breaks</h1>
<p>This is the first line.<br>This is the second line after a break.<br>This is the third line.</p>
</body>
</html>
Open the file in a browser and observe the output.
Explanation:
The <br> tag does not require a closing tag.
It is useful for breaking lines of text without starting a new paragraph.
4. Horizontal Rules (<hr>)
The <hr> tag creates a horizontal line, often used to separate content.
Steps to Practice:
Create a new file named horizontal-rules.html.
Add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Rules Example</title>
</head>
<body>
<h1>Section 1</h1>
<p>This is the first section of content.</p>
<hr>
<h1>Section 2</h1>
<p>This is the second section of content.</p>
</body>
</html>
Open the file in a browser and observe the horizontal line between the sections.
Explanation:
The <hr> tag is self-closing and adds a horizontal divider.
It is commonly used to improve the visual structure of a webpage.
Final Exercise
Create a file named exercise.html.
Combine all the tags learned in this module into a single document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics Exercise</title>
</head>
<body>
<h1>HTML Basics</h1>
<p>Welcome to the basics of HTML. Below, you will see examples of headings, paragraphs, line breaks, and horizontal rules.</p>
<h2>Headings</h2>
<p>Headings are used to structure content on a page:</p>
<h3>This is an H3 Heading</h3>
<p>Notice the size difference from H1 to H3.</p>
<hr>
<h2>Paragraphs and Line Breaks</h2>
<p>This is a paragraph of text.<br>This sentence is on a new line, thanks to the line break tag.</p>
<hr>
<h2>Horizontal Rule</h2>
<p>The horizontal rule creates a line to separate sections.</p>
<hr>
</body>
</html>
Open the file in a browser to review your work.
Image
Here’s a visual representation of how the HTML elements will appear:
Headings:
H1: Largest Heading
H2: Second Largest
...
H6: Smallest Heading
Paragraphs and Line Breaks:
This is a paragraph.
This is another line. (after <br>)
Horizontal Rule:
----------
Separator Line
----------
No comments:
Post a Comment