HTML-CSS-Project/chapter1.html at main · TulyXPlatform/HTML-CSS-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chapter 1: GETTING TO KNOW HTML</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <h2 class="chapter-header">Chapter 1:  GETTING TO KNOW HTML</h2>

    <div class="tag-section">
        <h3>&lt;Tag&gt; </h3>
        <p class="tag-description">An HTML element typically has three portions<br>1. Opening tag, <br>2. Content <br>3. Closing tag</p>

    </div>
    <div class="tag-section">
        <h3>&lt;!DOCTYPE&gt; Declaration</h3>
        <p class="tag-description">The &lt;!DOCTYPE&gt; declaration defines the document type and version of HTML.</p><p>This tells the browser that this is an HTML5 document.</p>
        <div class="tag-demo">
            <div class="head-demo">
                <p>&lt;!DOCTYPE html&gt;</p>

            </div>
        </div>
    </div>
    <div class="tag-section">
        <h3>&lt;html&gt; Tag</h3>
        <p class="tag-description">The &lt;html&gt; tag represents the root of an HTML document. It is the container for all other HTML elements.</p>
        <div class="tag-demo">
            <div class="head-demo">
                <p> &lt;html&gt;&lt;/html&gt; </p>
            </div>
        </div>
    </div>

    <div class="tag-section">
        <h3>&lt;head&gt; Tag</h3>
        <p class="tag-description">The &lt;head&gt; tag contains meta-information about the HTML document, such as its title, scripts, and styles.</p>
        <div class="tag-demo">
            <div class="head-demo">
                <p> &lt;head&gt;&lt;/head&gt; </p>
            </div>
        </div>
    </div>

    <div class="tag-section">
        <h3>&lt;body&gt; Tag</h3>
        <p class="tag-description">The &lt;body&gt; tag contains the visible content of the HTML document.All the content you're reading right now is inside the &lt;body&gt; tag.</p>
        <div class="tag-demo">
            <div class="head-demo">
                <p>&lt;body&gt;&lt;/body&gt;</p>
            </div>
        </div>
    </div>


    <div class="tag-section">
        <h3>&lt;title&gt; Tag</h3>
        <p class="tag-description">The &lt;title&gt; tag defines the title of the document, shown in the browser's title bar or tab.The browser tab has the title of this page: "Chapter 1: Basic HTML Structure".</p>
        <div class="tag-demo">
            <div class="head-demo">
                <p>&lt;title&gt;&lt;/title&gt;</p>
            </div>
        </div>
    </div>

    <div class="tag-section">
        <h3>&lt;meta&gt; Tag</h3>
        <p class="tag-description">The &lt;meta&gt; tag provides metadata about the HTML document, such as character set, viewport settings, and descriptions.This page uses &lt;meta charset="UTF-8"&gt; to specify character encoding and &lt;meta name="viewport"&gt; for responsive design.</p>
        <div class="tag-demo">
            <div class="head-demo">
                <p>&lt;meta charset="UTF-8"/&gt;</p>
            </div>
        </div>
    </div>

    <div class="tag-section">
        <h3>&lt;style&gt; Tag</h3>
        <p class="tag-description">The &lt;style&gt; tag is used to define CSS styles for the HTML document. We can use inline, internal and external css.</p>
        <div class="tag-demo">
            <div class="head-demo">
                <p>For inline css: "style" Attribute</p>
                <p> For internal css: &lt;style&gt; &lt;style&gt;</p>
                <p>For external css: &lt;link rel="stylesheet" href="style.css"&gt; </p>
            </div>
        </div>
    </div>
</body>
</html>