-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
412 lines (412 loc) · 17.8 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
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="BYUI, CIT, Course Material, Homework, Assignments, Directroy">
<meta name="description" content="This is the main website for Brother Keers' course materials.">
<meta name="author" content="Christopher Keers">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BYUI CIT Course Material</title>
<script src="js/highlight.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/highlight.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="page">
<header>
<div id="course-title">
Computer Information Technology
</div>
<div id="course-code">
BYUI
</div>
</header>
<main>
<h1>Main Directory</h1>
<p>
This is the main website for Brother Keers' course materials. You can find the source code for this website in this GitHub repository. If you are looking for a specific course they are listed below. If you are looking for a specific course and it is missing from this list, you may be searching for a course taught by a different professor or another department and Brigham Young University Idaho. You will need to reach out to your professor for assistance.
</p>
<h2>Courses</h2>
<ul>
<li>
<h2><a href="courses/wdd-130/index.html">Web Fundamentals (WDD 130)</a></h2>
<p>This course introduces students to the Word Wide Web and to careers in web design and development. The course is hand on with students participating in simple web designs and programming. Students are also introduced to version control tools using git and GitHub, wire framing, and other design related tools. It is anticipated that students who complete this course will understand the fields of wed design and development, have an understanding of the various industry roles, and have a good idea if they want to pursue this degree as a major.</p>
</li>
</ul>
<h2>Style Guide</h2>
<div id="go-back">
<a href="#go-back">⤺ Go Back</a>
</div>
<p>
<!-- Add needed space for the go back demo. -->
</p>
<p>
You should use the back link on pages or assignments where it makes sense to aid the users navigation between content. If you have a page or assignment you wish to leave detached from everything else please leave this off. Notice that we only use relative navigation in this link (<code>../</code>). You will need to add the following code between the pages <code>header</code> and <code>main</code> section:
</p>
<pre>
<code><div id="go-back">
<a href="../">&#10554; Go Back</a>
</div>
</code>
</pre>
<hr>
<p>
Callouts are used to call attention to some important information. This should be used when instructors or students need to pay careful attention to something.
</p>
<div class="callout">
<h2>Callouts:</h2>
<p>
Callouts are used to call attention to some important information. This should be used when instructors or students need to pay careful attention to something. Below is the HTML code for this element:
</p>
</div>
<pre class="lang-html">
<code class="lang-html"><div class="callout">
<h2>Title Here:</h2>
<p>
Content here.
</p>
</div>
</code>
</pre>
<hr>
<p>
A rubric specific callout is used to highlight the assignments grading requirements and is usually placed at the end of an assignment. These style callouts can be used as part of assignment steps to highlight specific criteria a student or instructor should look for at that step.
</p>
<div class="rubric">
<h4><strong>Rubric:</strong></h4>
<p>
A rubric specific callout is used to highlight the assignments grading requirements and is usually placed at the end of an assignment. These style callouts can be used as part of assignment steps to highlight specific criteria a student or instructor should look for at that step. Below is the HTML code for this element:
</p>
</div>
<pre class="lang-html">
<code class="lang-html"><div class="rubric">
<h2>Title Here:</h2>
<p>
Content here.
</p>
</div>
</code>
</pre>
<hr>
<p>
A license specific callout is used to notify the reader that the previous or following content is under some alternative or additional license. Most times this is a reminder that copyrighted material has been incorporated in a fair use manner for educational use. You should not need to add this for every piece of content but it is advisable to add this when a copyright holder has not given express permission or a strict license is attached to the original content.
</p>
<div class="license">
<p>
The above or following content is licensed as _____ by _____. All rights are reserved. Used with permission. Used according to fair use for educational purposes.
</p>
</div>
<pre class="lang-html">
<code class="lang-html"><div class="license">
<p>
Additional license or notice explanation here...
...for educational use under the <a href="https://en.wikipedia.org/wiki/Fair_use">Fair Use</a> doctrine.
</p>
</div>
</code>
</pre>
<hr>
<p>
Quotes can be added to pages or assignments using an HTML <code>blockquote</code>. If you would like to visually specify an author or source for your quote add the <code>cite</code> tag below your quote but inside the <code>blockquote</code>. Visual citations may be optional depending on how you referenced the quote but you should add a link to the original source in the <code>blockquote</code>'s inline cite line. See the simplified code example below:
</p>
<blockquote cite="https://example.com">
<p>
If future generations are to remember us more with gratitude than sorrow, we must achieve more than just the miracles of technology. We must also leave them a glimpse of the world as it was created, not just as it looked when we got through with it
</p>
<cite>
Lyndon B. Johnson
</cite>
</blockquote>
<pre class="lang-html">
<code class="lang-html"><blockquote cite="https://link-to-source.com">
<p>
Your quote here.
</p>
<cite>
Author Here (Optional)
</cite>
</blockquote>
</code>
</pre>
<hr>
<p>
Assignments should be organized inside an <code>ol</code> (ordered list). Below is an example of what this looks like followed by the HTML code for this element. Please note that this website runs a JavaScript function to automatically create an anchor (id) for each step if you used the correct HTML format. These anchors are nice when communicating with students and instructors because you can provide a direct link to the content in question. These links can change if you update the amount of steps in an assignment so they should only be used short term.
</p>
<ol>
<li>
<h2>Step Title</h2>
<p>
The instructions for this step.
</p>
</li>
<li>
<h2>Step Title</h2>
<p>
The instructions for this step.
</p>
</li>
<li>
<h2>Step Title</h2>
<p>
The instructions for this step.
</p>
</li>
</ol>
<pre class="lang-html">
<code class="lang-html"><ol>
<li>
<h2>Step Title</h2>
<p>
The instructions for this step.
</p>
</li>
<li>
<h2>Step Title</h2>
<p>
The instructions for this step.
</p>
</li>
<li>
<h2>Step Title</h2>
<p>
The instructions for this step.
</p>
</li>
</ol>
</code>
</pre>
<hr>
<p>
You can also use traditional <code>ul</code> (unordered lists). The following is an example of an unordered list followed by the HTML to create this element.
</p>
<ul>
<li>
<h2>Item 1</h2>
<p>
Content for this item.
</p>
</li>
<li>
<h2>Item 2</h2>
<p>
Content for this item.
</p>
</li>
<li>
<h2>Item 3</h2>
<p>
Content for this item.
</p>
</li>
</ul>
<pre class="lang-html">
<code class="lang-html"><ul>
<li>
<h2>Item 1</h2>
<p>
Content for this item.
</p>
</li>
<li>
<h2>Item 2</h2>
<p>
Content for this item.
</p>
</li>
<li>
<h2>Item 3</h2>
<p>
Content for this item.
</p>
</li>
</ul>
</code>
</pre>
<hr>
<p>
Definition lists can be added to provide a list of vocabulary or important terms and their definitions or explanations. The definition list can also be used to link out to an resource and provide an explanation of what that resource is. The HTML code below shows one term being defined and one additional resource being linked to:
</p>
<dl>
<dt>
Term
</dt>
<dd>
Term definition.
</dd>
<dt>
<a href="#enter-url-here" target="_blank">Linked Term</a>
</dt>
<dd>
Resource definition.
</dd>
</dl>
<pre class="lang-html">
<code class="lang-html"><dl>
<dt>
Term
</dt>
<dd>
Term definition.
</dd>
<dt>
<a href="#enter-url-here" target="_blank">Linked Term</a>
</dt>
<dd>
Resource definition.
</dd>
</dl>
</code>
</pre>
<hr>
<p>
The following example is used to demonstrate what nested lists will look like. You can nest any type of list inside any other type. The code for this demo is also below:
</p>
<ol>
<li>
<h2>Step 1</h2>
<p>
This step has an unordered list of instructions:
<ul>
<li>
<p>
Do this...
</p>
</li>
<li>
<p>
...and do this.
</p>
</li>
</ul>
</p>
</li>
<li>
<h2>Step 2</h2>
<p>
This step has an ordered list of instructions:
<ol>
<li>
<p>
Do this first.
</p>
</li>
<li>
<p>
Do this second.
</p>
</li>
</ol>
</p>
</li>
</ol>
<pre class="lang-html">
<code class="lang-html"><ol>
<li>
<h2>Step 1</h2>
<p>
This step has an unordered list of instructions:
<ul>
<li>
<p>
Do this...
</p>
</li>
<li>
<p>
...and do this.
</p>
</li>
</ul>
</p>
</li>
<li>
<h2>Step 2</h2>
<p>
This step has an ordered list of instructions:
<ol>
<li>
<p>
Do this first.
</p>
</li>
<li>
<p>
Do this second.
</p>
</li>
</ol>
</p>
</li>
</ol>
</code>
</pre>
<hr>
<p>
You can also have sections of collapsible content. This content by default starts collapsed and requires a user to click on the title bar to expand it. To open a collapsible section by default add <code>open</code> to the buttons class. The HTML for this element is below the following example:
</p>
<button type="button" class="collapsible">Collapsible Section</button>
<div class="collapsible-content">
<p>
Collapsible content. Remember you can add the class of <code>open</code> to the button class and it will start opened.
</p>
</div>
<pre class="lang-html">
<code class="lang-html"><button type="button" class="collapsible">Title</button>
<div class="collapsible-content">
<p>
The hidden collapsible content.
</p>
</div>
</code>
</pre>
<hr>
<p>
Throughout this style guide we have been using horizontal rules (<code>hr</code>) to divide sections. The code for that is below:
</p>
<pre class="lang-html"><code class="lang-html"><hr></code></pre>
<hr>
<p>
Throughout this style guide we have used several HTML code examples. Code examples can be added to any page or assignment using the code below. Please keep the following in mind:
</p>
<ul class="smaller indent">
<li>
We support only the languages in the common package of <a href="https://highlightjs.org/download/">Highlight JS</a>.
</li>
<li>
You need to change the <code>lang</code> (language) attribute to match the language of your code; again it must be in the supported list.
</li>
</ul>
<pre class="lang-html">
<code class="lang-html"><pre class="lang-html">
<code class="lang-html">Your code inside here. This demo uses HTML.
</code>
</pre>
</code>
</pre>
<hr>
<p>
You can also easily include videos into your pages or assignments. We use JavaScript to automatically generate the HTML for this to work since the HTML can be rather complex. All you need to add is a link to the video that includes a <code>data</code> attribute of video and a value of the video hosting service. Currently we only support YouTube. The video you see below is made with the code following it. <strong>NOTE:</strong> Do not place video links like the one below inside <code>p</code> (paragraph) tags. They should be treated like a <code>div</code> tag.
</p>
<a href="https://youtu.be/NpEaa2P7qZI" target="_blank" data-video="YouTube">Video Placeholder</a>
<pre class="lang-html">
<code class="lang-html"><href="https://video-source.com" target="_blank" data-video="YouTube">
Title of the video / video information.
</a>
</code>
</pre>
</main>
<footer>
<!-- BYUI -->
<a rel="author" href="https://www.byui.edu/computer-information-technology" target="_blank"><img alt="Creative Commons License" class="byui-img" src="assets/byui-logo.jpg"></a>
<!-- CC BY-NC-SA -->
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="Creative Commons License" class="cc-img" src="assets/CC-BY-NC-SA.svg.png"></a>
<!-- Legal text -->
<span class="line-break"></span>
This work was created by the Computer Information Technology Department at Brigham Young University Idaho and is licensed under a <a rel="license" href="https://github.com/caboodle-tech/byui/blob/main/LICENSE-CC-BY-NC-SA" target="_blank">Creative Commons BY-NC-SA 4.0 License</a> unless noted otherwise. The source code for this website is licensed under the <a rel="license" href="https://github.com/caboodle-tech/byui/blob/main/LICENSE" target="_blank">MIT License</a> unless noted otherwise.
</footer>
</div>
</body>
</html>