<h2>1.1 What is HTML?</h2>
<p>
HTML stands for <strong>HyperText Markup Language</strong>. It is the standard markup language used to create and structure content on web pages.
</p>
<p>
HTML tells the browser how different parts of a web page should be organized. For example, headings, paragraphs, links, images, lists, tables, and forms can all be created using HTML elements.
</p>
<div class="note-box">
<strong>Note:</strong> HTML is a markup language, not a programming language. It describes the structure and meaning of web content.
</div>
<h2>1.2 Why Learn HTML?</h2>
<p>
HTML is the foundation of almost every website. Learning HTML is a good starting point for anyone interested in web development.
</p>
<ul>
<li>It is easy to learn for beginners.</li>
<li>It is used to structure web pages.</li>
<li>It works with CSS to create attractive web pages.</li>
<li>It works with JavaScript to add interactivity.</li>
<li>It is supported by all modern web browsers.</li>
</ul>
<h2>1.3 HTML Document Structure</h2>
<p>
A basic HTML document contains several important parts. The following example shows the standard structure of an HTML page.
</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page.</p>
</body>
</html></code></pre>
<h2>1.4 Understanding the HTML Structure</h2>
<p>
Let's understand the main parts of the document.
</p>
<table>
<thead>
<tr>
<th>Part</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><!DOCTYPE html></code></td>
<td>Tells the browser that the document uses HTML5.</td>
</tr>
<tr>
<td><code><html></code></td>
<td>The root element of the HTML document.</td>
</tr>
<tr>
<td><code><head></code></td>
<td>Contains information about the page that is not normally displayed directly on the page.</td>
</tr>
<tr>
<td><code><title></code></td>
<td>Defines the title displayed in the browser tab.</td>
</tr>
<tr>
<td><code><body></code></td>
<td>Contains the visible content of the web page.</td>
</tr>
</tbody>
</table>
<h2>1.5 HTML Tags</h2>
<p>
HTML uses tags to identify different types of content. Most HTML elements have an opening tag and a closing tag.
</p>
<pre><code><p>This is a paragraph.</p></code></pre>
<p>
Here, <code><p></code> is the opening tag and <code></p></code> is the closing tag. The text between them is the content of the paragraph.
</p>
<h2>1.6 HTML Elements</h2>
<p>
An HTML element generally consists of an opening tag, content, and a closing tag.
</p>
<pre><code><h1>Welcome to GWALNET</h1></code></pre>
<p>
The complete structure above is an HTML element.
</p>
<h2>1.7 HTML Attributes</h2>
<p>
Attributes provide additional information about an HTML element. They are normally written inside the opening tag.
</p>
<p>
For example, the <code>href</code> attribute specifies the destination of a link.
</p>
<pre><code><a href="https://example.com">Visit Website</a></code></pre>
<p>
In this example, <code>href</code> is an attribute and its value is <code>https://example.com</code>.
</p>
<h2>1.8 Headings in HTML</h2>
<p>
HTML provides six heading levels, from <code><h1></code> to <code><h6></code>.
</p>
<pre><code><h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6></code></pre>
<p>
The <code><h1></code> element represents the highest-level heading, while <code><h6></code> represents the lowest-level heading.
</p>
<h2>1.9 Paragraphs</h2>
<p>
The <code><p></code> element is used to create a paragraph.
</p>
<pre><code><p>
HTML is used to structure content on web pages.
</p></code></pre>
<h2>1.10 HTML Links</h2>
<p>
Links allow users to navigate from one page to another. The <code><a></code> element is used to create a hyperlink.
</p>
<pre><code><a href="https://www.example.com">
Visit Example
</a></code></pre>
<h2>1.11 HTML Comments</h2>
<p>
Comments are notes written inside HTML code. They are not displayed as normal content in the browser.
</p>
<pre><code><!-- This is an HTML comment --></code></pre>
<p>
Comments can help developers understand and organize their code.
</p>
<h2>1.12 Your First Complete Web Page</h2>
<p>
The following example combines some of the basic HTML elements learned in this chapter.
</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>
This is my first HTML web page.
</p>
<a href="https://www.example.com">
Visit Example
</a>
</body>
</html></code></pre>
<h2>1.13 Key Points</h2>
<ul>
<li>HTML stands for HyperText Markup Language.</li>
<li>HTML is used to structure web pages.</li>
<li>HTML documents contain elements and tags.</li>
<li>Attributes provide additional information about elements.</li>
<li>The visible content of a web page is placed inside the <code><body></code> element.</li>
<li>The <code><head></code> element contains page metadata and other document information.</li>
<li>HTML works together with CSS and JavaScript to build modern websites.</li>
</ul>
<h2>1.14 Practice Task</h2>
<p>
Create an HTML page that contains:
</p>
<ol>
<li>A main heading with your name.</li>
<li>A paragraph describing yourself.</li>
<li>A subheading called "My Hobbies".</li>
<li>A link to a website you like.</li>
<li>An HTML comment explaining one part of your code.</li>
</ol>
<div class="note-box">
<strong>Tip:</strong> Save your file with the <code>.html</code> extension and open it in a web browser to see the result.
</div>