-
Notifications
You must be signed in to change notification settings - Fork 28
Expand file tree
/
Copy pathslides-en.html
More file actions
2466 lines (1920 loc) · 93.6 KB
/
slides-en.html
File metadata and controls
2466 lines (1920 loc) · 93.6 KB
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/a11y/plugin.css">
<link rel="stylesheet" href="framework/css/styles.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 logo">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-one-page/archive/master.zip">bit.ly/llc-onepage</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>
</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">←</span> and right <span class="arrow">→</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 logo">
<h1 class="heading-bg">
<span>Build a One-Page Website <br>with HTML & CSS</span>
</h1>
<!-- FILL IN INSTRUCTOR DETAILS -->
<!-- <img class="instructor" src="http://placehold.it/225x225" alt="Instructor Name">
<h2><span class="cursive">with</span> Instructor name</h2>
<ul>
<li><a href="mailto:">hello@email.com</a></li>
<li><a href="http://website.com">website.com</a></li>
<li><a href="http://twitter.com/">@twitter</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">←</span> and right <span class="arrow">→</span> arrow keys to navigate</p>
</footer>
</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" data-markdown>
<script type="text/template">
# Today’s project
[Review the whole project here](project/reference-en/final.html).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Themes
We've also included some themed assets, and examples of how you can use them to customize your site!
<!-- .element: width="48%" -->
<!-- .element: width="48%" -->
<!-- .element: width="48%" -->
<!-- .element: width="48%" -->
<!-- .element: width="48%" -->
<!-- .element: width="48%" -->
<!-- .element: width="48%" -->
<!-- .element: width="48%" -->
---
## Theme Assets
* The theme images can be found in `/project/images/themes`.
* The example theme code can be found in `/project/reference/themes`.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Course Outline
<div class="table-of-contents"></div>
</script>
</section>
<section class="slide title dark" data-markdown data-toc>
<script type="text/template">
#Getting Started
##Websites, The Web Browser & Writing HTML
</script>
</section>
<section class="slide website-table" data-markdown>
<script type="text/template">
#What exactly *is* a website?
A web**site** is made up of one or more web **pages** (also known as *HTML documents*), and other files (like images) organized in file folder structure.
Today we'll be building a website with one page.
</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:
- `scheme` - This tells the browser *how* to find the file.
- `host` - 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 `host` is the home address, the `path` is the name of the person we're looking for, and which room they're in!
```html
<scheme>//<host>/<path>/
```
```xml
https://www.canadalearningcode.ca/about/
```
---
## Resource
- [Relative URLs](https://www.w3.org/TR/WD-html40-970917/htmlweb.html#h-5.1.2)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Web Browsers
The main functionality of the [browser](http://browsehappy.com) is to present a *web resource* in the browser window.
Choose a modern web browser that supports current web standards and dev tools for a better experience.
In [Google Chrome](https://www.google.com/intl/en-CA/chrome/browser/) (and in other browsers), you can view the source of *any* web page. Right-click / two-finger tap anywhere on the browser and select **View Web Source**. That’s HTML!
---
## Resource
[browsehappy.com](http://browsehappy.com)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Developer Tools
**Chrome Developer tools** take it a step further and allows you to *inspect* any web page, making it easier to test & debug code. The 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: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> (PC) / <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>I</kbd> (Mac)
---
## Resources
* To set Chrome as your default browser, follow [these instructions](https://support.google.com/chrome/answer/95417?hl=en).
* More about dev tools: [discover-devtools.codeschool.com](http://discover-devtools.codeschool.com)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Text Editor
* used to write and edit code
* preinstalled editors (Notepad / TextEdit) don't include many features
* paid and free options include features such as colour highlighting and plugins for improving workflow
* some great options: [VSCode](https://code.visualstudio.com/), [Notepad++](http://notepad-plus-plus.org/), [Sublime Text](http://www.sublimetext.com/) (untimed free trial), [Brackets](http://brackets.io) and [TextWrangler](http://www.barebones.com/products/textwrangler/).
**[Atom](https://atom.io/)** is totally free and is the editor we'll be using today.
<span class="note">(If you have another editor installed, it will work as well but some features may be different.)</span>
* If you are using a Chromebook, you can use <a href="https://chrome.google.com/webstore/detail/caret/fljalecfjciodhpcledpamjachpmelml?hl=en" target="_blank">Caret</a>
---
## Pro tip!
Improve your work flow with [keyboard shortcuts](http://www.canadalearningcode.ca/downloads/keyboard-shortcuts.pdf).
</script>
</section>
<section class="slide side-by-side" data-markdown>
<script type="text/template">
#HTML & CSS
This is how the Canada Learning Code site looks with & without CSS!
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Intro to HTML
##HyperText Markup Language
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML Syntax
Tags are written with angled brackets `< >` and a forward slash `/` for the closing tag. Get to know these keys!
<!-- .element: width="70%" -->
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML: The content layer
Tags usually come in pairs — an opening tag and a closing tag — to *wrap* the content. Note the closing tag has a forward slash (`/`).
```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>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Nested tags
Tags can be *nested* within other tags like this:
```html
<outertag>outer content <innertag>inner content</innertag> outer content</outertag>
```
Nested tags create a family tree-like relationship, often referred to as *parent* and *child* nodes.
The inner tag is the child of the outer tag.
```html
<parent>
<child></child>
</parent>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Organizing your code
HTML was created for web browsers to read (not humans) so this makes perfect sense to a web browser:
```html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body></body></html>
```
But for us, using whitespace through indentation (tabs) will makes HTML easier to read. When nesting a tag, add one tab space.
```html
<outertag>
<innertag>
</innertag>
</outertag>
```
</script>
</section>
<section id="basic-tags" class="slide" data-markdown>
<script type="text/template">
#Base HTML Tags
The tags below should be included in ** *all* ** HTML documents.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- page content here (this is an HTML comment by the way) -->
</body>
</html>
```
(We'll be going through what these tags mean very soon.)<!-- .element: class="note" -->
To create an HTML page, just save it with the file extension `.html`.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Setting up your project
Inside of the folder you downloaded today, open the **project** folder in your text editor to edit your project.
```xml
llc-html-css-one-page-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!
```
Go to **File** > ** Add Project Folder**. A popup will appear.
Then:
* navigate to the `llc-html-css-one-page-master` folder
* select **project**
* click **Open**
The files will now appear in the sidebar.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Setting up your project
Your project folder structure will look like this:
```xml
project
|-- images
|-- reference
```
The `images` folder contains a selection of images to use in your project (or add your own to this folder during the exercises).
The `reference` 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">
#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.
Go to **Preferences** to open the customization options.<br />
For Windows Users, go to the **File** menu and choose Settings.
<!-- .element: width="70%" -->
<!-- .element: width="30%" -->
Select the **Editor** tab in the left menu
<!-- .element: width="70%" -->
Make sure the **Soft Wrap** and **Show Indent Guide** options are 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)
* [Themes](https://atom.io/themes) for Atom
* [Snippets](https://github.com/atom/snippets) - create your own code snippet shortcuts
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Class Exercise #1: Create your project's HTML page
1. In the text editor, create a new file (**File** > **New File**)
1. Save it as `index.html` (**File** > **Save**)
1. Add all of the basic HTML tags. Refer to [Base HTML Tags slide](slides-en.html#basic-tags) for reference.
1. In *between* the `<title></title>` tags, add a *page title* that reflects the content of your webpage. Example:
```html
<title>Laura Ipsum | Digital Designer & Developer</title>
```
1. Open `index.html` in the browser.
* go to Windows Explorer or Finder
* navigate to the `llc-html-css-one-page-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**)</span>
1. Where do you see the change you made in step 4 take affect?
<!-- .element: class="delayed" -->
There is no page content yet so the browser will show a blank page. The page title however, will show in the browser toolbar.
<!-- .element: class="delayed" -->
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#The Doctype
* not an HTML tag & must be the first item
* tells the browser what HTML version the page is written in
* the below example is the HTML5 doctype
<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
* always the first HTML tag & identifies the document as HTML
* it is the root element & ancestor of all other elements because everything is *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 but *does not display content*
* the `<title></title>` element is the only required element
* defines the title of the web page/document
* displayed in the browser tab, bookmarks and search engine results
* is the first piece of content announced by screen readers
* CSS, JavaScript & [metadata](https://searchenginewatch.com/sew/how-to/2067564/how-to-use-html-meta-tags) can also be included here
* page content *never* goes here
<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 window goes between the `<body></body>` tags.
Also known as the *viewport*.
<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 page 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 page-layout" data-markdown>
<script type="text/template">
# PLANNING THE PAGE LAYOUT
An important part of creating a web page is planning the page structure. Though you will likely make changes as you go along, creating a basic layout with [semantic markup](http://html5doctor.com/lets-talk-about-semantics/) is a good way to start.
If you don't have a design to work from, many developers and designers like to start planning with a simple sketch.
For today, let's take a look at the final design to see how to group related elements and create a page structure.
 <!-- .element: class="screenshot" -->
<div class="labels">
- header <!-- .element: class="header" -->
- about <!-- .element: class="about" -->
- loves <!-- .element: class="loves" -->
- footer <!-- .element: class="footer" -->
</div>
</header>
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML5 Structural Elements
HTML5 introduced new tags to better describe blocks of content such as `<header>`, `<footer>` and `<section>`. (There are many more.)
Prior to HTML5, the `<div>` tag was often used to group related content. But the `<div>` doesn't have any semantic meaning.
The `div` tag can still be used when needed for purely grouping elements together for styling or when no other HTML5 tag properly describes the element.
When in doubt, it's ok to continue to use <!-- .element: class="note" -->`<div>`.
---
## Resources
* [MDN: HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
* [HTML5 For Web Designers](https://abookapart.com/products/html5-for-web-designers)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML5 Structural Elements
The `class` attribute is often used to differentiate blocks using the same HTML tag to apply specific styles to just 1 of those tags. (More on adding styles with class later).
Using HTML5 tags, the page could be structured like this:
```html
<header>
<!-- header content here -->
</header>
<section class="about">
<!-- about content here -->
</section>
<section class="loves">
<!-- stuff I love goes here -->
</section>
<footer>
<!-- footer / contact info here -->
</footer>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Class Exercise #2: Page structure
Back in the text editor, let's add the HTML5 structural tags to setup the page layout.
Only add the structural HTML blocks in this step, no content just yet.
We will need these tags: `<header>`, two `<section>`'s and a `<footer>`
Also, you can use HTML comments to help organize the code like so:
```html
<!-- page header -->
<header>
</header>
```
View <!-- .element: class="note" --> `exercise-2.html` in your `reference` folder or the previous slide to check your code.
</script>
</section>
<section class="slide title" data-markdown data-toc>
#Adding content
##Headings, paragraphs, images and links
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Paragraphs
**Paragraphs**: whether it's one sentence or more, each paragraph needs its own pair of `<p></p>` tags.
```html
<p>This is a paragraph.</p>
<p>This is a longer paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non vero dolor expedita quasi reiciendis minus unde sapiente id eveniet saepe officia quibusdam aspernatur, sint voluptate ipsam ex magni. Aliquam, ex!</p>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Headings
There are six headings tags ranging from `<h1>` to `<h6>` used to describe the *hierarchy* of the page structure. To decide which heading to use, think about how you would arrange an essay outline.
<div class="example essay-headings">
<p><strong>Essay Title</strong></p>
<ol>
<li>Introduction</li>
<li>First supporting idea
<ul>
<li>point 1</li>
<li>point 2</li>
</ul>
</li>
<li>Second supporting idea
<ul>
<li>point 1</li>
<li>point 2</li>
</ul>
</li>
<li>Conclusion</li>
</ol>
</div>
Let's look at how we could describe this hierarchy using heading tags.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Pre-HTML5 Heading outline
Prior to HTML5, before sectioning tags were introduced, usually only one `<h1>` was used per page. The heading outline would look like this:
**Pre-HTML5 Heading Outline**
```html
<h1>Essay Title</h1>
<div>
<h2>Introduction</h2>
<p>stuff here</p>
</div>
<div>
<h2>First supporting idea</h2>
<h3>point 1</h3>
<h3>point 2</h3>
</div>
...etc
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Headings & HTML5 Sectioning tags
With the introduction of HTML5 sectioning tags, each part of the document that uses a sectioning tag now gets its *own* outline.
**HTML5 Heading Outline**
```html
<h1>Essay Title</h1>
<section>
<h1>Introduction</h1>
<p>stuff here</p>
</section>
<section>
<h1>First supporting idea</h1>
<h2>point 1</h2>
<h2>point 2</h2>
</section>
```
---
## Resources
- [Using HTML sections and outlines](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document)
- [The Truth About Multiple H1 Tags in the HTML5 Era](http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#The debate about Headings & HTML5 Sectioning tags
This article, [The Truth About Multiple H1 Tags in the HTML5 Era](https://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824), was written in 2013, when HTML5 was still in its early days. Search Engine Optimization (SEO) experts and web developers are still debating to this day over whether a page can have more than one `h1` tag.<br />
<br />
*[John Mueller](https://twitter.com/JohnMu), Senior Webmaster Trends Analyst at Google*
You can also [watch this very quick video](https://www.youtube.com/watch?v=WsgrSxCmMbM) (1:16) from the Google Webmaster channel on this topic.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#The debate about Headings & HTML5 Sectioning Tags
On the other side of the debate, Bing clearly states in their [Webmaster Guidelines](https://www.bing.com/webmaster/help/webmaster-guidelines-30fba23a):<br />
*"Only one `<h1>` tag per page"*<br /><br />
In this Mozilla article, [Using HTML Sections and Outlines](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines), they had this to say on the HTML5 semantic markup solution:<br />
*"The description of problems solved by HTML5 is theoretical only."*<br /><br />
Using only one `<h1>` tag per page is a simple and clear solution around these complex discussions. Depending on the complexity of your site though, only one `<h1>` tag might not make sense in context of a more complex layout.<br />
**We want to present both sides of this argument and let you make your own decisions based on what you think is best for your site.**
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Exercise #3: Add Content (15mins)
Add some text based content. Images & links will also be covered next.
See <!-- .element: class="note" -->`exercise-3.html` for reference or view the next slide but only if you're stuck!
Add the content below to make your page content look similar to [this](framework/img/workshop/exercise-3.png).
1. Add your name & tagline in the `<header>` section using the appropriate heading tags.
<span class="note">(**Reminder!** `<head>` and `<header>` are two different tags.)</span>
1. In the **About** section, add a heading and 2 paragraphs.
<span class="note">Don't have content to add? Use placeholder text! See resources below.</span>
1. In the **Loves** section, add a heading and a paragraph.
1. In the **Footer**, add a heading.
---
## Resources
* [meettheipsums.com](https://meettheipsums.com)
* [thewireipsum.com](https://thewireipsum.com)
* [quotes.net](https://www.quotes.net)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Review your code
(Also found in <!-- .element: class="note" -->`exercise-3.html`)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laura Ipsum | Designer & Developer</title>
</head>
<body>
<!-- page header -->
<header>
<h1>Hi! I'm Laura Ipsum.</h1>
<h2>I'm a digital designer and developer with a penchant for gourmet doughnuts.</h2>
</header>
<!-- about me section -->
<section class="about">
<h1>About Me</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<!-- My favorite things section -->
<section class="loves">
<h1>Love, Love, Love</h1>
<p>Here are a few things that I really love.</p>
</section>
<!-- footer & contact info -->
<footer>
<h1>Contact Me</h1>
</footer>
</body>
</html>
```
</script>
</section>
<section class="slide project" data-markdown>
<script type="text/template">
#Paths
Even though today's project only has one page, it includes lots of different 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 add images 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">
#Self-closing tags and images
Self-closing tags don't format content or require a closing tag. They are used to embed objects onto the page; they *are* the content.
Images use a self-closing tag. It also requires a `src` *attribute* to tell the browser the location of the image file.
```html
<img src="path/to/image/file-name">
```
`alt` is another attribute that is added to images to provide *alternative text* to visually impaired web visitors using screen readers.
```html
<img src="http://placekitten.com/200/300" alt="kitten!">
```
##Example of `alt` when image does not load:
<img src="" alt="kitten!">
---
## Resources
- [Alt-texts: The Ultimate Guide](https://axesslab.com/alt-texts/)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Image file types
- `gif` - smaller file size when used for line art, charts, and images with minimal colour variation. <span class="note">(That's why animated gifs tend to look grainy but oh so fun!)</span>
- `jpg` - smaller file size when used for photographs with lots of rich colours or gradients
- `png` - larger file size but has the best quality and is great for images with transparent backgrounds
- `svg` - XML-based vector image format for 2D graphics with support for interactivity and animation
---
## Resource
- [Here's a big list of image placeholder sites](http://www.wpfreeware.com/tutorial/placeholder-images-generator-service-web-designers/).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Image file organization
It's best practice (but not required) to put image files into its own folder to keep the project files organized. Today's **project** directory already includes an `images` folder.
Since the images are not in the same folder as `index.html`, use a *relative* path to link to the file.
```html
<img src="images/image-file.jpg" alt="description of image">
```
The starting point (`index.html`), is outside of the `images` folder. The above example directs the browser to a folder named `images`, then the filename, *including the file extension*.
</script>
</section>