-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathpage2.html
372 lines (270 loc) · 11.8 KB
/
page2.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
<!doctype html>
<head>
<title>Curriculum — page 2</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Averia+Serif+Libre:300,400">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
</head>
<h1>Curriculum: page 2, preparing your slide show</h1>
<p>We will learn how to build your HTML slide show, and then learn
how to use JavaScript to make content dynamic and interactive.</p>
<p>For this project, we will create a photo slide show. You’ll have
more fun if your slide show is made from your own photos, or at least
photos you like. So step one is:</p>
<h2 class="step">Download images from Flickr or Instagram</h2>
<h3 class=goal>Goal</h3>
<p>Get some nice photos to use in your slide show.</p>
<h3 class=inst>Instructions</h3>
<p>Create a directory for your entire project and call it
“slideshow”.</p>
<p>Download three photos from the internet and save them in your
<span class="filename">slideshow</span> directory.</p>
<p>The photos must:</p>
<ul>
<li>Have file type of .jpg, .gif or .png</li>
<li>Have a width of around 500 or 600 pixels.</li>
<li><strong>All have the same width in pixels.</strong></li>
<li><strong>All have the same height in pixels.</strong></li>
<li>Be photos you like. You will look at them all day!</li>
</ul>
<p>If you need help downloading photos, ask a coach for help.</p>
<h4>Using Flickr</h4>
<p>When viewing a photo page, right click and view the “Medium 500” or
“Medium 640” size. From the next screen, download the image into your
<span class="filename">slideshow</span> directory.</p>
<h4>Using Instagram</h4>
<p>Go to
<a href="http://web.stagram.com/n/YOUR_USERNAME" target="_blank">http://web.stagram.com/n/YOUR_USERNAME</a>
and download three “L” size photos. (They are all 612 pixels wide
and 612 pixels tall.)</p>
<h4>Don't have a Flickr or Instagram account?</h4>
<p>Use these photos:</p>
<ul>
<li><a href="http://distilleryimage8.s3.amazonaws.com/24259794d05911e1abd612313810100a_7.jpg" target="_blank">Spree at night</a></li>
<li><a href="http://distilleryimage11.s3.amazonaws.com/ac587510a27211e1a92a1231381b6f02_7.jpg" target="_blank">Sky above Volkspark Friedrichshain</a></li>
<li><a href="http://distilleryimage2.s3.amazonaws.com/d9f9d1a0b52611e1abd612313810100a_7.jpg" target="_blank">Fernsehturm in the fog</a></li>
</ul>
<h3 class=ex>Explanation</h3>
<p>We will start our slide show with just three photos. To make things
simpler, we want them to be not too big, and not odd sizes.</p>
<h2 class="step">Write HTML to display the photos</h2>
<h3 class=goal>Goal</h3>
<p>Understand how to display static content by writing HTML.</p>
<h3 class=inst>Instructions</h3>
<p>In your editor, open a new file.</p>
<p>Save the file with the name “index.html” in your
<span class="filename">slideshow</span> directory</p>
<p>Add your photos to the HTML by adding three lines like this:</p>
<pre>
<img src="FILE_NAME_OF_THE_FIRST_PHOTO">
<img src="FILE_NAME_OF_THE_SECOND_PHOTO">
<img src="FILE_NAME_OF_THE_THIRD_PHOTO">
</pre>
<p>You must use the complete file name which includes the file
extension, which will be .jpg, .gif or .png.</p>
<p>In Chrome, go to <code>File</code> ▸ <code>Open File…</code>, find
your <span class="filename">slideshow/index.html</span> file and open it.</p>
<p>In your text editor, at the very top of the <span class="filename">index.html</span> file,
before the <code><img></code> tags, add:</p>
<pre>
<!doctype html>
<head>
<title>I ♥ Coding</title>
</head>
</pre>
<p>In Chrome, refresh the page, and take a look at the title of
the tab.</p>
<p>In your text editor, add another line to the head that sets the
character set to UTF-8:</p>
<pre>
<!doctype html>
<head>
<title>I ♥ Coding</title>
<strong><meta charset="utf-8"></strong>
</head>
</pre>
<p>In Chrome, refresh the page, and take another look at the title of
the tab.</p>
<h3 class=ex>Explanation</h3>
<p>You’ve written some HTML and are looking at it in your browser!</p>
<p>You’ve also added a title, and defined the character set so that
UTF-8 characters are correctly displayed. (UTF-8 is important not just
for hearts, but also for umlauts.)</p>
<p>The first line, the <code>doctype</code> declaration, is important
for a similar reason as setting the character set. This simple line
tells the browser what exact flavor of HTML we have written, so the
browser will treat it in a predictable way.</p>
<h2 class="step">Create a film roll of your photos</h2>
<h3 class=goal>Goal</h3>
<p>To see that CSS can be used to position content.</p>
<h3 class=inst>Instructions</h3>
<p>In your editor, create a new file and save it with the name
“style.css” in your <span class="filename">slideshow</span> directory.</p>
<p>In your <span class="filename">style.css</span>, add these CSS rules:</p>
<pre>
.picture-frame {
height: 344px; /* height of one image */
width: 500px; /* width of one image */
overflow: hidden;
margin: 50px auto;
position: relative;
}
.film-roll {
width: 1500px; /* 3 times width of one image */
left: 0px;
top: 0px;
position: absolute;
}
img {
float: left;
}
</pre>
<p>Change the height and width values to match the height and width
in pixels of your photos. There are three values you must change.</p>
<p>Update your <span class="filename">index.html</span> file by adding a link to the
<span class="filename">style.css</span> stylesheet in the head, and by wrapping your
<code><img></code> tags in two <code><div></code> containers
with classes “picture-frame” and “film-roll”:</p>
<pre>
<!doctype html>
<head>
<title>I ♥ Coding</title>
<meta charset="utf-8">
<strong><link rel="stylesheet" href="style.css"></strong>
</head>
<strong><div class="picture-frame"></strong>
<strong> <div class="film-roll"></strong>
<img src="…">
<img src="…">
<img src="…">
<strong> </div></strong>
<strong></div></strong>
</pre>
<p>In Chrome, refresh the page.</p>
<p>In Chrome, open the console.</p>
<aside>
<p>Yesterday we saw how to access the console in Chrome: press
Ctrl+Shift+J on Windows or Linux, press Command+Option+J on OS X.
You can also go to the wrench menu in the upper right corner of your
window, and select <code>Tools</code> ▸ <code>Developer
Tools</code>.</p>
</aside>
<p>In the console, go the the left-most tab called “Elements”. Click
on the arrows (▸) to look inside the
<code><body>…</body></code>. Keep exploring until you find your
<code><img></code> tags. It will look almost like this:</p>
<img src="inspecting-film-roll.png" class="figure">
<p>Look at the right column and notice that you can see CSS rules that
are defined in your <span class="filename">style.css</span> file.</p>
<p>While selecting <code><div class="film-roll"></code>, access the
value of the <code>left</code> property in the right column, and change the
value from 0px to 50px. Then try -50px. Try using the up and down
arrows while changing the value of the <code>left</code> property.</p>
<p>Refresh the page to reset all the styles.</p>
<p>Play with more CSS values in other rules on other elements. Turn
styles on and off using the checkboxes. What does each property
do?</p>
<h3 class=ex>Explanation</h3>
<p>Earlier, we saw that a CSS rule that looked like
<code>p { … }</code> targeted paragraphs. Rules that start with a dot,
like <code>.class-name { … }</code>, target elements with
<code>class-name</code> as their class attribute.</p>
<p>By using class names, we can control two <code><div></code> tags
in completely different ways, and we can also use this control to position
the elements.</p>
<p>Using some advanced techniques for positioning elements, we have
created a “picture frame” that has a height and width that exactly
match our photo size:</p>
<pre>
.picture-frame {
<strong>height: 334px;</strong>
<strong>width: 500px;</strong>
…
}
</pre>
<p>Inside of the picture frame, we created a “film roll” that is a long
strip of all our photos:</p>
<pre>
.film-roll {
<strong>width: 1500px;</strong>
left: 0px;
…
}
</pre>
<p>By changing the position (by setting the <code>left</code> property)
of the film roll, we can make our photos slide back and forth inside
the picture frame. The film roll is set to start at position “0”.
(That is what is meant by <code>left: 0px;</code></p>
<!-- an illustration would help -->
<aside>
<p>Nerdy details: CSS positioning is an advanced topic. Hopefully,
it is enough to say:</p>
<ul>
<li><code>margin: 50px auto;</code> makes the frame horizontally centered</li>
<li><code>overflow: hidden;</code> hide contents that don’t fit inside the frame</li>
<li><code>position: relative;</code> allows us to have a frame of reference to position any items inside</li>
<li><code>position: absolute;</code> allows us to set the position</li>
</ul>
</aside>
<p>We can adjust the CSS in the stylesheet, and we can adjust the CSS
by hand in the Developer Tools, but (so exciting!) we also adjust the
CSS using JavaScript. Ready to try?? Let’s do it!</p>
<!-- an illustration would help -->
<h2 class="step">Create a reference to the film roll</h2>
<h3 class=goal>Goal</h3>
<p>To see that you can create a reference an HTML element, and explore
the element’s properties in the console.</p>
<h3 class=inst>Instructions</h3>
<p>In your <span class="filename">index.html</span>, add the id <code>the-film-roll</code> to
the <code><div></code> with class <code>film-roll</code>:</p>
<pre>
<div class="film-roll" <strong>id="the-film-roll"</strong>>
</pre>
<p>Back in the Console tab of the Developer Tools, type:</p>
<pre>
var filmroll = document.getElementById('the-film-roll');
</pre>
<p>Then type, one line at a time. Some lines may have an unexpected
effect (or unexpectedly no effect).</p>
<pre>
filmroll;
filmroll.offsetLeft;
filmroll.offsetLeft = -100;
filmroll.offsetLeft;
filmroll.style.left = '-100px';
filmroll.offsetLeft;
filmroll.style.top = '50px';
</pre>
<p>Try moving <code>filmroll</code> 700 pixels <em>toward</em> the
left.</p>
<p>Try setting other style properties to other values.</p>
<p>Refresh the page. Type the following in the console:</p>
<pre>
filmroll.style.left = '-100px';
</pre>
<p>What happened to our friend <code>filmroll</code>?</p>
<h3 class=ex>Explanation</h3>
<p>When JavaScript runs in the browser, the browser creates an
<em>environment variable</em> called <code>document</code>, which has many useful
properties that we can use to access elements on the page. We can use
the <code>getElementById</code> method to get a reference to the
element with an ID of our choosing.</p>
<p>Here, we added an ID to the film roll element, and then used that
ID to create a reference that we could control with JavaScript.</p>
<p>Once we have a reference to the <code><div></code> with id <code>the-film-roll</code>,
we can access its properties too, because it is an object of the kind we
learned about yesterday. Some of the properties (like
<code>offsetLeft</code>) are <em>read only</em>, meaning we can’t change
the value. Some (maybe you found some) can be changed. Other properties,
like <code>style</code> have properties themselves.</p>
<p>The <code>style</code> property allows us to control the CSS
properties on an element. Therefore, by creating references to an
element (an HTML element) we can change its appearance and position
(by setting its CSS properties).</p>
<p>The moment we refresh the page, we get a whole new environment and
all of the variables we created are gone. How can we create variables
without typing them in the console? There must be a way!</p>
<h2>Putting it all together</h2>
<p>HTML in one page, CSS in the stylesheet, but how can we load our
JavaScript programs? Let’s find out!</p>
<p><a href="page3.html">→ To the third page</a>.</p>