fssd-html/basic03-block-inline.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
87
88
89
90
<!DOCTYPE html>

<html lang="en-CA">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block-Level and Inline Elements</title>
</head>

<body>
    <!--
        HTML elements are usually either block-level elements or inline elements.
        A block-level element occupies the entire space of its parent element (container),
        thereby creating a block.

        Browsers typically display the block-level element with a new line both before
        and after the element.

        They have a rectangular structure (like a Box that has 4 borders)

        ALT+SHIFT+F => Format our code
     -->
    <h1>heading 1</h1>
    <hr>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>

    <p>Here is my <u>first paragraph</u></p>
    <p>We need to learn <em>HTML</em> first, then <em>CSS</em>, and finally <b>JavaScript</b> for the front end.</p>


    <!--
        div Element:
        The best example of a block-level element: <div></div> (division)
        It's a block-level element that defines a division on an HTML page.
        it's used to place related content inside it to provide structural context on a page.

        span Element:
        The best example of inline element: <span></span>
        It's a generic inline container for phrasing your text content.
        It's used to group elements for styling purposes.
    -->
    <div>
        Here is my first div
    </div>

    <div>
        Here is my second div
    </div>

    <!--
        basic example of span
        We DON'T use span by itself, it should be embedded inside a block element
    -->
    <span>
        Here is the first span content
    </span>

    <span>
        Here is the second span content
    </span>

    <span>
        Here is the third span content
    </span>

    <p>Our college is <u><em><b>Canadian Business College</b></em></u> and we in Toronto Campus</p>

    <!--
        To apply a unique style for a part in my text
        we will do it with CSS
     -->
    <p>Our college is <span>Canadian Business College</span> and we in Toronto Campus</p>

    <!-- below is just for fun and practice: placing div inside p !!!! -->
    <p>Our college is
    <div>Canadian Business College</div> and we are in Toronto Campus</p>

    <!--
        Till now, the inline elements:
        - <b></b>
        - <u></ul>
        - <em></em>
        - <img>
        - <span>
     -->
</body>

</html>