-
Notifications
You must be signed in to change notification settings - Fork 48
/
slides-en.html
2954 lines (2229 loc) · 109 KB
/
slides-en.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
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
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Ladies Learning Code</title>
<link rel="stylesheet" href="framework/css/slideshow.css" data-noprefix>
<link rel="stylesheet" href="framework/css/fonts.css" data-noprefix>
<link rel="stylesheet" href="framework/css/highlightjs/github.css" data-noprefix>
<link rel="stylesheet" href="framework/css/styles.css" data-noprefix>
<link rel="stylesheet" href="framework/css/a11y/plugin.css" data-noprefix>
<link rel="shortcut icon" href="framework/img/favicon.ico">
<!-- Takes care of CSS3 prefixes -->
<script src="framework/scripts/prefixfree.min.js"></script>
<!-- opens all links in a new window -->
<base target="_blank">
</head>
<!-- Timer/progress bar: Define the presentation duration using "data-duration" in minutes. -->
<body class="en" data-duration="360">
<main>
<section class="slide welcome highlight">
<h1><img class="logo-stacked" src="framework/img/llc-logo-stacked-white.png" alt="Ladies Learning Code">Welcome!</h1>
<div class="instructions">
<!-- ADD WIFI INFO HERE -->
<!-- <h2>Get <br> Connected</h2>
<ul>
<li><strong>Wifi:</strong> wifi network</li>
<li><strong>Password:</strong> wifi password</li>
</ul>
<hr> -->
<h2>Download<br> & Install</h2>
<ol class="downloads">
<li>Learner files (zip file): <a href="https://github.com/ladieslearningcode/llc-html-css-multi-page-site/archive/master.zip" download>bit.ly/llc-multipage</a>
<ul>
<li>unzip the learner file (<em>extract all</em> if you’re on a PC)</li>
<li>open <code>slides.html</code> in the browser to view the slides</li>
</ul>
</li>
<li>Atom Editor: <a href="https://atom.io">atom.io</a>
<ul>
<li>Chromebook users can use <a href="https://chrome.google.com/webstore/detail/caret/fljalecfjciodhpcledpamjachpmelml?hl=en" target="_blank">Caret</a></li>
</ul>
</li>
<li>Chrome Browser: <a href="https://www.google.ca/chrome/browser/desktop/">google.ca/chrome</a></li>
</ol>
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Content created by <a href="http://christinatruong.com">Christina Truong</a> for <a prefix="cc: http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
<p class="right">Use the left <span class="arrow" aria-hidden="true">←</span> and right <span class="arrow" aria-hidden="true">→</span> arrow keys to navigate</p>
</footer>
</section>
<section class="slide intro">
<img class="logo" src="framework/img/llc-logo-white.png" alt="Ladies Learning Code">
<h1 class="heading-bg">
<span>
Intro to HTML & CSS:<br>
Building a Multi-page website
</span>
</h1>
<!-- FILL IN INSTRUCTOR DETAILS -->
<!-- <img class="instructor" src="http://placehold.it/225x225" alt="">
<h2><span class="cursive">with</span> Instructor name</h2>
<ul>
<li><a href="mailto:hello@email.com">hello@email.com</a></li>
<li><a href="http://website.com">website.com</a></li>
<li><a href="http://twitter.com/username">@username</a></li>
</ul> -->
<div class="sponsor">
<!--<p>In partnership with<br> <img src="framework/img/telus-logo-white.svg" alt="Telus"></p>-->
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Content created by <a href="http://christinatruong.com">Christina Truong</a> for <a prefix="cc: http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
<p class="right">Use the left <span class="arrow" aria-hidden="true">←</span> and right <span class="arrow" aria-hidden="true">→</span> arrow keys to navigate</p>
</footer>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Introductions
</script>
</section>
<section class="slide" data-markdown data-toc>
<script type="text/template">
#Coders' code
1. Be friendly and welcoming
1. Be respectful of others by choosing words and actions with care
1. Be mindful of how much space you take up in conversations
1. Ask questions
1. Try your best (and have fun!)
</script>
</section>
<section class="slide centered">
<h1>Today’s Project</h1>
<p>Checkout <a href="project/final/index.html">the final project</a> in action!</p>
<ul class="horizontal-list" role="list">
<li><img src="framework/img/workshop/NEW_home-complete.png" alt="Home page with top navigation area and large background image of city landscape"></li>
<li><img src="framework/img/workshop/NEW_about-complete.png" alt="About page with decorative image on left and content area on right"></li>
<li><img src="framework/img/workshop/NEW_contact-complete.png" alt="Contact page with embedded contact form"></li>
</ul>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Course Outline
<div class="table-of-contents"></div>
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Getting Started
</script>
</section>
<section class="slide website-table" data-markdown>
<script type="text/template">
#What exactly *is* a website?
A website is basically a collection of web pages or *HTML documents*, that closely match a file folder structure.
| mysite.com (index.html) | mysite.com/about.html | mysite.com/contact.html |
|------------|------------|--------------|
|  |  |  |
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Accessing websites and web pages
When we want to view a specific page on a website, we provide a *URL* to the browser.
```xml
https://www.canadalearningcode.ca/about/
```
The browser uses the URL to determine *how* and *where* to find the files that we're interested in. For example, the URL above would take us to the `About` page on the Canada Learning Code website.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#More about URLs
URLs typically contain the following pieces:
- `protocol` - This tells the browser *how* to find the file.
- `domain` - This is the name of the website itself. It tells the browser *generally* where the file can be found (kind of like a home address).
- `path` - This tells the browser *specifically* where the file can be found. If the `domain` is the home address, the `path` is the name of the person we're looking for, and which room they're in!
```xml
<protocol>://<domain>/<path>/
```
```xml
https://www.canadalearningcode.ca/about/
```
---
##Resource
- [MDN: What is a URL?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL)
</script>
</section>
<section class="slide basic-web-page" data-markdown>
<script type="text/template">
#A Basic Web Page: HTML, CSS, JavaScript
##HTML
HTML (Hypertext Markup Language) is a _markup_ language used to define the content.
<p class="example">I'm just a paragraph.</p>
##CSS
CSS (Cascading Style Sheets) is a _style sheet_ language used to create the presentation and look of a site.
<p class="example css">I'm a paragraph with <span>style</span>.</p>
##JavaScript
JavaScript is a _programming_ language used to define the behavior and add functionality to a website.
<p class="example">I'm a paragraph with a <code>button</code> that can be clicked: <button type="button" onclick="alert('Clicked!');">Try it!</button></p>
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Web Browsers
The main functionality of the [browser](https://browsehappy.com/?locale=en) is to present a *web resource* in the browser window.
Choose a modern web browser, like [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/en-CA/firefox/new/), that supports current web standards and includes dev tools for a better experience.
You also can view the source of *any* web page:
1. Right-click / two-finger tap anywhere on the browser
2. Select **View Page Source**
That's HTML!
---
##Resource
- [browsehappy.com](https://browsehappy.com/?locale=en)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Developer Tools
Most modern web browsers include developer tools. These tools allows you to *inspect* any web page, making it easier to test & debug code.
Today we'll be using the Chrome browser. The dev tools can be accessed in a couple ways:
- Option 1: right-click / two-finger tap on a web page and select **Inspect Element**
- Option 2:
- PC: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>
- Mac: <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>I</kbd>
---
##Resources
- [Make Chrome your default browser](https://support.google.com/chrome/answer/95417?hl=en)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Text Editor
* Used to write and edit code
* Default editors (Notepad / TextEdit) don't include many features
* Paid & free options include features/plugins for improved workflow
* Some great options:
- [Visual Studio Code](https://code.visualstudio.com/)
- [Sublime Text](http://www.sublimetext.com/) (untimed free trial)
- [Notepad++](http://notepad-plus-plus.org/)
- [Brackets](http://brackets.io)
**[Atom](https://atom.io/)** is totally free and is the editor we'll be using today.
<span class="note">(If you have another editor, it will work as well but some features may be slightly different.)</span>
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Getting to know Atom
Having a good text editor and learning how to use it to its full potential will help your work flow. Today, let's update the text wrapping option to make it easier to read long blocks of code and text.
1. Open the customization options:
- *Mac:* Open the **Atom** menu and go to **Preferences**
- *PC:* Open the **File** menu and go to **Settings**
<!-- .element: width="70%" -->
2. Choose the **Editor** tab and scroll down to the **Soft Wrap** option
<!-- .element: width="70%" -->
3. Make sure the **Soft Wrap** option is checked
<!-- .element: width="70%" -->
---
##Resources
* [Atom documentation](https://atom.io/docs)
* [Atom Shortcuts cheat sheet](https://bugsnag.com/blog/atom-editor-cheat-sheet)
* [Customizing Atom](https://atom.io/docs/v0.61.0/customizing-atom)
* [Atom Themes](https://atom.io/themes)
* [Snippets](https://atom.io/packages/snippets) - create your own code snippet shortcuts
* [Three Atom editor tips to help you learn code faster!](https://medium.com/@svinkle/a-few-handy-atom-editor-tips-c38df3b5aec3)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Setting up your work flow
Inside of the folder you downloaded today, there are many folders that contain different files.
```
llc-html-css-multi-page-site-master
|-- framework // Contains files needed for slide presentation. Do not edit!
|-- project // Contains the exercise files for this workshop. (images, CSS & HTML files)
|-- slides.html // This is the file you are viewing right now!
```
Open the `project` folder in the text editor to edit your project.
Go to **File** > ** Add Project Folder**. A popup will appear.
* navigate to the `llc-html-css-multi-page-site-master` folder
* select the `project` folder & click **Open**
The files will now appear in the sidebar.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Setting up your work flow
Your project folder structure will look like this:
```
|-- project
|-- css // CSS files here.
|-- examples // Example files for each exercise.
|-- final // Finished example.
|-- images // Sample images for your project. You can also add your own here.
|-- index.html // The homepage of your site.
```
The `examples` folder contains the solutions for each exercise.
Try not to peek unless you're *really* stuck.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Setting up your work flow
Open `index.html` in the browser.
* go to Windows Explorer or Finder
* navigate to the `llc-html-css-multi-page-site-master` **>** `project` folder
* double click on `index.html` to open it in your default browser<br>
<span class="note">(If Chrome is not your default, right-click/two-finger tap on `index.html` and choose **Open With > Chrome**)</note>
You should see this in the browser:
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Making changes
This is your editing work flow:
1. in the editor, update the code
1. save the changes / file
1. refresh the browser
1. repeat
Try replacing the “your name here” text with *your* name!
```html
<h1>Your Name Here</h1>
```
---
##Pro tip!
Use keyboard shortcuts:
* <kbd>ctrl</kbd>/<kbd>command</kbd> + <kbd>s</kbd> to save
* <kbd>ctrl</kbd>/<kbd>command</kbd> + <kbd>r</kbd> to refresh the browser
<div class="presenter-notes">
Let the learners know that there is an exercise coming up very soon to update the rest of the page. This is just to introduce them to the update/save/refresh flow and to break up the lecture a bit more.
</div>
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#What is HTML?
##The content layer
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML Syntax
Just like languages that we speak and write, HTML follows proper "grammar" rules, too. HTML *tags* are written with left & right angled brackets <kbd><</kbd><kbd>></kbd> and the forward slash <kbd>/</kbd>. Get to know these keys!
<!-- .element: width="75%" -->
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML Syntax
Tags usually come in pairs — an opening tag and a closing tag — to *wrap* the content. Note the closing tag has a forward slash <kbd>/</kbd>.
```html
<tag> <-- opening tag --- closing tag --> </tag>
```
HTML *tags* describe the content inside of them to the web browser.
```html
<h1>This tag describes a heading</h1>
<p>This tag is for paragraphs.</p>
```
---
##Pro tip!
HTML *tags* are also often referred to as "elements". You will see these words used synonymously throughout this course.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Writing HTML
To ensure that your tags are closed properly and to help reduce errors, write both the opening and closing tags *first*.
Then move the cursor between the tags to add the text content.
---
##Pro tip!
In many text editors, you can type just the tag **name** and tab. Try typing just `p` and tab!
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Nesting HTML tags
When HTML Tags are nested, it creates a family tree-like structure of nodes that are ancestors, parents, children, siblings, etc.
```html
<parent>
<child></child>
</parent>
```
When nesting tags, indent once to make the code easier to read.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML Comments
Sometimes you want to leave notes for yourself (or others) but don't want it to display in the browser. Comments can be used for:
* hiding code for later use
* leaving notes
* organizing the document
The syntax for comments start with `<!--` and ends with `-->`.
```html
<!-- This is my comment. Comments should always be included between the dashes. -->
```
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#Basic HTML document
We've just seen these tags in the project's `index.html` file. These tags are required for every web page. The first line, the `DOCTYPE`, tells the browser what HTML version the page is written in.
<pre><code><strong><!DOCTYPE html></strong>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- page content here -->
</body>
</html>
</code></pre>
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#THE HTML ELEMENT
* identifies the document as HTML and all elements are *nested* inside
* the `lang` *attribute* classifies the language (more on attributes soon)
<pre><code><!DOCTYPE html>
<strong><html lang="en"></strong>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- page content here -->
</body>
<strong></html></strong>
</code></pre>
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#The HEAD ELEMENT
* includes information about the page (i.e. CSS files)
* `<title>` is required and defines the title of the document
* `<title>` is displayed in the browser tab, bookmarks & search results
<pre><code><!DOCTYPE html>
<html lang="en">
<strong><head></strong>
<meta charset="UTF-8">
<title>My page title</title>
<strong></head></strong>
<body>
<!-- page content here -->
</body>
</html>
</code></pre>
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#THE BODY ELEMENT
All content to be displayed in the browser goes between the `<body></body>` tags.
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page title</title>
</head>
<strong><body></strong>
<!-- page content here -->
<strong></body></strong>
</html>
</code></pre>
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Attributes
* provides additional information or instruction for the element
* included *inside the opening HTML tag*
* follows the syntax of `attribute="value"` (note the quotes)
* many different attributes
```html
<tag attribute="value">content</tag>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Attributes
We just saw two attributes in our basic HTML document example.
The `lang` attribute is used to classify the language.
```html
<html lang="en">
```
The `charset` attribute sets the character encoding.
```html
<meta charset="UTF-8">
```
We will be using more attributes throughout today's exercises.
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Adding HTML Content
##Headings, paragraphs, links, oh my!
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Adding text: Headings & paragraphs
There are six heading tags ranging from `<h1>` to `<h6>` and follow a hierarchy. HTML is used to assign *meaning* to the content in a way that the browser can read it.
```html
<h1>Name of blog</h1>
<h2>Title of blog post</h2>
<h3>Sub headings within blog post</h3>
```
Paragraphs are represented by the `<p>` tag.
```html
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Exercise #1 - Update index.html (~5-10 minutes)
1. Update your name in the `h1` tag if you haven’t already.
2. Add a tagline under your name, using the appropriate heading tag.
3. Change the content in the `<title>` tag. Where do you see this change?
4. Add a copyright message using a paragraph (`<p>`) tag _inside_ of the `<footer>` tag.
Don’t forget to save and refresh your browser after each change!
<!-- .element: class="note" -->**Bonus:** Try using an HTML code for the copyright _symbol_. Here are some resources: [character-code.com](http://character-code.com/ascii-table.php), [unicode-table.com](http://unicode-table.com/en/#00A9)
Check <!-- .element: class="note" --> [`ex1.html`](project/examples/ex1.html) in the `examples` folder for reference. We'll talk about `<header>` & `<footer>` soon.
</script>
</section>
<section class="slide nested-list" data-markdown>
<script type="text/template">
#Creating HTML pages
To create an HTML page, name the file with an `.html` extension.
1. Use lowercase letters.
* `about.html` instead of `About.html` or `ABOUT.html`
2. Avoid <span aria-label="spaces">s p a c e s</span> or symbols. Use underscores (`_`) or dashes (`-`).
* Note that [dashes are better for SEO](http://searchengineland.com/9-seo-quirks-you-should-be-aware-of-146465) (search engine optimization).
* `business-hours.html` instead of `business hours.html`
* The browser will interpret spaces as `business%20hours.html`
3. Keep your file names concise, yet meaningful.
* `about.html`, `contact.html` instead of `page1.html`, `page2.html`
---
##Pro tip!
These file naming tips can be applied to any files such as images, folders, CSS, etc.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Class Exercise: Create HTML pages
Let's create HTML files for the **About** and **Contact** pages. Leave the file itself blank. Content will be added in a later exercise.
`index.html` already exists, so create `about.html` and `contact.html`. Make sure to save these pages into the `project` folder.
In the editor:
1. File > New file
2. File > Save
Your directory will now look like this:
```java
|-- project // folder
|-- css // folder
|-- examples // folder
|-- final // folder
|-- images // folder
|-- index.html
|-- about.html
|-- contact.html
```
</script>
</section>
<section class="slide project" data-markdown>
<script type="text/template">
#Website Navigation
In the sample project, all the pages have the same headings (name & tagline), nav links and footer information.
Some of the styles on each page are different, but don't worry about that yet. Right now we are focusing on setting up the HTML.
<ul class="horizontal-list" role="list">
<li><img src="framework/img/workshop/NEW_home-complete.png" alt="Home page with top navigation area and large background image of city landscape"></li>
<li><img src="framework/img/workshop/NEW_about-complete.png" alt="About page with decorative image on left and content area on right"></li>
<li><img src="framework/img/workshop/NEW_contact-complete.png" alt="Contact page with embedded contact form"></li>
</ul>
---
##Pro tip!
It's best to write as much HTML & content as possible *before* adding CSS to ensure that the proper, [semantic](http://en.wikipedia.org/wiki/Semantic_HTML) HTML elements are being used.
Check out the [HTML elements reference on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) for more details on each HTML element.
</script>
</section>
<section class="slide project" data-markdown>
<script type="text/template">
#Paths
We already know that websites are made up of multiple pages (`.html` files), and that each page can contain different types of content.
Some of that content lives directly within the page itself (ie. the text), and some of it may live elsewhere (eg. in the images folder, on other websites, etc.).
When we want to display some content that lives *outside* of the current page, we have to tell the browser where to find it. This information is called a `path`.
</script>
</section>
<section class="slide project" data-markdown>
<script type="text/template">
#Types of Paths
Paths allow the browser to find, retrieve, and display external resources such as images, CSS/JS files, and even other pages.
There are two different types of paths:
* `Relative` - These tell the browser how to get from the current page to the external resource.
* `Absolute` - These tell the browser *exactly* where the external resource can be found online.
</script>
</section>
<section class="slide project" data-markdown>
<script type="text/template">
#Relative Paths
**We use relative paths when we're trying to make a connection between two resources within our own website.**
Relative paths start from the location of the current page, and tell the browser which folders should be looked in to find the external resource.
```xml
images/backgrounds/dark/dark-background-1.jpg
```
We can think of relative paths like directions.
We'll be using relative paths to connect the pages of site our shortly!
</script>
</section>
<section class="slide project" data-markdown>
<script type="text/template">
#Absolute Paths
**We use absolute paths to request resources that live *outside* of our own website (eg. elsewhere online).**
```xml
// Image
http://website.com/images/image-1.jpg
// CSS
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css
```
Absolute paths start with a protocol (ie. `http` or `https`), followed by the location of the resource.
If relative paths are like directions, an absolute path is like a home address.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Links & Attributes
Links are represented by the anchor tag (`<a>`) and an *attribute*.
Remember, *attributes* follow the syntax `attribute="value"` and are added inside the *opening* tag.
The `href` attribute provides information about where the link is located.
```html
Visit <a href="http://ladieslearningcode.com">Ladies Learning Code</a>.
```
This link in the example above uses an **absolute** path. Much like typing a URL into the browser, it's "fully resolved" and starts with `http://`.
<!-- .element: class="note" -->**Note**: The clickable text goes in between the opening and closing `<a>` tags.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Links: Relative
The navigation in today's project will link to other HTML pages within the project folder, so we'll be using relative links.
Understanding how to use relative paths and folder structure is super important for creating websites.
We'll start by using relative paths to make connections between our HTML files, then move on to pulling in images and external CSS.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Understanding Relative Paths
Your project folder directory currently looks like this:
```xml
|-- project (folder)
|-- css (folder)
|-- examples (folder)
|-- final (folder)
|-- images (folder)
|-- background-1.jpg
|-- ...
|-- index.html
|-- about.html
|-- contact.html
```
Since all of the HTML files are in the same folder, the directions *from* the `index` *to* the `about` file would look like this.
```html
<a href="about.html">About Me</a>
```
Since our images are **not** in the same folder as the HTML files, we have to tell the browser to look in a different location.
```html
<img src="images/background-1.jpg" alt="My cool image">
```
(More on images soon.)<!-- .element: class="note" -->
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML5 Sectioning Tags
Sometimes, multiple HTML elements need to be grouped together for organization and/or styling.
Prior to HTML5, the [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) tag was used for grouping elements.
`div` is still ok to use, but HTML5 introduced a number of semantic tags that better describe blocks of content for asssistive technology.
You've already seen two of them in `index.html`: `<header>` and `<footer>`.
---
##Resource
- More about [HTML5 on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML5 Sectioning Tags: `<nav>`
Navigations are often created using an HTML list and links or just with links. To learn more, check out the resources below.
Today we'll be using only links. Wrap the links `<a>` in a `<nav>` tag to group them as navigation links.
```html
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
```
(The <!-- .element: class="note" --> `#` symbol is often used as a placeholder for the `href` value.)
---
##Resource
Here is some extra reading about using lists vs links only:
- [Navigation in Lists: To Be or Not To Be](https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/)
- [Should Navigation Be Defined in Lists?](http://www.sitepoint.com/are-navigation-lists-necessary/)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Class Exercise: Creating a navigation
Back in `index.html`, let's add a navigation to link to the three pages in our project: **Home**, **About**, **Contact**.
It will look like this in the browser:
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Navigation
The nav and header in `index.html` should now look like this:
```html
<header>
<div>
<h1>Jane Smith</h1>
<h2>Web Developer + City Girl</h2>
</div>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Keyboard shortcuts
Right now, the HTML in `index.html` contains content that will be required on all three pages (base HTML tags, header, navigation & footer info) and should be copied over.
Writing code often requires a lot of repetition. Here are some shortcuts to help improve your work flow.
`ctrl/cmnd + c` copy
`ctrl/cmnd + x` cut
`ctrl/cmnd + v` paste
`ctrl/cmnd + s` save
`ctrl/cmnd + r` refresh browser
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Exercise #2 - About & Contact pages (~10 minutes)
1. Copy all of the HTML from `index.html` *to* `about.html` and `contact.html`
1. Update the `<title>` tag to reflect the contents of the page.
e.g. `<title>Your Name | About Me</title>`
1. Test the navigation. Are all the links going to the proper page?
##Bonus exercise:
Find an image to use as a profile picture for your **About** page. The image should ideally be around `400px` to `600px` wide. Here's a link to a free online tool for cropping images: [pixlr.com](https://apps.pixlr.com/editor/)
For reference, in the <!-- .element: class="note" --> `examples` folder: `ex2-index.html`, `ex2-about.html`, `ex2-contact.html`
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Images & content
In the next few slides, we'll cover how to use the `<img>`, `<main>` and `<blockquote>` tags to add images and content to the **About** page.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Image Types
There are a few different image file types for the web:
- `jpg` - used for photographs with lots of rich colours or gradients
- `png` - used for images with transparent or opaque backgrounds
- `svg` - used for 2D graphics, icons and is scaleable, based on XML and can be used as a image file or in the HTML document
- `gif` - used for images with minimal colour variation and of course, for animated gifs!
 <!-- .element: height="325" -->
<!-- .element: height="325" -->
---
##Resources
- [Using SVG](http://css-tricks.com/using-svg)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Adding images
Images are an example of a empty element/self-closing tag. It doesn't need a closing tag because it _is_ the content.
The image tag uses the `src` _attribute_ to tell the browser where to find the actual image file.
The value of the `src` attribute can be an absolute path:
```html
<img src="http://fillmurray.com/200/300" alt="A portrait of Bill Murray">
```
Or a relative path:
```html
<img src="images/profile.jpg" alt="A picture of me">