This repository has been archived by the owner on Nov 10, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
88 lines (54 loc) · 2.14 KB
/
index.html
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
<!doctype html>
<!-- this is an HTML document!
It represents a webpage. -->
<html>
<!-- this is the HEAD of this page
It contains some metadata about the page.
Nothing in the HEAD is visible on the webpage. -->
<head>
<!-- this is the TITLE of the page, which shows up
in the tab in the browser -->
<title>Tip Calculator 3000</title>
<!-- this is a LINK to a CSS file.
the LINK tag tells the browser where to look for
other things related to this page, like a CSS file.
A CSS file tells the browser how to "style" the HTML,
aka what the tags should look like.
In this particular LINK tag, we see the CSS file
the page wants us to use for this page is at main.css. -->
<link rel="stylesheet" href="main.css"/>
</head>
<!-- this is the BODY of this page.
This part contains everything that shows up on the page. -->
<body>
<!-- DIV tags are generic tags that group other
more specific tags into a hierarchy -->
<div id="menubar">
<!-- H1 is an example of a specific, purpose-made
HTML tag. It represents a high-level heading -->
<h1>Tip Calculator 3000</h1>
<!-- this is an A tag, which is a hyperlink!
the "href" attribute on this tag tells you where
the link leads. -->
<a href="about.html">About This App</a>
</div>
<div class="inputBox">
<label for="price">Price</label>
<!-- An INPUT tag is one of the few ways we can
make a text field in web applications -->
<input id="price" type="number" min="0"/>
</div>
<div class="inputBox">
<label for="percent">Percent</label>
<input id="percent" type="number" min="1" max="50"/>
</div>
<!-- a BUTTON is an HTML element users can click on
to make something happen! What happens? We use
JavaScript programs to control that part. -->
<button id="submit">Calculate Tip</button>
<!-- this is a SCRIPT. It contains any
programs that need to run on this page, and is written
in a programming language called JavaScript. -->
<script src="script.js"></script>
</body>
</html>