NotRyan.github.io/htmlTest.html at master · NotRyan/NotRyan.github.io · 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
<!DOCTYPE html>
<html>
<head>
<title>HTML Learning</title>
<style>
p {
    color: red;
}
#paragraph2 {
    color: blue;
}
p.type1 {
    color:green
}
a:link{
color:green
}
a:visited{
color:red
}
img.textIcon{
width:42px;height:42px
}
#sloth{
width:25%;
height:25%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<img src="/img/sloth.jpeg" alt="Sloth not found" id="sloth">
<p style="border:10px solid black;padding:10px;margin:15px">This is paragraph ONE</p>
<p id="paragraph2">This is a paragraph.</p>

<p class="type1">This is a paragraph.</p>

<p>Wowee look at these <img src="/img/sloth.jpeg" class="textIcon" onclick="changeParagraph()"> ZANY slothss</p>

<a href="http://www.google.com" target="_blank">Google!</a>
<br>
<a href="htmlpage2.html">The second page</a>

<script>
function changeParagraph(){
	var para1 = document.getElementById("paragraph2");
	if (para1.innerHTML.match("Suprise!")){
		para1.innerHTML="No";
	} else {
		para1.innerHTML="Suprise!";
	}
}
</script>
</body>
</html>