-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml.html
285 lines (236 loc) · 11 KB
/
html.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
<!DOCTYPE html>
<html lang="en">
<!-- Next add HTML stylesheet in the header for adding CSS elements -->
<head>
<title>HTML in Computing - NativeCS</title>
<link rel=“icon” href=”/images/favicon.ico” type=“image/x-icon”>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
overflow: scroll;
position: absolute;
overflow-x: hidden;
width: 100%;
.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/banner-html.jpg");
background-position:bottom;
color: white; /* white text color */
}
/* 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 {
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;
}
</style>
</head>
<!-- Stylesheet should be included in the header section -->
<body>
<div class="header">
</div>
<div class="topnav">
<a 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>HTML in Computer Science</h2></center>
<p><img src="images/html-float.png" width="300px" height="300px" style="float:left" padding-right="30" class="image">
<p>At both Key Stages 3 and 4 at secondary school level, students are introduced to the concept of web development, which comprises of basic HTML and CSS coding, and are taught the following:</p>
<strong><h3>HTML Foundations</h3></strong>
<p><strong>HTML Tags: </strong>HTML tags are the fundamental building blocks of web pages, used to define the structure and content of a document. Tags are enclosed in angle brackets and come in pairs, with an opening tag indicating the beginning of an element and a closing tag marking its end. Tags can also be standalone, known as empty elements, and are used to embed media, create links, and format text and images.</p>
<p><strong>Head and Body Tag: </strong>In HTML, the < head > and < body > tags divide the document into two main sections. The < head > section contains metadata about the document, such as the title, character encoding, and links to external resources like stylesheets and scripts. The < body > section holds the visible content of the webpage, including text, images, links, and other media.</p>
<p><strong>Headings and Paragraphs: </strong>HTML provides heading tags (< h1 > to < h6 >) to define the hierarchical structure of a document, with < h1 > representing the highest level and < h6 > the lowest. Paragraphs are created using the < p > tag and are used to group and format blocks of text, providing structure and readability to the content.</p>
<p><strong>Fonts and Customizing Fonts: </strong>HTML allows for font customization using CSS (Cascading Style Sheets) to control the appearance of text on a webpage. Through CSS, students can specify font families, sizes, styles (such as bold or italic), colours, and other text properties to achieve the desired visual presentation of text content.</p>
<p><strong>Lists and Tables: </strong>HTML offers tags for creating lists and tables to organize and present information systematically. Lists can be unordered (< ul >), ordered (< ol >), or definition lists (< dl >), while tables (< table >) enable the display of tabular data with rows (< tr >), columns (< td >), and headers (< th >). Students learn to use these elements to structure and format content in a clear and organized manner on web pages.</p>
<strong><h3>Intermediate and Advanced HTML</h3></strong>
<p><strong>div Tags and IDs: </strong>Div tags are versatile container elements in HTML used to group and organize content within a webpage. They do not inherently provide any visual styling or semantic meaning but serve as a structural element to divide the document into logical sections. Div tags are often employed in conjunction with CSS (Cascading Style Sheets) to apply formatting, layout, and styling to the enclosed content, enabling developers to create visually appealing and well-organized web pages.</p>
<p><strong>Classes and IDs: </strong>Classes and IDs are attributes used to apply styling and scripting to specific HTML elements. Classes are reusable identifiers assigned to multiple elements, allowing them to share common styling properties. IDs, on the other hand, provide unique identifiers for individual elements within a document. While classes can be applied to multiple elements, IDs should be unique within the document. Classes and IDs play a crucial role in CSS and JavaScript, enabling developers to target and manipulate specific elements, apply custom styles, and add interactive functionality to web pages.</p>
<br></br>
<center><h2>Creating Multi-page Websites in HTML</h2></center>
<p><strong>Organising Files: </strong>Students learn to organise their website files into a structured directory hierarchy, keeping related files in separate folders for efficient management and navigation.</p>
<p><strong>External Hyperlinks: </strong>HTML allows students to create external hyperlinks to other websites or web pages by specifying the URL in the href attribute of the anchor (< a >) element, enabling users to navigate to external content.</p>
<p><strong>Internal Hyperlinks: </strong>Internal hyperlinks are used to link to different sections or pages within the same website. Students can create internal links by specifying the target page's file path or using anchor tags with IDs to link to specific sections within a page.</p>
<p><strong>Controlling Hyperlinks: </strong>Students learn to control hyperlink behaviour using attributes like target="_blank" to open links in a new browser tab, rel="nofollow" to indicate that the link should not be followed by search engines, and title="..." to provide additional information about the link when hovered over by the user. These attributes help enhance user experience and optimize website functionality.</p>
</div>
<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>