coding-101-example/introToHtml.html at master · MUCodeAcademy/coding-101-example · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!--Basic description of the page useful for search engine occasionally included with results-->
    <meta
      name="description"
      content="An introduction to HTML and what it's basic structure."
    />
    <!--Whether engines should add this to a page or not (nofollow is this page but no links, noindex means it shouldn't be-->
    <!--added at all-->
    <meta name="robots" content="noindex" />
    <!--Sets the viewport for mobile devices so that the webpage fits on the screen-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--The title is what displays in the tab of the browser-->
    <title>Intro To HTML: It's not too bad...</title>

    <link rel="stylesheet" type="text/css" href="basicCSSOverview.css" />
  </head>
  <body>
    <hr /> <!-- "Horizontal Rule" -->
    <header class="container" id="top-header">
      <p class="center">
        The Header tag is useful for intro content in the whole document or as a
        header for a section h1-6 tags are used as headers and are block
        elements
      </p>
      <h1 class="center">This is an h1 heading</h1>
      <h2 class="center">This is an h2 heading</h2>
      <h3 class="center">This is an h3 heading</h3>
      <h4 class="center">This is an h4 heading</h4>
      <h5 class="center">This is an h5 heading</h5>
      <h6 class="center" id="otherId">This is an h6 heading</h6>
    </header>
    <hr />
    <nav class="navigation">
      <div class="link center">
        <a title="Same Window" href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">
          Mozilla HTML
        </a>
      </div>
      <div class="link center">
        <a href="https://www.codecademy.com" target="_blank" title="New Window">
          CodeCademy
        </a>
      </div>
      <div class="link center">
        <a href="https://midlandu.edu" title="Midland University">Midland</a>
      </div>
    </nav>
    <hr />

    <div class="container">
      <p>
        HTML does not


        care about spacing.

        If you want to add a line break,
        <br />
        <br />
        use the 'br' tag!
      </p>
    </div>
    <hr />
    <div class="container">
      <header>
        <h3 class="center">
          Lists allow for you to be able to show information in a highly legible
          format.
        </h3>
      </header>
      <div>
        The ordered list allows for you to show items in a numbered pattern:
        <ol>
          <li>Fourth item in a list</li>
          <li>First item in a list</li>
          <li>Second item in a list</li>
          <li>Third item in a list</li>
        </ol>
      </div>
      <div>
        The unordered list allows for you to show items with a simple bullet
        point next to them:
        <ul>
          <li>First item in a list</li>
          <li>Second item in a list</li>
          <li>Third item in a list</li>
          <li>Fourth item in a list</li>
        </ul>
      </div>
    </div>
    <hr />
    <div class="container">
      <header>
        <h3 class="center">
          There are some tags that allow for some styling options without using
          CSS
        </h3>
      </header>
      <p>
        In this paragraph you'll see some of the options. You can use
        <b> a b tag for bold text </b>,
        <em>the em tag for things you want to put emphasis on</em>, or
        <strong> strong for increased emphasis </strong> of course, these are
        <sup>only</sup> <sub>a few</sub> of the ones available.
      </p>
    </div>
    <hr />
    <div class="container" id="cuteBear">
      <header>
        <h3 class="center">
          But what web page would be complete without images?
        </h3>
      </header>

      <img
        src="Bear_Roar.webp"
        title="Angry Bear"
        alt="Scary Bear Picture"
        id="bearPic"
      />
    </div>

    <footer class="container">
      <hr />
      Hr tags are nice easy lines to separate content especially like this
      footer here!
      <p>
        Contact me here:
        <a href="mailto:example@example.com" title="My E-mail"
          >example@example.com</a
        >
        Or here: Call us! at
        <a title="our number" href="tel:444-444-4444">444-444-4444</a>
      </p>
    </footer>

    <!-- This is for JavaScript, which we'll learn about later in the class -->
    <script>
      let bear = document.getElementById("bearPic");
      let numClicked = 0;
      function bearClick() {
        numClicked++;
        console.log("You've clicked the bear " + numClicked + " times");
        if (numClicked < 0) {
          "";
        } else {
          alert("ROAR!!");
        }
        numClicked < 0 ? "" : alert("ROAR!!");
      }
      bear.addEventListener("click", bearClick);
    </script>
  </body>
</html>