/
index.html
168 lines (151 loc) · 7.79 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
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
163
164
165
166
167
168
<!DOCTYPE html>
<!--BAKE TMRW-->
<html lang="en">
<script type="" src="waterLavahover.json" defer>
/* let waterlavahover = '[
{"img.water": {"url":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRGYo_n0hm2bqQWjR_8vnCNRJkO5Brv46mqA&usqp=CAU"}},
{"img.lava": {"url":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6vZ7cs-Ad85zHr6hJZDhmLx9shWs6nxy00A&usqp=CAU"}}
]';
//document.getElementsById("WWaterLava").style.backgroundImage = JSON.parse(waterlavahover);[0].img.water;*/
</script>
<!-- how to make whitespace between letters -->
<script type="application/JavaScript" src="daabaattery.js" defer>
</script>
<script type="text/json">
let MainNames =
`[
{
"name": "Ishant",
"lastName": "prokig"
}
]`;
console.log(JSON.parse(MainNames)[0].lastName)
</script>
<!--<script type="text/json" src="waterLavahover.json">
document.getElementById("").innerHTML =
img.water.employees[1].firstName + " " + obj.employees[1].lastName;
</script>-->
<head>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/x-icon" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/x-icon" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="stylesheet" href="main.css">
<!-- make size different and look nce t fit on all devices % -->
<meta charset="utf-8" >
<meta name="description" content="First (practice) webpage">
<meta name="keywords" content="HTML, CSS, JavaScript, first webpage, also helps coding">
<meta name="author" content="Ishant Gupta">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>P.W.I.L. | The Never ending project</title>
<!-- give credit to raters no copyright -->
</head>
<body spellcheck="false">
<!--make cat img always wrap from text size (%) -->
<!--make audio cat img-->
<div id="hideEvrything">
<div>
<header id="relativeFor_sticky" contenteditable="true" spellcheck="false" >
<!--make it so this.header is like in php file as a variable printed as a h1 at the bottom-->
<h1 onclick="jusType();" id="title" style="text-align:center;">
Practicing everything I learn,<br>
<em> restarting /w Aarushi® edition</em></h1>
</header>
<p id="dontedit"></p>
<div class="icon-bar">
<a href="https://github.com/Proking73" target="_blank" class="Github"><i class="Github"></i></a>
<li id="homeLink"><a href="#title">To the Home!</a></li>
<li id="js"><a href="#js">JavaScript! (and things in it) W.I.P</a></li>
</div>
<ul>
<li><p>Text <em>emphasis</em> and <strong>strong</strong></p></li>
<li>An Image<img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/avatar-team.png" alt="K.A. Avatars" id="jsClicktest">
<blockquote>using <strong><em>' width="var"'and ' height="var" '</em></strong>
you can change height and width, using percentages (% Ex- 75% of set default size which is 100% of whatever px, pixels is the size), and pixels (px Ex- 75% of 100px would be 75px) where the var is.
</blockquote>
</li>
</div>
<li><h3><span class="sideways">'br'</span> and <span class="sideways">'pre'</span> tags are inline, and allow for spaces and breaks to be allowed as in the html file</h3>
<blockquote><em><strong>Without</strong> pre tag</em>
Ex - e
f f g g<br>
<em><strong>With</strong> pre tag</em> Ex -<pre>
e
f f g g
</pre>
<!-- Weird comment!!! Follow and say "yoodelllexen'en more 'denu!" ,on Scratch though i might be inactive - link to my profile -> https://scratch.mit.edu/users/Proking73/ -->
</blockquote>
</li>
<li>
the 'letter-spacing' property can adjust the amount of space (preferably in pixels(px)) like this is 0px(default) and <span style="letter-spacing:10px;"">this is</span> 10px
</li>
</ul>
<p id="margin-paddingEX">
Example text with border
<p style="color:rgb(232, 90, 170);font-size:30px;text-align:center;border:7px inset navy;padding-bottom:5px;padding-top:5px;background-color:darkblue;font-family:fantasy"><em>Where I'm learning</em></p>
<table float=center id="tablefrrating" style='background-color:lightblue;float:center;' width=75%>
<thead>
<tr>
<th>Rating</th>
<th><a class="raters" href="https://www.khanacademy.org/computing/computer-programming/html-css">Khan Academy</a></th>
<th><a class="raters" href="https://www.w3schools.com/css/default.asp">w3schools CSS</a></th>
<th><a class="raters" href="https://www.w3schools.com/html/html_iframe.asp">w3schools HTML</a></th>
</tr>
</thead>
<tbody>
<tr>
<td id="ratingways">Ease Of Access</td>
</tr>
<tr>
<td id="ratingways">Information</td>
</tr>
<tr>
<td id="ratingways">Help</td>
</tr>
</tbody>
</table>
<!-- CLEAR FLOAT OVERFLOW TEST /W BORDER https://www.w3schools.com/css/css_float_clear.asp make cat img relative and put absolute tooltip iframe in it so like top:50 px; also make button to show cat img moving float left to right to no float -->
<p2 id="float_ex">
<span style="font-style:italic;font-weight:bold;font-size:50px;">T</span>his text will wrap around the cat image. Because the<a href="catLink.html" target="_blank"><img alt="cat imag" usemap="#cat_img_MaP" class="clearfix"" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4it_Jqeo2FMOA-0f2yJk5uYJ3YTa1j7MVSA&usqp=CAU" alt="picture of a cat for example of float, clear, and overflow"></img></a>
<!--<iframe id="iframeForcatHov" src="catLink.html" title="arru's project"></iframe>-->
float property is set to left, make is go to the left. But, since the 'img' tag is inline, and it is usually put in the middle of a text (similar to 'span'), some text is above it, and some under, AKA wrap. <span style="font-weight:lighter;font-size:20px;">EXTRA TEXT TO SHOW BOTTOM WRAP.</span>
</p2>
<map name="cat_img_MaP">
<area shape="circle" cords="" href="" alt="cat head">
</map>
<h2 id="" style="text-transform: lowercase;text-align:center;direction:ltr;line-height:1.24;">THIS IS ALL CAPS IN THE CODE, BUT THE LOWERCASE TAG MAKES IT SEEM LOWERCASE.</h2>
<button class="js_buttons" type="button" onclick="document.write('If you are seeing this message, the HTML and CSS code has successfully been deleted.')">Reset/Delete Website's Html and Css code</button>
<button class="js_buttons" type="button" onclick="window.print()">Print this page! <img src="https://tinyurl.com/8thbedf5" alt="print icon"></button>
<input type="file" accept=".html">
<!-- how to open window.open js file. -->
<p id="js_textAdjust">s</p>
<p id="WWaterLava"><span>Water.</span></p>
<textarea spellcheck="false"></textarea> <!--expand /\-->
<!--<iframe class="exGit iframes" src="https://proking73.github.io/P.W.I.L-with_Sis/" overflow-x="hidden"></iframe>-->
<div id="wrapperAd">
<iframe src="catLink.html" class="iframes catlink" id="adlike" scrolling="no">
</iframe>
<h1 id="xout" class="catshowX">✗</h1>
<div id="showcat" class="catshowX">Show ↑</div>
</div>
</div>
<noscript>
<style>
#hideEvrything {
display:none;
position: relative;
}
#jsnotenabld{
text-align: center;
transform: translateY(20.1rem);
/*overflow-x: padding(text-align:left;);*/
}
body {
background: seashell;
}
</style>
<meta content="0;" url="index.html">
<h1 id="jsnotenabld">Please enable JavaScript</h1>
</noscript>
</body>
</html>