-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathmd
626 lines (574 loc) · 34.8 KB
/
md
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
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
<html>
<head>
<title>
EECS 448: Lab 3
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--favicon-->
<p><link href="images/favicon.ico" rel="icon" type="image/x-icon" /></p>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<pre><code> <div class="jumbotron">
<h1>Lab 3: Web Languages</h1>
<h2>EECS 448, Spring 2018</h2>
</div>
<h3>Due Time</h3>
<p class="text-justify">
This lab is due one week from the start of your lab session.
</p><hr>
<h3>Lab Type</h3>
<p class="text-justify">
This lab is an individual lab.
<strong>NOTE</strong>: Attendance is required for a grade.
</p>
<h3>Additional Resources</h3>
<p class="text-justify">
<ul>
<li><a href="https://www.w3schools.com/">W3Schools</a></li>
<li><a href="https://getbootstrap.com/">Bootstrap</a></li>
<li><a href="Lab3Slides.pdf">Lab3 slides</a></li>
</ul>
</p>
<h3>Topics</h3>
<p class="text-justify">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ul>
</p>
<h3>HTML: html, body, and head</h3>
<p class="text-justify">
All HTML documents are surrounded by the &lt;html&gt; tag.
It is an open and close tag that then contains the &lt;head&gt;
and &lt;body&gt; tags. The head contains some of the behind the scenes
mechanics. One tag you can put in the head right away is the &lt;title&gt;
tag. The title tag controls what a browser tab or window title bar’s text is.
<br>
The body contains all the content that the is contained with the web page.
Every, image, link, paragraph, or table resides here.
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt; My first web page &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
In this sentence I have
&lt;br&gt;
&lt;u&gt;underlined words&lt;/u&gt;, &lt;i&gt;italicized words&lt;/i&gt;,
&lt;br&gt;
and &lt;b&gt;bold words&lt;/b&gt;.
&lt;/body&gt;</code></pre>
</html>
</pre>
<pre><code> </p>
<h4>HTML: Images</h4>
<p class="text-justify">
You can put images in your web page, but first you need to pick an image
to embed. There are two ways to refer to an image:
<ul>
<li>Download and use a local image</li>
<li>
Refer to the address of an existing image
<pre>&lt;img src="theFileNameHere.jpg"&gt;</pre>
</li>
</ul>
</p>
<p class="text-justify">
The img tag is a stand alone tag like the break tag. It doesn’t surround
anything. Notice how we added the src="theFileNameHere.jpg" portion?
That’s because the tag alone isn’t enough information.
We can’t just tell the browser we need an image, we need to tell the
browser which image we want. If we just list the file name, the
browser will assume it’s in a local folder.
What you added was an HTML attribute. All attributes have a similar format:
&lt;tag attribute = "value"&gt;
<br><br>
You pick some attribute then set it equal to a value in quotation.
There are many attributes and values for various tasks.
For example, depending on your image, it may be very large.
You can control that. You just need to add a height and a width attribute.
<pre>&lt;img src="theFileNameHere.jpg" height="300" width="500"&gt;</pre>
You can control the pixel heights and widths of the image.
You can also do percentages if you like:
<pre>&lt;img src="theFileNameHere.jpg" height="20%" width="50%"&gt;</pre>
</p>
<p class="text-justify">
The other way we can display an image in our page is link to an existing one
instead of downloading a copy. To do this, you can go back to that image
you found and instead of saving a copy, choose "copy image location"
(or the wording that matches your browser). You would then replace the
file name with this URL. Sometimes these URLs get very long,
so you don’t have to do this right now, but it’s good to be aware of.<br>
Reference: <a href="https://www.w3schools.com/tags/tag_img.asp">W3Schools HTML &lt;img&gt; Tag</a>
</p>
<h4>HTML: Anchor tags</h4>
<p class="text-justify">
To create clickable links, you will use the anchor tag, or &lt;a&gt;
for short. Here’s the template:
<pre>&lt;a href="http://completeURLhere.com"&gt; The words you want to be clickable &lt;/a&gt;</pre>
</p>
<p class="text-justify">
For example if I wanted to make a link that took people to google when
they clicked on the words "Go to google" I would do the following:
<pre>&lt;a href="http://google.com"&gt; Go to google &lt;/a&gt;</pre>
Remember to include the "http://" part. Even though you don’t type that
in browsers anymore, you’ll need it in your code. It acts as a flag that
tells the browser it need to use the Hyper Text Transfer Protocol, or
in other words, it needs to grab something from the internet instead
of something local. <br>Reference: <a href="https://www.w3schools.com/html/html_links.asp">HTML Links</a>
</p>
<h4>HTML paragraphs</h4>
<p class="text-justify">
Paragraphs are used to create, well, paragraphs. The text get some
automatic formatting, like ensuring its not a the same line as some
other piece of content. The template is:
<br><i>Your paragraph here</i>
<br>
Reference: <a href="https://www.w3schools.com/html/html_paragraphs.asp">HTML Paragraphs</a>
</p>
<h3>Javascript</h3>
<p class="text-justify">
JavaScript is language that runs client-side and is used to make your
HTML pages interactive and responsive. (It is not a scripted version of
Java, it's a whole other language.)
<br>
A lot of syntax is the same or similar to C++/Java:
<ul>
<li>if statement (boolean operators)</li>
<li>loops</li>
<li>functions (mostly)</li>
</ul>
Important changes:
<ul>
<li>All variables are declared with the key words <code>var</code></li>
<li>There is no explicit class key word (see reference below)</li>
<li>JS files don't include each other, instead they are all included in your HTML document</li>
</ul>
Useful reference and tutorials: <a href="https://www.w3schools.com/js/default.asp">W3schools JavaScript Tutorial</a>
</p>
<h4>Connecting JavaScript to an HTML file</h4>
<p class="text-justify">
In the head tag of your HTML file, include the script tag:
<pre>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"
src="fileName.js"&gt;
&lt;/script&gt;
&lt;/head&gt;</pre>
The script tag is an open-close tag that we can put our JS code in
(and it helps modularity to simply link to another file).
</p>
<h4>Events</h4>
<p class="text-justify">
JavaScript functions can be called in reaction to an event occurring.
For example, we can define a button in HTML to call a JavaScript method.
<pre>&lt;!-- In html --&gt;</code></pre>
<button onclick=“myFunc()”>
</pre>
<pre><code> <pre>//In JS file</code></pre>
function myFunc() { alert(“You called my function!”); }
</pre>
<pre><code> Other useful events:
<ul>
<li><code>onclick</code> (when a tag is clicked)</li>
<li><code>onmouseover</code> (when the mouse browses over a tag)</li>
<li><code>onmouseout</code> (when the mouse leaves the area of a tag)</li>
<li><code>onload</code> (when a tag is loaded; setting this event in the
body tag will call a JavaScript function when the page loads)</li>
</ul>
</p>
<h4>Manipulating HTML</h4>
<p class="text-justify">
JavaScript can manipulate nearly every aspect of an HTML dynamically.
To give JavaScript control over an HTML element you must do two steps:
<ul>
<li>In the HTML file: Give a tag you want JavaScript to be able to affect an id attribute<li>
<li>In the JavaScript file: Find the element by it's id and manipulate the attribute in question</li>
</ul>
<pre>&lt;!-- In HTML --&gt;</code></pre>
<img src=“file.jpg” id=“myImgId” width=“100” height=“200”> <br> <button value=“ZOOM!” onclick=“zoomIn()”>
</pre>
<pre><code> <pre>//In JS</code></pre>
function zoomIn() { var theImgTag = document.getElementById(“myImgId”); theImgTag.width = 1000; theImgTag.height = 2000; }
</pre>
<pre><code> </p>
<h3>Exercise 1: Password validator</h3>
<p class="text-justify">
Create a webpage that allows the user to enter a password two times in
order to validate it.
<br>
Web page content:
<ul>
<li>Two password fields: first to enter the password and a second one to verify it</li>
<li>A button labelled "Validate" that alerts one of the following messages -
Display informative error message if any of the following occur:
<ul>
<li>The passwords entered don't match</li>
<li>the passwords are not at least 8 characters long</li>
</ul>
</li>
</ul>
</p>
<h3>Exercise 2: Slide show!</h3>
<p class="text-justify">
Create a new webpage that has a single <code>img</code> tag and
two buttons labeled previous and next. Your slideshow should:
<ul>
<li>Contain at least five pictures of your choice (appropriate for class)</li>
<li>Cycle through all the pictures</li>
<li>Wrap around to the beginning if I keep pushing next</li>
<li>Wrap around to the end if I keep pushing previous</li>
<li>Force the images to be all the same size regardless of the
original image files' dimensions</li>
</ul>
</p>
<h3>Cascading Style Sheets (CSS)</h3>
<p class="text-justify">
CSS, or Cascading Style Sheet, is a whole other language from HTML
(that's right, you’re learning two languages in one day). It's entirely
a helper language used to define how HTML should appear. It includes
styling details such as, colors, sizes, font families, and background image.
</p>
<h4>CSS: Setup</h4>
<p class="text-justify">
In the same folder your webpage is in, create file called <code>myStyle.css</code>.
Note the different extension? That's because this file will only contain CSS code.
Now add the following code to your CSS file:
<pre>p</code></pre>
{ background-color: blue; }
</pre>
<pre><code> Now, go back to your HTML sheet. Inside the head tag, put the following:
<pre>&lt;html&gt;
&lt;head&gt;
&lt;link href=”myStyle.css”
rel=”stylesheet”
type=”text/css”/&gt;
&lt;/head&gt;</pre>
Now make sure all the files are saved and refresh your browser.
You should see your paragraph now has a blue background.
</p>
<h4>CSS: Basic</h4>
<p class="text-justify">
All styling code follows this template:
<pre>tagName</code></pre>
<p>{ style-attribute1: someValue; style-attribute2: someValue; }</p>
someOtherTag { style-attribute1: someValue; style-attribute2: someValue; }
</pre>
You can style almost any HTML tag. There are many attributes, such as background-color, and values, such as, blue. We’ll discuss a few here.
</p>
<pre><code> <h4>CSS: Background colors</h4>
<p class="text-justify">
You already have a background color for your paragraph.
Now let’s give one to the whole page!
To do so, we'll style the tag that surrounds everything, the body.
<pre>body</code></pre>
{ background-color: red; }
</pre>
There are lots of color keywords, such as red and blue. There are many others, but if you need a very specific color, you can use W3Schools’ color picker. <br>Reference: <a href="https://www.w3schools.com/colors/colors_picker.asp">HTML Color Picker</a>
</p>
<pre><code> <h4>CSS: text color</h4>
<p class="text-justify">
You can give the text in your web page it's own color. The "color" attribute
colors the color the text inside of a given tag. Example:
<pre>p</code></pre>
{ background-color: red; color: white; }
</pre>
Now all paragraphs will have a red background and white text.
</p>
<pre><code> <h4>CSS: Font</h4>
<p class="text-justify">
There are many things we can change about font. The color attribute controls
the color of text, but there are several attributes that apart of the font
attribute collection. Here’s an example:
<pre>p</code></pre>
{ background-color: red; color: white; font-family: arial font-size: 22pt; }
</pre>
<pre><code> Now all paragraphs will have 22pt (the size), white arial font on a
red background.
<br>
Reference: <a href="https://www.w3schools.com/css/css_font.asp">CSS Fonts</a> and
<a href="https://www.w3schools.com/cssref/default.asp#font">CSS Reference</a>
</p>
<h4>CSS: Background images</h4>
<p class="text-justify">
Lots of tags can have a background image. We'll give our web page a
particular background image. You could give your lists or paragraphs
background images too, but they probably aren't large enough to utilize
them well.
<br>
The following code gives the body a background image of a gif (assuming
it is in the same folder) that will stretch to cover 100% of the screen
(the size) and not repeat.
<pre>body</code></pre>
{ background-image: url(img_flwr.gif); background-size: 100%; background-repeat: no-repeat; }
</pre>
<pre><code> You can also play with how the background image behaves when scrolling by
tinkering with the position. For example if you don’t want is to move when
the user scrolls do the following:
<pre>body</code></pre>
{ background-image: url(img_flwr.gif); background-size: 100%; background-repeat: no-repeat; background-attachment: fixed; }
</pre>
References: <br> Basic: <a href="http://www.w3schools.com/cssref/pr_background-image.asp">http://www.w3schools.com/cssref/pr_background-image.asp</a> <br> Position: <a href="http://www.w3schools.com/cssref/pr_background-position.asp">http://www.w3schools.com/cssref/pr_background-position.asp</a> <br> Size: <a href="http://www.w3schools.com/cssref/css3_pr_background-size.asp">http://www.w3schools.com/cssref/css3_pr_background-size.asp</a> <br> Repeat: <a href="http://www.w3schools.com/cssref/pr_background-repeat.asp">http://www.w3schools.com/cssref/pr_background-repeat.asp</a>
</p>
<pre><code> <h4>CSS: hover</h4>
<p class="text-justify">
CSS can also detect some simple events that occur on your page and adjust
the styling accordingly. For example, you can change the styling of a tag
to respond when a user has their mouse over it.
Let's look at two blocks of styling for the anchor tag (our clickable links):
<pre>a</code></pre>
<p>{ background-color: blue; color: red; }</p>
a:hover { background-color: red; color: blue }
</pre>
<pre><code> With these two blocks, the user will see red text with a blue background
for all links normally, but when they hover over the link, the styling
will invert. Now, you can adjust any styling you want. You could make a
paragraph that increases its font size when hovered over or a list that
changes from arial to courier font when hovered over.
<br>
Reference: <a href="https://www.w3schools.com/cssref/sel_hover.asp">CSS :hover Selector</a>
</p>
<h4>CSS: classes</h4>
<p class="text-justify">
Sometimes you don’t want all tags to receive the same styling.
One option is to create classes. It’s a two part process.
On the CSS side you need to create a styling block that will contain
the information for your special tags.
<pre>p</code></pre>
<p>{ color: blue; background-color: yellow; }</p>
p.halloween { color: orange; background-color: black; }
</pre>
<pre><code> Default paragraphs will have the top block of styling, but any paragraph
that I choose to can have the halloween themed styling. I just have to
tell HTML which ones I want to be special.
To do so, I include the class attribute on the HTML side:
<pre>&lt;p> Normal paragraph &lt;/p&gt;</code></pre>
<p class=”halloween”> Booo! </p>
</pre>
<pre><code> </p>
<h3>Exercise 3: Personal Profile</h3>
<p class="text-justify">
Make a profile page that is styled with CSS. Have fun with this.
You can make a profile about anybody or anything. You are not required
to make this about yourself or post any personal information online.
This profile can be entirely fictional.
<br>
HTML Requirements:
<ul>
<li>Profile picture</li>
<li>Biographical paragraph</li>
<li>Hyperlinks to favorite web sites</li>
<li>Embedded youtube video</li>
</ul>
CSS Requirements:
<ul>
<li>Use all the attributes listed in the CSS section at least once</li>
<li>The page should not induce seizures or headaches - in other words,
mind the color pallet you choose</li>
<li>All text should be easy to read</li>
</ul>
</p>
<h3>CSS manipulation through JavaScript</h3>
<h4>The Style Attribute</h4>
<p class="text-justify">
JavaScript, in addition to accessing and manipulating HTML, can change
the styling of any tag you give it access to. The reality is that there
is a style attribute that nearly every tag has. For example, one could
style a paragraph tag using the style attribute:
<pre>&lt;p style="background-color:red"&gt; This text will have a red background &lt;/p&gt;</pre>
</p>
<h4>Levels of Styling</h4>
<p class="text-justify">
The previous example was an inline level styling.
The other levels of styling, in order of precedence, are:
<ul>
<li><i>inline</i>: the style code is given in the tag
(highest precedence, but only applies styling to that one tag)</li>
<li><i>document level</i>: the style code is written inside a style
tag in the head of the HTML document
(second precedence, but only applies to the document it's written in)</li>
<li>external: what we do in this lab, writing the code in an external CSS sheet
(lowest precedence, but the most modular)</li>
</ul>
</p>
<h4>The JavaScript style Object</h4>
<p class="text-justify">
The Document Object Model (DOM) that defines the structure of an HTML
document has inside of it a style object. To access the style object,
you simply need to access the tag, via its id, like in previous exercises.
You can then access the style object of that tag.
</p>
<h3>Exercise 4: CSS Manipulation</h3>
<p class="text-justify">
Create a web page that has a paragraph with some dummy text.
Near the paragraph have text fields to accept the following values:
<br>
Border:
<ul>
<li>red value</li>
<li>green value</li>
<li>blue value</li>
<li>width</li>
</ul>
Background color:
<ul>
<li>red value</li>
<li>green value</li>
<li>blue value</li>
</ul>
Finally, have a button that, when clicked, changes the border and
background color to be as specified. You can use either the rgb() method
or a color code, but you should tell the user what units they are in
(00-FF or 0-255).
<pre>//in JavaScript</code></pre>
<p>//Access the tag: var someTag = docuement.getElementById(“theTagsId”);</p>
//Change the style attribute someTag.style.backgroundColor = “red”;
</pre>
<pre><code> <b>NOTE</b>: the names of the style attributes in CSS are all hyphenated
(e.g., background-color) but in JavaScript they are nearly all converted to camel-case.
<br>
Here is a <a href="https://www.w3schools.com/jsref/dom_obj_style.asp">reference</a>
of the style properties that JavaScript can access and change.
</p>
<h3>Bootstrap</h3>
<p class="text-justify">
Writing your own HTML, CSS, and JS code from scratch may be fun ... but you may never get
them to look as good webpages you see online ... and there is also this compatibility issue
e.g., some webpages look very ugly on mobile devices
<br>
Here comes Bootstrap ... an open source toolkit for developing with HTML, CSS, and JS
(<a href="https://getbootstrap.com/">https://getbootstrap.com/</a>)
<br>
Let's get started. Write the following code into a file called <code>test.html</code> and open this
file in a browser:
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;EECS 448: Accessing the EECS Databases&lt;/title&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;!--favicon--&gt;&lt;link href="images/favicon.ico" rel="icon" type="image/x-icon" /&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;&lt;div class="container"&gt;
&lt;div class="jumbotron"&gt;
&lt;h1&gt;hello Bootstrap world!&lt;/h1&gt;
&lt;h2&gt;EECS 448, Spring 2018&lt;/h2&gt;
&lt;/div&gt;
&lt;h3&gt;What is going on?&lt;/h3&gt;
&lt;p class="text-justify"&gt;
Bootstrap is a "built-in responsive, mobile-first projects on the web with
the world's most popular front-end component library.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
Quickly prototype your ideas or build your entire app with our Sass variables
and mixins, responsive grid system, extensive prebuilt components,
and powerful plugins built on jQuery." (Source: &lt;a href="https://getbootstrap.com/"&gt;https://getbootstrap.com/&lt;/a&gt;)
&lt;br&gt;
In other words, you have a whole universe of CSS and JS to take advantage of
without having to write the actual CSS and JS code.
&lt;/p&gt;
&lt;/div&gt;&lt;/body&gt;</code></pre>
</html>
</pre>
<pre><code> </p>
<p class="text-justify">
What just happened? We leveraged Bootstrap's content delivery network
(BootstrapCDN) to load CSS, JavaScript and images remotely, from its servers.
In other words, with a few lines of code in the <code>head</code> section, we have access
to the whole Bootstrap universe (sure, we need to have an internet connection for the CDN to work).
For other options to install Bootstrap see:
<a href="https://getbootstrap.com/docs/4.0/getting-started/download/">https://getbootstrap.com/docs/4.0/getting-started/download/</a>
<br><br>
Why did I use Bootstrap 3 instead on the latest version 4?
Personal preference, I like the colors and styles in version 3.
You can go with version 4; use:
<pre></code></pre>
<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”> <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script> <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js”></script>
</pre>
<pre><code> instead of:
<pre></code></pre>
<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”> <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script> <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
</pre>
<pre><code> <h3>Excercise 5: Personal Profile with Bootstrap</h3>
<p class="text-justify">Change the profile page from Exercise 3 to use Bootstrap
(keep the old Exercise 3 profile page in a separate file for submission purposes).
You may start from and customize <code>test.html</code> for your new profile page or
you can leverage one of <a href="https://getbootstrap.com/docs/4.0/examples/">Bootstrap's example pages</a>.
<h3>Excercise 6: Publication</h3>
<p class="text-justify">
In addition to uploading your code to GitHub, place your files in the
<code>public_html</code> folder on your EECS account.
You can then access them through the URL:
<pre>http://people.eecs.ku.edu/~yourKUuserNameHere</code></pre>
Example: http://people.eecs.ku.edu/~jrmiller //Display Dr. Miller’s EECS homepage //Why not mine? Mine is just redirecting you to my webpage hosted on the ITTC infrastructure.
</pre>
<pre><code> </p>
<p class="text-justify">
<b>Note</b>: If you experience any problems with lab equipment or your EECS account,
contact the Engineering Technical Support Center immediately.
Please be polite and as detailed as possible: <a href="https://tsc.ku.edu/request-support-engineering-tsc">Ticket Form</a>
</p>
<h4>Making an index.html</h4>
<p class="text-justify">
When you go to your people.eecs page, you'll most likely see a simple file listing.
This is the default behavior of apache. To make a landing page, you can write an
<code>index.html</code> file.
<br>
In your index.html
<ul>
<li>Use links, JS, or whatever means you like to create a menu to all your other exercises</li>
<li>Spruce it up with styling so it's more than just four hyper links - apache could have given us that without any effort</li>
</ul>
If you already are using your default homepage just provide us with a sub-folder URL.
<br>Example:
<pre>http://people.eecs.ku.edu/~KuUserName/subdir/eecs448/lab03</pre>
</p>
<h3>Web Language Summary</h3>
<p class="text-justify">
"Are all these webpages I look at everyday just text files in directories with code written in them?"
<br>Yes, they are. <br>
Sorry young padawan, the world wide web isn't magic. It's science. Computer science to be exact.
</p>
<h3>Rubric</h3>
<p class="text-justify">
<ul>
<li>[20pts] Exercise 1: Password validator</li>
<li>[25pts] Exercise 2: Slide show</li>
<li>[15pts] Exercise 3: Profile</li>
<li>[20pts] Exercise 4: CSS Manipulation</li>
<li>[10pts] Exercise 5: Profile with Bootstrap</li>
<li>[10pts] Exercise 6: Publication</li>
</ul>
</p>
<h3>Submission</h3>
<p class="text-justify">
Before the deadline, send an email to your TA with the following information:
<ul>
<li>Email Subject line: <code>EECS448 LastName FirstName StudentID Lab03</code></li>
<li>The body of the email should contain:</li>
<ul>
<li>The Github URL to your lab03 code</li>
<li>Your publication URL e.g., <code>people.eecs.ku.edu/~YourOnlineID</code></li>
</ul>
</ul>
</p>
<h3>Additional Reading</h3>
<h4>Classes in Javascript</h4>
<p class="text-justify">
You can make classes in Javascript in a variety, although confusing, ways.
One way is with functions, but coming from C++/Java would probably feel very odd.
The good news is that Javascript is adding the keywords and semantics a C++/Java person would be used to.
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">Source</a>
<br><b>NOTE</b>: This is a fairly new standard and not guaranteed to work in all browsers.
</p>
</td></tr></table>
This initial version of this lab was designed by <a href="http://www.eecs.ku.edu/people/faculty/jwgibbo">Dr. John Gibbons</a>
</div></body></code></pre>
</html>