-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
306 lines (256 loc) · 11.6 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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html lang="en">
<!-- Next add HTML stylesheet in the header for adding CSS elements -->
<head>
<title>Welcome to NativeCS</title>
<script type="text/JavaScript">
alert("Hi from JavaScript! - This site should be viewed on a desktop and is not mobile optimised. This is a student example website, demonstrating the standards expected to be obtained at secondary school in the UK, as per the computing curriculum")
</script>
<link rel=“icon” href=”/images/logo.jpg?” type=“image/jpg”>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="NativeCS - Student HTML website" />
<meta property="og:type" content="website" />
<meta property="og:URL" content="https://nativecs.github.io/web/" />
<meta property="og:image" content="https://nativecs.github.io/web/images/CS-home.jpg" />
<meta property="og:description" content="This is a basic HTML and CSS website, designed and coded by Joshua Levy, to demonstrate the web coding standards expected at secondary school level in the UK" />
<meta name="google-site-verification" content="S5JjBDGm9RVrcT8FrQRdZstA7EKm_GeKTn35GSQ3i3A" />
<style>
body {
font-family: Arial, Helvetica, sans-serif;
overflow: scroll;
overflow-x: hidden;
position: absolute;
.topnav {
overflow: hidden;
background-color: #483d8b;
display: flex;
justify-content: center;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #ff6600;
color: white;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #ff6600;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 999;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
}
.header {
padding: 150px; /* some padding */
text-align: center; /* center the text */
background-image: url("images/header.jpg");
background-position: 50% 80%;
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
.footer {
font-size: 12px;
position:sticky;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
left: 0;
bottom: 0;
overflow: hidden;
opacity: 0.9;
}
a:link {
color: inherit;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: yellow;
background-color: transparent;
font-weight: bold;
}
a:visited {
color: white;
}
div.page-content {
width: 100%;
max-width: 95%;
flex-wrap: wrap;
justify-content: center;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
}
div.page-content-1 {
width: 100%;
max-width: 95%;
flex-wrap: wrap;
justify-content: center;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
}
.image {
display: block;
margin-left: auto;
margin-right: 30px;
margin-top: auto;
}
div.page-content-2 {
width: 100%;
max-width: 95%;
flex-wrap: wrap;
justify-content: center;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
}
.into {
width: 100%;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
padding: 10px;
}
</style>
</head>
<!-- Stylesheet should be included in the header section -->
<body>
<div class="header">
</div></i>
<div class="topnav">
<a class="active" href="index.html">Home</a>
<a href="about.html">About</a>
<div class ="dropdown">
<button class="dropbtn">KS3</button>
<div class="dropdown-content">
<a href="y7.html">Year 7</a>
<a href="y8.html">Year 8</a>
<a href="y9.html">Year 9</a>
</div>
</div>
<div class ="dropdown">
<button class="dropbtn">GCSE</button>
<div class="dropdown-content">
<a href="y10.html">Year 10</a>
<a href="y11.html">Year 11</a>
</div>
</div>
<div class ="dropdown">
<button class="dropbtn">Programming</button>
<div class="dropdown-content">
<a href="python.html">Python</a>
<a href="html.html">HTML</a>
<a href="css.html">CSS</a>
<a href="js.html">JavaScript</a>
</div>
</div>
<a href="ai.html">AI</a>
<a href="resources.html">Resources</a>
</div>
<div class="page-content">
<center><h2>Aim & Purpose of Computing at Schools</h2></center>
<p><img src="images/CS-home.jpg" width="200px" height="200px" style="float:left" padding-right="30" class="image">I have created this website as an example of how students could create a fully functional basic website, such as this, consisting of HTML, CSS and JavaScript elements. The site also contains specific information about teaching computing at various key stages at UK secondary school levels, including Python and other elements</p>
<p>Learning computer science in school is very important for kids. A good computing education helps them think creatively and solve problems with computers, which can help them understand and change the world.</p>
<p>Computing connects to other subjects like math, science, and technology, and it helps students learn about both natural and artificial systems. The main part of computing is computer science, where kids learn how information and computers work and how to write programs. This knowledge allows them to create software, systems, and digital content.</p>
<p>Additionally, computing education ensures that students are comfortable using technology. It helps them express themselves and develop their ideas using digital tools, preparing them for future jobs and life in a digital world. This digital literacy is crucial as it helps them become active participants in an increasingly digital society.</p>
<center><strong></stron><p>The following video below has been generated by AI</p></strong></center>
</div>
<center><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ZAoBKnb3v5k?si=heWOEmgRsxJEdm5-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></center>
</div>
<div class="page-content-1">
<center><h2>Expected Outcomes at KS3</h2></center>
<img src="images/stuyding.jpg" width="300px" height="300px" style="float:right" padding-left="30" class="image">
<i>
<li>Design, use, and evaluate computational models that represent real-world problems and physical systems.</li>
<li>Understand key algorithms, such as those for sorting and searching, and use logical reasoning to compare different algorithms for the same task.</li>
<li>Use at least two programming languages, including one text-based language, to solve various computational problems; use data structures like lists, tables, or arrays appropriately; and design modular programs with procedures or functions.</li>
<li>Understand basic Boolean logic (e.g., AND, OR, NOT) and its applications in circuits and programming, and know how to represent numbers in binary and perform simple binary operations, such as addition and conversion between binary and decimal.</li>
<li>Learn about the hardware and software components of computer systems and how they interact with each other and other systems.</li>
<li>Understand how instructions are stored and executed in a computer system, and how different types of data (text, sounds, images) can be represented and manipulated digitally using binary digits.</li>
<li>Engage in creative projects that involve selecting, using, and combining multiple applications across various devices to achieve complex goals, including data collection and analysis to meet specific user needs.</li>
<li>Create, reuse, revise, and adapt digital products for specific audiences, focusing on trustworthiness, design, and usability.</li>
<li>Learn various methods to use technology safely, respectfully, responsibly, and securely, including protecting their online identity and privacy, recognizing inappropriate content or behavior, and knowing how to report concerns.</li>
</i>
</div>
<div class="page-content-2">
<img src="images/studying1.jpg" width="200px" height="200px" style="float: left" padding-right="30" class="image">
<center><h2>Expected Outcomes at KS4 - GCSE</h2></center>
<p>Every student must have the chance to learn information technology and computer science in enough detail to continue to higher education or enter a professional career.</p>
<li>Enhance their skills, creativity, and knowledge in computer science, digital media, and information technology.</li>
<li>Develop and use their analytical, problem-solving, design, and computational thinking abilities.</li>
<li>Understand how technological changes impact safety, including methods to protect their online privacy and identity, and how to recognize and report various concerns.</li>
</div>
</div>
<br></br>
<br></br>
</body>
<div class ="footer">
<p>© 2024-5 | Joshua Levy | <a href="https://nativecs.uk" target="_blank">Native CS UK</a> | <a href="https://github.com/nativeCS" target="_blank">GitHub</a> | <a href="https://replit.com/@nativecomputinguk" target="_blank">Replit</a> | <a href="https://www.credly.com/users/joshualevy23/badges" target="_blank">Teach Computing<a> | <a href="https://dev.to/joshualevy84/" target="_blank">.DEV</a> | <a href="https://app.datacamp.com/profile/joshualevy84" target="_blank">Datacamp</a> | <a href="https://nativenglish.uk" target="_blank">Native English UK</a></p>
<a href="https://www.w3.org/WAI/WCAG2A-Conformance"
title="Explanation of WCAG 2 Level A Conformance">
<img height="32" width="88"
src="https://www.w3.org/WAI/WCAG22/wcag2.2A"
alt="Level A conformance,
W3C WAI Web Content Accessibility Guidelines 2.2">
<a href="http://www.w3.org/html/logo/">
<img src="https://www.w3.org/html/logo/badge/html5-badge-h-css3-graphics-semantics.png" width="100" height="32" alt="HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, and Semantics" title="HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, and Semantics"> <p xmlns:cc="http://creativecommons.org/ns#" >This work is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p>
</a>
</div>
</html>