codeup-web-exercises/html-elements-lec.html at main · luisOrell/codeup-web-exercises · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!--html elements
give meaning to page content

all elements have an opening and a closing tag, unless it's a void element.
-->

<!--What makes an element
First: Angle Brackets;
<> opening tag
</> closing tag

Second: Tags; an html tag is a set of characters enclosed in angle brackets that define an element's structure or behavior

Element: An html element is made up of an opening tag, it's content, and a closing tag.
-->

<!--<p>This is an example of an HTML element</p> &lt;!&ndash;tag + content = element &ndash;&gt;-->

<!--<br>-->

<!--<p>This is an example of an HTML <i>element</i></p> &lt;!&ndash;tag + content = element &ndash;&gt;-->

<!--Block level and inline elements:
Block Level Elements usually start in a new line and occupy the full width of their container

Whereas Inline Elements share its space with the parent block level element. And only take up as much width as necessary and do not create a new line.

-->

<!--<p> </p>-->

<!--Void elements-->

<!--<br>-->
<!--<hr>-->
<!--<img>-->
<!--<input>-->

<!--<input type="text" name="username">-->

<!--<p id="paragraph">content</p>-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Elements</title>
</head>

<body>

<header>
    <h1><strong><em>HTML Elements</em></strong></h1>
    <h2>HTML Elements</h2>
    <h3>HTML Elements</h3>
    <h4>HTML Elements</h4>
    <h5>HTML Elements</h5>
    <h6>HTML Elements</h6>
</header>

<main>
    <article>
        <p>Today we're gonna talk about HTML and the structure we can give to webpages</p>
    </article>

    <section>
        <a href="https://www.google.com/" target="_blank">Go to Google</a>
        <br>
        <br>
        <hr>
        <a href="https://codeup-curriculum.web.app/curriculum/java/3.0.1/html-css/elements" target="_blank">Codeup</a>
        <br>
        <h3>Favorite places to visit</h3>

        <ol>
            <li>Colorado</li>
            <li>Hawaii</li>
            <li>Italy</li>
        </ol>

        <h3>Favorite Hobbies</h3>
        <ul>
            <li>Swimming</li>
            <li>Cleaning Car</li>
            <li>Sleeping</li>
        </ul>
    </section>

    <!--    section is similar to paragraphs, writing an essay example-->
    <!--    Img will not work due to not being saved into directory-->
    <section>
        <img src="img/hamster.jpg" alt="hamster" style="width: 60vh">
    </section>

</main>

<h2>Our Products</h2>

<aside>
    <table>
        <tr>
            <th>Products</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>Iced Tea</td>
            <td>$2.99</td>
        </tr>
        <tr>
            <td>Hamburger and Fries</td>
            <td>$11.99</td>
        </tr>
    </table>
</aside>

<footer>
    Lecture Completed
</footer>

</body>

</html>