-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·832 lines (755 loc) · 33.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>girldevelopit-reveal.js - The GDI HTML Presentation Framework</title>
<meta name="description" content="Girl Develop It framework for easily creating beautiful presentations using HTML in GDI theme. Forked from Hakim El Hattab's reveal.js">
<meta name="author" content="Girl Develop It">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
<!-- For syntax highlighting -->
<!-- light editor<link rel="stylesheet" href="lib/css/light.css">-->
<!-- dark editor--><link rel="stylesheet" href="lib/css/dark.css">
<link rel="stylesheet" href="lib/css/zenburn.css">
<link rel="stylesheet" href="plugin/accessibility-helper/css/accessibility-helper.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="css/print/pdf.css" type="text/css" media="print">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<img src = "img/circle-gdi-logo.png">
<h2>HTML101: <br>Intro to HTML & CSS</h2>
</section>
<section>
<h2>Welcome!</h2>
<p class ="tomorrow-aqua bold">Some "rules"</p>
<p><ul>
<li>We are here for you!</li>
<li>We love your questions</li>
<li>Help each other</li>
<li>Try to avoid:
<ul>
<li>Feigning surprise</li>
<li>Well-actually's</li>
</ul>
</li>
<li>Have fun</li>
</ul></p>
</section>
<section>
<h3>Tell us about yourself.</h3>
<ul>
<li>Who are you?</li>
<li>What do you hope to take home from this class?</li>
<li>What is your favorite thing to do when you have some free time?</li>
</ul>
</section>
<!-- Folder Structure -->
<section>
<h3>Get Started: Folder Structure</h3>
<p>All the files for your site should be stored within the same folder.</p>
<div class="left" style="width: 45%;">
<p class="left-align"><strong>This includes:</strong></p>
<ul>
<li>HTML Files</li>
<li>CSS Files</li>
<li>Images</li>
<li>Script files</li>
<li>Anything else that will appear on your site</li>
</ul>
<p class="left-align"><small>Note: File names should not include spaces or special characters. File names ARE case sensitive.</small></p>
</div>
<div class="right" style="width: 45%;">
<img src="img/folderstructure1.png" />
</div>
</section>
<!-- What is HTML? -->
<section>
<h3>What is HTML?</h3>
<p>HTML (<span class="bold">H</span>yper<span class="bold">T</span>ext <span class="bold">M</span>arkup <span class="bold">L</span>anguage)<br>is the code that allows us to build websites</p>
</section>
<section>
<h3>Why use HTML?</h3>
<p>The web is mostly used for 2 things:</p>
<ol>
<li><a href="https://en.wikipedia.org/wiki/Main_Page" target="_blank">To <span class="bold">organize</span> information in a logical way</a></li>
<li><a href="http://www.arko.co.nz/" target="_blank">To <span class="bold">display</span> information in a logical & aesthetically pleasing way</a></li>
</ol>
</section>
<section>
<h3>Basic HTML</h3>
<div class="xml">
<pre>
<code contenteditable>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
</code>
</pre>
</div>
</section>
<!-- New Semantic Elements in HTML5 -->
<section>
<h3>Why New Elements - HTML5?</h3>
<ul>
<li>SEO & Search Engines</li>
<li>Web Accessibility</li>
<li>Code is for humans too</li>
</ul>
<p> </p>
<p><a href="http://www.w3schools.com/html/html5_semantic_elements.asp" target="_blank">HTML5 New Semantic Elements</a></p>
<p><a href="http://html5doctor.com/lets-talk-about-semantics/" target="_blank">Let's Talk About Semantics</a></p>
</section>
<!-- Attributes & Values -->
<section>
<h3>Attributes & Values</h3>
<ul>
<li>
<strong class="tomorrow-blue">Attribute</strong>
<ul>
<li>Class, id, language, style, identity, source</li>
<li>Allows you to add more info to the element</li>
<li>Placed inside an opening tag, before the right angle bracket.</li>
</ul>
</li>
<div class="xml">
<pre>
<code contenteditable>
<img src="my_picture.jpg" />
<a href="http://girldevelopit.com">GDI</a>
<section id="copyright">© GDI 2013</section>
<section class="important">Remember!</section>
</code>
</pre>
</div>
<li>
<strong class="tomorrow-blue">Value</strong>
<ul>
<li>Value is the value assigned to a given attribute.</li>
<li>Values must be contained inside quotation marks.</li>
</ul>
</li>
</ul>
</section>
<!-- Links-->
<section>
<h3>Element: Link</h3>
<p>Links have three components</p>
<ul>
<li><span class="tomorrow-yellow">Tag:</span> <a></a></li>
<li><span class="tomorrow-yellow">Href attribute:</span> "http://www.girldevelopit.com"</li>
<li><span class="tomorrow-yellow">Title attribute:</span> "Girl Develop It"</li>
</ul>
<pre><code>
<a href="http://www.girldevelopit.com" title="Girl Develop It Homepage">GDI</a>
</code></pre>
<p><a href="http://www.girldevelopit.com" title="Girl Develop It Homepage">GDI</a></p>
<p>The <a> tag surrounds text or images to turn them into links</p>
</section>
<!-- Link Attributes -->
<section>
<h3>Link Attributes</h3>
<p>Links can have attributes that tell the link to do different actions like open in a new tab, or launch your e-mail program.</p>
<pre><code>
<a href="http://bit.ly/NDTPQJ" target="_blank">GDI SLC Meetup</a>
</code></pre>
<p><a href="http://www.meetup.com/Girl-Develop-It-Salt-Lake-City/" target="_blank">GDI SLC Meetup</a></p>
<p><small>Link opens in a new window/tab with <strong>target="_blank"</strong></small></p>
<pre><code>
<a href="mailto:saltlakecity@girldevelopit.com">E-mail us!</a>
</code></pre>
<p><a href="mailto:saltlakecity@girldevelopit.com">E-mail us!</a></p>
<p><small>Link opens mail program by inserting <strong>mailto:</strong> directly before the email address.</small></p>
</section>
<!-- What is CSS-->
<section>
<h3>CSS: What is it?</h3>
<p>CSS = <span class="tomorrow-green">C</span>ascading <span class="tomorrow-green">S</span>tyle <span class="tomorrow-green">S</span>heets</p>
<p>CSS is a "style sheet language" that lets you style the elements on your page.</p>
<p>CSS is works in conjunction with HTML, but is not HTML itself.</p>
</section>
<!-- The CSS Rule-->
<section>
<h3>The CSS Rule</h3>
<img src="img/cssrule.png" alt="The CSS Rule" style="border: none; box-shadow: none;"/>
</section>
<!-- Connecting HTML to CSS-->
<section>
<h3>Connecting CSS to HTML</h3>
<p class = "tomorrow-green">3 ways</p>
<p>"External"</p>
<p>"Embedded"</p>
<p>"Inline"</p>
</section>
<!-- External-->
<section>
<h3>Connecting CSS to HTML: External/Linked</h3>
<pre><code>
<head>
<link rel="stylesheet" href="styles.css">
</head>
</code></pre>
<p>Shared resource for several pages.</p>
<p>Reduced file size & bandwidth</p>
<p>Easy to maintain in larger projects.</p>
<p class="tomorrow-green">Preferred by coders everywhere!</p>
</section>
<!-- Embedded -->
<section>
<h3>Connecting CSS to HTML: Embedded</h3>
<pre><code>
<head>
<style type="text/css">
p {
color: blue;
font-size: 12px;
}
</style>
</head>
</code></pre>
<p>Inside <head> element.</p>
<p>Uses <style> tag.</p>
<p>Can only be used in one html file</p>
</section>
<!-- Inline -->
<section>
<h3>Connecting CSS to HTML: Inline</h3>
<pre><code>
<p style="color:red;">Some text.</p>
</code></pre>
<p>Uses the HTML attribute style.</p>
<p>Difficult to use in large projects</p>
<p class="tomorrow-yellow">Not preferred.</p>
</section>
<!-- Border-->
<section>
<h3>Border</h3>
<p>The edge around the box, specified as "thickness, style, color."</p>
<img src ="img/box-model-border.png">
</section>
<!-- Border: Example -->
<section>
<h3>Border</h3>
<p style="border: 1px solid #ff0000;">A solid red border</p>
<pre><code>
border: 1px solid #ff0000;
</code></pre>
<p style="border-top: 4px dotted #000000;">A thick dotted black top border</p>
<pre><code>
border-top: 4px dotted #000000;
</code></pre>
<p style="border-top: 1px solid #ff0000;border-bottom: 4px dotted #000000;">Two different border styles</p>
<pre><code>
border-top: 1px solid #ff0000;
border-bottom: 4px dotted #000000;
</code></pre>
</section>
<!-- Width-->
<section>
<h3>Property: Width</h3>
<p>Sets the width of an element.</p>
<p>Does not include padding or borders. These add to the width.</p>
<pre><code>
body {
width: 900px;
}
</code></pre>
</section>
<!-- Height-->
<section>
<h3>Property: Height</h3>
<p>Sets the height of an element.</p>
<p>Does not include padding or borders. These add to the height.</p>
<pre><code>
body {
height: 900px;
}
</code></pre>
</section>
<!-- Inline vs. block-->
<section>
<h3>Inline vs Block</h3>
<div style="float: left;width: 50%; text-align: left;">
<p>So far, we have mostly seen <span class="tomorrow-green">"block"</span> elements. They appear on the next line, like paragraphs</p>
<p style="font-size: 60%;font-weight: bold;">
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements" target="_blank"><p>, <h1>, <ul>, <li>, almost everything else</a>
</p>
<br/><br/>
<p>There are also <span class="tomorrow-green">"inline"</span> elements. They appear on the same line that they are written on.</p>
<p style="font-size: 60%;font-weight: bold;">
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente" target="_blank"><img>, <a>, <br>, <span>, <em>, <strong>, etc.</a>
</p>
</div>
<div style="float:right;">
<img src="img/example-blockinline.png" alt="example of inline and block elements" />
</div>
</section>
<!--Float: Example-->
<section>
<h3>Float: Example</h3>
<p>"Floating" an element moves it, in the normal flow, as far to the <span style="font-weight: bold;">left</span> or <span style="font-weight: bold;">right</span> of its parent element as possible.</p>
<img src="img/example-floatbq.png" alt="example float" />
<p style="font-size: 60%;font-weight: bold;">Above a <blockquote> is floated to the left, allowing text to wrap around it on the right</p>
</section>
<section>
<h3>Float: Wrapping</h3>
<p style="font-weight: bold;">Any other elements, such as paragraphs or lists, will wrap around the floated element.</p>
<pre><code>
.float{
float:left;
width:200px;
background:yellow;
}
</code></pre>
<div style ="float:left; text-align: left;width:200px;background:yellow; color:black; padding: 10px;">
<small>Hi, I'm a yellow box with black text.<br/>
I like to hang out on the left side.</small><br/>
</div>
<div style="text-align: left;font-size: 70%;">Not floating element</div>
<div style="text-align: left;font-size: 70%;">Not floating element</div>
<div style="text-align: left;font-size: 70%;">Not floating element with wrapping Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</section>
<section>
<h3>Using floats to place elements side by side</h3>
<p>If you want two block level elements to be side by side, you need to float both elements. One left, and one right.</p>
<img src="img/example-float-column.png" />
<p style="font-size: 60%;font-weight: bold;">Always specify a width when floating an element, otherwise the element is likely to take up the whole page and not appear floated.</p>
</section>
<section>
<h2>Alternates to Float</h2>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" target="_blank">CSS3 FlexBox</a></p>
</section>
<!-- Clear-->
<section>
<h3>Clear</h3>
<ul>
<li>Tells the element on which side (right, left, both) other elements <strong>cannot</strong> appear. </li>
<li style="margin-top: 30px;">Clearing both sides makes sure floats don’t flow past the clear element.</li>
</ul>
<pre><code>
clear: right;
clear: left;
clear: both;
</code></pre>
</section>
<section>
<h3>Clear</h3>
<p style="font-size: 60%;font-weight: bold">If you had an image, div, etc. floated left, and you did not want the paragraph to appear next to it, you would add <strong>clear: left;</strong> to the paragraph.</p>
<pre><code>
.float{
float:left;
width:50px;
background:yellow;
}
.clear-left{
clear:left
}
</code></pre>
<div style ="float:left;width:50px;background:yellow; color:black; ">
hi<br/>
hi<br/>
hi<br/>
</div>
<div style="text-align: left;">Not floating element</div>
<div style="text-align: left;">Not floating element</div>
<div style="clear: left;text-align: left;">Non-floating element with a style of <strong>clear: left;</strong></div>
</section>
<!-- Font family-->
<section>
<h3>Font-family</h3>
<p>The font-family property defines which font is used.</p>
<pre><code>
p {
font-family: "Times New Roman";
font-family: serif;
font-family: Arial, sans-serif;
}
</code></pre>
<p>Specific font name</p>
<p>Generic name</p>
<p>Comma-separated list </p>
<p style="font-size: 60%;font-weight: bold;">Only have to use quotation marks ("") when the name has spaces</p>
<hr>
<p style="font-size: 60%;"><a href="http://webaim.org/techniques/fonts/" target="_blank">Info on Fonts & Accessibility</a></p>
</section>
<!-- Font size -->
<section>
<h3>Property: Font-size</h3>
<p>The font-size property specifies the size of the font.</p>
<pre><code>
p {
font-size: 12px;
font-size: 1.5rem;
font-size: 100%;
}
</code></pre>
<p>Pixels</p>
<p>"rem" or "em"</p>
<p>Percentage</p>
<hr>
<p style="font-size: 60%;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" target="_blank">More Info on Font-Size</a></p>
</section>
<!-- Fonts-->
<section>
<h3>Fonts (shorthand)</h3>
<pre><code>
p {
font-style: italic;
font-weight: bold;
font-size: 10px;
font-family: sans-serif;
}
</code></pre>
<p>OR</p>
<pre><code>
p {
font: italic bold 10px sans-serif;
}
</code></pre>
</section>
<!-- Padding -->
<section>
<h3>Padding</h3>
<p>Space between the border and the content</p>
<p>Adds to the total width of the box.</p>
<img src ="img/box-model-padding.png"/>
</section>
<!-- Padding: Individual Sides -->
<section>
<h3>Padding</h3>
<p style="background-color: #F2E8AE; padding-top: 20px;width: 450px; margin: 0 auto;">20 pixels* on top only</p>
<pre><code>
padding-top: 20px;
</code></pre>
<p style="background-color: #F2E8AE; padding-right: 20px;width: 450px; margin: 0 auto;">20 pixels on right only</p>
<pre><code>
padding-right: 20px;
</code></pre>
<p style="background-color: #F2E8AE; padding-bottom: 20px;width: 450px; margin: 0 auto;">20 pixels on bottom only</p>
<pre><code>
padding-bottom: 20px;
</code></pre>
<p style="background-color: #F2E8AE; padding-left: 20px;width: 450px; margin: 0 auto;">20 pixels on left only</p>
<pre><code>
padding-left: 20px;
</code></pre>
<p style="font-size: 60%;font-weight: bold;">*Like font-size, you can also use em, rem, or percentages</p>
</section>
<!-- Padding: Exapmle -->
<section>
<h3>Padding</h3>
<p style="background-color: #F2E8AE; padding: 15px;width: 450px; margin: 0 auto;">15 pixels on all sides</p>
<pre><code>
padding: 15px; /* All sides */
</code></pre>
<p style="background-color: #F2E8AE; padding: 20px 15px 13px 25px;width: 450px; margin: 0 auto;">20 on top, 15 on right, 13 on bottom, 25 on left</p>
<pre><code>
padding: 20px 15px 13px 25px; /* Top, Right, Bottom, Left */
</code></pre>
<p style="background-color: #F2E8AE; padding: 10px 45px;width: 450px; margin: 0 auto;">10 on top/bottom, 45 on right/left</p>
<pre><code>
padding: 10px 45px; /* Top/Bottom Right/Left */
</code></pre>
</section>
<!-- Padding: With Picture -->
<section>
<h3>Padding</h3>
<pre><code>
padding: 10px 20px 30px 40px;
</code></pre>
<img src ="img/box-model-padding2.png"/>
</section>
<!-- Margin -->
<section>
<h3>Margin</h3>
<p>The transparent area around the box that separates it from other elements.</p>
<img src ="img/box-model-margin.png"/>
</section>
<!-- Margin: Example -->
<section>
<h3>Margin</h3>
<p>One side</p>
<pre><code>
margin-top: 10px; /* 10 pixels on top */
</code></pre>
<p>All sides</p>
<pre><code>
margin: 15px; /* 15 pixels on all sides */
</code></pre>
<p>Top, Right, Bottom, Left</p>
<pre><code>
margin: 10px 5px 3px 5px; /* 10 on top, 5 on right, 3 on bottom, 5 on left */
</code></pre>
<p>Top/Bottom, Right/Left</p>
<pre><code>
margin: 10px 20px; /* 10 on top/bottom, 20 on right/left */
</code></pre>
</section>
<!-- Auto Margin -->
<section>
<h3>Auto Margin</h3>
<p>If a margin is set to auto on a box that has width, it will take up as much space as possible.</p>
<p style="width: 300px; margin: auto; border: 1px solid #ccc;">CENTERED</p>
<pre><code>
margin: auto;
width: 300px;
</code></pre>
<p style="width: 300px; margin-left: auto; margin-right: 61px; border: 1px solid #ccc;">FLUSH-RIGHT</p>
<pre><code>
margin-left: auto;
margin-right: 5px;
width: 300px;
</code></pre>
</section>
<!-- Text-Align -->
<section>
<h3>Text-Align</h3>
<p style="border: 1px solid #ccc; text-align: left;">Aligned left (default)</p>
<pre><code>
text-align: left;
</code></pre>
<p style="border: 1px solid #ccc; text-align: right;">Aligned right</p>
<pre><code>
text-align: right;
</code></pre>
<p style="border: 1px solid #ccc; text-align: center;">Aligned center</p>
<pre><code>
text-align: center;
</code></pre>
<p style="border: 1px solid #ccc; text-align: justify-all;width: 250px">Justifying all of the text</p>
<pre><code>
text-align: justify;
</code></pre>
</section>
<!-- Line-Height -->
<section>
<h3>Line-Height</h3>
<p style="border: 1px solid #ccc; line-height: 1.5;width: 450px; margin: 0 auto;">Unitless (multiply this number by the font-size)</p>
<pre><code>
line-height: 1.5;
</code></pre>
<p style="border: 1px solid #ccc; line-height: 1.5em;width: 250px; margin: 0 auto;">Using rem or em's</p>
<pre><code>
line-height: 1.5em;
</code></pre>
<p style="border: 1px solid #ccc; line-height: 150%;width: 250px; margin: 0 auto;">Using percentages</p>
<pre><code>
line-height: 150%;
</code></pre>
</section>
<!-- Span: Example -->
<section>
<h3>Span</h3>
<p>Span is used to apply a specific style inline</p>
<pre><code>
.yellow {
color: yellow;
}
</code></pre>
<pre><code>
<p>Paragraph with <span class ="yellow">yellow</span> text.</p>
</code></pre>
<p>Paragraph with <span class ="tomorrow-yellow">yellow</span> text.</p>
</section>
<!-- Color-->
<section>
<h3>Color</h3>
<p>The color property changes the color of the text.</p>
<pre><code>
p {
color: red; /* Color name */
color: #ff0000; /* Hexadecimal value */
color: rgb(255, 0, 0); /* RGB value */
}
</code></pre>
<p><small>The 17 standard colors are: <font color="aqua" style="background:black;">aqua</font>, black, <font color="blue">blue</font>, <font color="fuchsia">fuchsia</font>, <font color="gray">gray</font>, <font color="grey">grey</font>, <font color="green">green</font>, <font color="lime">lime</font>, <font color="maroon">maroon</font>, <font color="navy">navy</font>, <font color="olive">olive</font>, <font color="purple">purple</font>, <font color="red">red</font>, <font color="silver" style="background:black;">silver</font>, <font color="teal">teal</font>, <font color="white" style="background:black;">white</font>, and <font color="yellow" style="background:black;">yellow</font>.</small></p>
<hr>
<p style="font-size: 60%;"><a href="http://www.colorpicker.com/" target="_blank">Find some colors: ColorPicker</a></p>
</section>
<!-- Background color-->
<section>
<h3>Background-color</h3>
<p>The background-color property changes the color of the background.</p>
<pre><code>
p {
background-color: black;
background-color: #000000;
background-color: rgb(0,0,0);
}
</code></pre>
</section>
<!-- Pseudo-classes -->
<section>
<h3>Pseudo-classes (links)</h3>
<p>CSS pseudo-classes are used to add additional functionality to some selectors.</p>
<pre><code>
a:link { color:#FF0000; } /* unvisited link */
a:visited { color:#00FF00; } /* visited link */
a:hover { color:#FF00FF; } /* mouse over link */
a:active { color:#0000FF; } /* selected link */
</code></pre>
<p style="font-size: 60%;"><span class="tomorrow-green">Note:</span> a:hover MUST come after a:link and a:visited in order to be effective!</p>
<p style="font-size: 60%;"><span class="tomorrow-green">Note:</span> a:active MUST come after a:hover in order to be effective!</p>
<hr>
<p style="font-size: 60%;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" target="_blank">Learn more about Pseudo-Classes</a></p>
</section>
<!-- Text-Decoration -->
<section>
<h3>Text-Decoration</h3>
<p style="border: 1px solid #ccc; text-decoration: underline;">Underlined</p>
<pre><code>
text-decoration: underline;
</code></pre>
<p style="border: 1px solid #ccc; text-decoration: overline;">Overline</p>
<pre><code>
text-decoration: overline;
</code></pre>
<p style="border: 1px solid #ccc; text-decoration: line-through;">Line through your text</p>
<pre><code>
text-decoration: line-through;
</code></pre>
<p style="border: 1px solid #ccc; text-decoration: underline wavy red">Shorthand*</p>
<pre><code>
text-decoration: underline wavy red;
</code></pre>
<hr>
<p style="font-size: 60%;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" target="_blank">*Currently only supported in Firefox & Safari</a></p>
</section>
<!-- Div Element -->
<section>
<h3>Div</h3>
<p>Div is a block level element. Each new div is rendered on a new line. It has <span class="tomorrow-green">no semantic meaning</span>.
<br>Used to group elements to format them with CSS.
</p>
<pre><code>
<div>
<p>Content<p>
<p>Content<p>
</div>
</code></pre>
<pre><code>
<div id="header-group">
<header>
<h1>Main Heading<h1>
</header>
<nav>
<ul><li>Home</li></ul>
</nav>
</div>
</code></pre>
<p style="font-size: 70%;">Apply IDs and Classes to divs to control their styles with CSS.</p>
</section>
<!-- Relative & Absolute Paths -->
<section>
<h3>Relative vs. Absolute paths</h3>
<ul>
<li>
<strong class="tomorrow-blue">Relative</strong>
<ul>
<li>Relative paths change depending upon the page the link is on.
<ul>
<li style="font-size: 60%; line-height: 120%">Links within the same directory need no path information. <span class="tomorrow-blue">"filename.jpg"</span></li>
<li style="font-size: 60%; line-height: 120%">Subdirectories are listed without preceding slashes. <span class="tomorrow-blue">"images/filename.jpg"</span></li>
</ul>
</li>
</ul>
</li>
<li>
<strong class="tomorrow-blue">Absolute</strong>
<ul>
<li>Absolute paths refer to a specific location of a file, including the domain. <span class="tomorrow-blue" style="font-size: 70%; ">"http://www.girldevelopit.com/chapters/detroit"</span></li>
</li>
<li>Typically used when pointing to a link that is not within your own domain.</li>
</ul>
</li>
</ul>
</section>
<!-- HTML Inspiration -->
<section>
<h3>Website Examples</h3>
<p style="font-size: 60%;"><a href="http://keepearthquakesweird.com/" target="_blank">Keep Portland Weird: Earthquake Preparedness</a></p>
<p style="font-size: 60%;margin-top: 20px;"><a href="http://www.gitman.com/" target="_blank">Gitman Bros.</a></p>
<p style="font-size: 60%;margin-top: 20px;"><a href="http://www.joinradio.gr/" target="_blank">Join Radio</a></p>
</section>
<!-- Contact Me -->
<section>
<h3>Questions? Contact Me</h3>
<br>
<p style="font-size: 60%;margin-top: 20px;">Email: <a href="mailto:stacie@girldevelopit.com">stacie@girldevelopit.com</a></p>
<p style="font-size: 60%;margin-top: 20px;">Twitter: <a href="https://twitter.com/farmercode" target="_blank">@FarmerCode</a></p>
<p style="font-size: 60%;margin-top: 20px;"><a href="http://www.meetup.com/Girl-Develop-It-Salt-Lake-City/" target="_blank">Come to our next GDI event!</a></p>
</section>
<!-- What Next? -->
<section>
<h3>What Next?</h3>
<h4 style="color:#81a2be;">Refreshers</h4>
<p style="font-size: 60%;margin-top: 20px;"><a href="http://webdesign.tutsplus.com/tutorials/the-best-way-to-learn-html--webdesign-10144" target="_blank">Best Way to Learn HTML</a></p>
<p style="font-size: 60%;margin-top: 20px;"><a href="http://www.goodellgroup.com/tutorial/index.html" target="_blank">Learning HTML for Kids (and Adults)</a></p>
<p style="font-size: 60%;margin-top: 20px;"><a href="http://www.sitepoint.com/study-errors-beginners-make-learning-html-css/" target="_blank">Study Errors Beginners Make While Learning HTML & CSS</a></p>
<p style="font-size: 60%;margin-top: 20px;"><a href="https://www.codecademy.com/articles/glossary-html" target="_blank">Codecadmy HTML Glossary</a></p>
<hr>
<h4 style="color:#81a2be;">Test Yourself</h4>
<p style="font-size: 60%;margin-top: 20px;"><a href="https://quizlet.com/6795630/flashcards" target="_blank">HTML Flashcards</a></p>
<p style="font-size: 60%;margin-top: 20px;"><a href="http://smarterer.com/tests" target="_blank">Smarterer Tests</a></p>
<hr>
<h4 style="color:#81a2be;">Go Forth</h4>
<p style="font-size: 60%;margin-top: 20px;"><a href="http://websitesetup.org/html5-beginners-guide/" target="_blank">Learn More: HTML5 Beginner's Guide</a></p>
<p style="font-size: 60%;margin-top: 20px;"><a href="https://frontendmasters.gitbooks.io/front-end-handbook/content/index.html" target="_blank">Front-End Developer Handbook</a></p>
<p style="font-size: 60%;margin-top: 20px;"><a href="https://www.pinterest.com/gdiSLC/" target="_blank">Want More? GDI SLC Pinterest</a></p>
</section>
</div>
<footer>
<div class="copyright">
HTML101: Intro to HTML & CSS -- Girl Develop It SLC
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/accessibility-helper/js/accessibility-helper.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>