fssd-html/basic01-content1.html at master · anmarjarjees/fssd-html · 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
<!DOCTYPE html>
<html lang="en-CA">

<head>
    <meta charset="UTF-8">
    <title>My First Page</title>
</head>

<body>
    <!--
        CTRL+/

        HTML Elements:
        - The full/normal element => start/opening Tag and end/closing tag
        - Empty element => start/opening tag (no closing tag)
     -->
    <h1>HTML Module</h1>
    <!--
    Horizontal Ruler/Line => <hr>

    The new/modern way for HTML5: <hr>
    The classical way for older version (valid in HTML5): <hr />

    another empty element: <br>
    -->
    <hr>
    <p>
        <!-- opening tag -->
        <!--
                    the content of the paragraph is
                    "Paragraph is element with opening and closing tag."
                    and it will be shown on the web page
        -->
        A paragraph is an element with opening and closing tag.
    </p> <!-- closing tag has a forward slash -->
    <hr />
    <p>Here is my first funny HTML page!!</p>
    <br />
    <!-- br is an element for line break-->
    <!-- there is no </br> tag -->
    <hr /><!-- hr stands for horizontal line => there is no </hr> tag -->
    <!--
        To generate a random p,
        type lorem press the TAB key

        ALT + Z => Word Wrap
    -->
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br> Quos aperiam fugit autem architecto neque id
        consequatur, <br>dolore molestias dolorum. At dolore alias voluptatem quibusdam possimus eum deserunt nam
        adipisci nostrum?</p>
    <p>We need to learn <em>HTML</em> before CSS</p>
    <hr />
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <p>We are studying using LMS:</p>
    <!--
        Another empty element is the image tag: <img> or <img />

        image element has only one tag <img />. There is no content.
        All elements can have what are called attributes.
        If the element consists of an opening and a closing tag,
        the attributes are referred to in the opening tag.

        Attributes are additional properties (information) of an element.
        In our image example listed in our code below,
        you can see it uses a src attribute.

        We will talk about images in details,

        NOTE:
        img has another very important attribute beside "src"
        it's called "alt", it's also a mandatory attribute and we will explain it later
     -->
    <img src="no-image.jpg" />
    <!--
    src attribute:
    - the location/path for the image if needed
    - the image file name

    this img element is missing "atl" attribute to be discussed later
    -->

    <img src="code-01.png">
</body>

</html>