-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
44 lines (43 loc) · 2.12 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
<!-- This is an html comment. The following line tells the browser this is an HTML5 document -->
<!DOCTYPE html>
<html>
<!-- The head section of an html file is sent to the browser before the body. It contains stuff that isn't actually displayed to the user. Content goes in the body section -->
<head>
<!-- The following line tells the browser where to find the styling -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- The following line "enables" jQuery by downloading the api from the internet -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- The following line tells the browser to interpret what comes next as javascript -->
<script>
// This is a javascript comment. The following line uses jQuery to know when the page is done loading.
$(document).ready(function() {
alert("The page is done loading!");
/*
The following line binds a function to the list elements that is triggered when any list element is clicked. The function alerts the user what is about to happen, then toggles the css class "underline".
The underline class is defined in style.css, and all it does is add an underline. Try creating your own class that changes the background color and font color (background-color and color respectively
in css), and changing this click function to toggle that class instead of the underline class.
*/
$("li").click(function() {
alert("Toggling the underline class");
$(this).toggleClass("underline");
});
});
</script>
</head>
<!-- The body is where the content goes -->
<body>
<!-- h1 is a type of header. I believe they go all the way down to h6 -->
<h1>This is a header for the page</h1>
<!-- p is for paragraph -->
<p id="red-background">This is a paragraph</p>
<p>This is a different paragraph</p>
<!-- ul is for unordered list (no numbers) -->
<ul>
<li>List element</li>
<!-- Notice how this list element has a class -->
<li class="underline">Another list element</li>
<li class="underline">Click us to toggle underline!</li>
<li>The last list element</li>
</ul>
</body>
</html>