You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<li><code><title></code> is nested between opening and closing <code><head></code> tags so <code><head></code> is the parent node and <code><title></code> is the child node.</li>
342
+
<li><code><title></code> is nested between opening and closing <code><head></code> tags, so <code><head></code> is the parent node and <code><title></code> is the child node.</li>
343
343
<li>Going further, <code><head></code> is also (at the same time) a child node of <code><html></code>.</li>
344
-
<li>While <code><html></code> is the always the “root” node and has <strong>no</strong> parent nodes.</li>
345
-
<li>Notice too that <code><head></code> and <code><body></code> are on the same level. They are both child nodes of <code><html></code>.</li>
344
+
<li><code><html></code> is the always the “root” node and has <strong>no</strong> parent nodes.</li>
345
+
<li>Notice that <code><head></code> and <code><body></code> are on the same level. They are both child nodes of <code><html></code>.</li>
@@ -376,7 +376,7 @@ <h2>HTML in a web browser</h2>
376
376
<!-- SLIDE: HTML -->
377
377
<articleclass='slide slide-list'>
378
378
<h2>HTML in a web browser</h2>
379
-
<p>But remember: HTML tags are like the beams of a house – they denote structure, not content.) </p>
379
+
<p>But remember: HTML tags are like the beams of a house – they denote structure, not content.</p>
380
380
<p>So if I view <ahref="exercises/barebones.html" target="_blank"><code>barebones.html</code></a> in a web browser, I don't see anything interesting yet...</p>
381
381
<divclass="reminders single-line"><p>If Chrome is not your default web browser, <strong>right-click</strong> and select the “<strong>open with...</strong>” option.</p></div>
382
382
</article>
@@ -424,13 +424,13 @@ <h2>HTML content</h2>
424
424
<!-- SLIDE: HTML -->
425
425
<articleclass='slide slide-list'>
426
426
<h2><code><head></code> vs <code><body></code></h2>
427
-
<p>Using a copy of <code>barebones.html</code>, I'm going to edit it to answer the below questions and prepare you for the following exercise you'll do on your own time.</p>
427
+
<p>I’m going to edit a copy of <code>barebones.html</code>to answer the questions below and to prepare you for the following exercise you’ll do on your own time.</p>
428
428
<ulclass="spacey_list">
429
429
<li>
430
430
What happens when I change the content in the <code><title></code> tag?
431
431
</li>
432
432
<li>
433
-
What's the difference between putting a tag in-between the <code><head></code> tag versus the <code><body></code> tag?
433
+
What’s the difference between putting a tag in-between the <code><head></code> tag versus the <code><body></code> tag?
434
434
</li>
435
435
</ul>
436
436
</article>
@@ -457,17 +457,20 @@ <h2>Exercise #1 – Simple HTML tags</h2>
457
457
<divclass="cheatsheet">
458
458
<div>
459
459
<h3>Hierarchy</h3>
460
+
<p>
460
461
<code><hl></code>, <code><h2></code>, <code><h3></code>, <code><h4></code>, <code><h5></code> and <code><h6></code> – Heading levels 1 to 6<br/>
461
462
<code><p></code> – Paragraph<br/>
463
+
</p>
462
464
</div>
463
465
<div>
464
466
<h3>Text Formatting</h3>
465
-
<code><b></code> or <code><strong></code> – Bold<br/>
466
-
<code><i></code> or <code><em></code> – Italics or emphasis<br/>
467
+
<p><code><b></code> or <code><strong></code> – Bold<br/>
468
+
<code><i></code> or <code><em></code> – Italics or emphasis<br/></p>
467
469
</div>
468
470
<div>
469
471
<h3>Section Formatting</h3>
470
-
<code><blockquote></code> – A block quote for extended quotations<br/>
472
+
<p>
473
+
<code><blockquote></code> – A block quote for extended quotations<br/></p>
471
474
</div>
472
475
</div>
473
476
<brclear="all" />
@@ -486,7 +489,7 @@ <h1>Going deeper</h1>
486
489
<articleclass='slide slide-list'>
487
490
<h2>Empty Tags</h2>
488
491
<p><spanclass="keyword">Empty tags</span> don’t format content – instead they are used to render or embed objects in our page.</p>
489
-
<p>These tags <strong>do not</strong> come in pairs of opening and closing tags like <code>h1</code> or <code>p</code> tags; instead, there is only an opening tag that “self-closes” with a back slash (<code>/</code>) immediately before the left angled bracket (<code>></code>).</p>
492
+
<p>These tags <strong>do not</strong> come in pairs of opening and closing tags like <code>h1</code> or <code>p</code> tags; instead, there is only an opening tag that “self-closes” with a back slash (<code>/</code>) immediately before the right-angled bracket (<code>></code>).</p>
<li><code>src</code> is the <em>attribute</em></li>
545
548
<li><code>http://goo.gl/7eSU5</code> is the <em>value</em> of that attribute<br/>
549
+
<<<<<<<HEAD
546
550
<spanclass="sidenote">Values are typically surrounded by <em>double quotes</em> since occasionally values may contain spaces.</span></li>
551
+
=======
552
+
<spanclass="sidenote">Values are typically surrounded by <em>double quotes</em> since values may contain spaces.</span></li>
553
+
>>>>>>> Final revisions
547
554
</ul>
548
555
<p>With an <code>img</code> tag, the value of the <code>src</code> attribute tells the browser what the <em>source</em> of our image is.</p>
549
556
</article>
@@ -659,7 +666,7 @@ <h2>Working with images <span style="font-size: 22px;">(Group exercise – P
659
666
<!-- SLIDE: HTML -->
660
667
<articleclass='slide slide-list'>
661
668
<h2>Working with images <spanstyle="font-size: 22px;">(Group exercise – Part 4)</span></h2>
662
-
<p>It’s best practice to organize your images into their own folder to keep your website's file structure tidy.</p>
669
+
<p>It’s best practice to organize your images into their own folder to keep your website’s file structure tidy.</p>
663
670
<p>Let’s <strong>move all of our images into the <code>images</code> folder</strong> of <code>2_WORKING_WITH_IMAGES</code>.</p>
664
671
<p>Uh oh! Now our image will be broken in <code>index.html</code> since the image is no longer in the same folder. Let’s fix that...</p>
665
672
</article>
@@ -688,12 +695,12 @@ <h2>Working with images <span style="font-size: 22px;">(Group exercise – P
688
695
<articleclass='slide slide-list'>
689
696
<h2>Links</h2>
690
697
<p>The <code><a></code> tag – called an <em>anchor</em> tag – is used to create a link.</p>
691
-
<p><code><a></code> tags come in pairs and the content between the opening and closing tags is what is displayed as the link text (typically underlined).</p>
698
+
<p><code><a></code> tags come in pairs, and the content between the opening and closing tags is what is displayed as the link text (typically underlined).</p>
<pclass="sidenote">But wait! This link doesn't take me anywhere!</p>
703
+
<p>But wait! This link doesn't take me anywhere!</p>
697
704
</article>
698
705
699
706
<!-- SLIDE: HTML -->
@@ -736,7 +743,7 @@ <h2>Getting ready for Exercise #3</h2>
736
743
<ol>
737
744
<li>What’s the <strong>very first line</strong> we need to type?</li>
738
745
<li>What <strong>three</strong> HTML tags should every website have?</li>
739
-
<li>What HTML tag do I need to update the browser tab with a descriptive tab name? And where does it go?</li>
746
+
<li>What HTML tag do I need to change in order to update the browser tab with a descriptive tab name? And where does it go?</li>
740
747
</ol>
741
748
<p>Here is the start of your top navigation menu.<br/><spanclass="sidenote">(Don't worry, <code><nav></code> is nothing too special but we'll use it later in CSS.)</span></p>
742
749
<pre>
@@ -754,14 +761,14 @@ <h2>Exercise #3 (now until lunch)</h2>
754
761
<p>On your own:</p>
755
762
<olclass="spacey_list">
756
763
<li>There will be two more pages: <code>about.html</code> and <code>contact.html</code>. Use the <code><a></code> tag with an <code>href</code> attribute to link all your pages together.</li>
757
-
<li>Based on <code>index.html</code>, create those 2 new files for About and Contact in the same <code>website</code>folder as<code>index.html</code>. Name these files <code>about.html</code> and <code>contact.html</code>.</li>
764
+
<li>Create two new files for About and Contact by duplicating <code>index.html</code>within the<code>website</code> folder. Name these files <code>about.html</code> and <code>contact.html</code>.</li>
758
765
<li>Make sure that all your webpages have a descriptive and unique <code><title></code>.</li>
759
766
<li>Confirm that you can click between all the pages using the navigation links. Fix them if needed.</li>
760
767
<li>Update <code>about.html</code> with a picture and bio.<br/>
761
768
<spanclass="sidenote">(You can even try adding a YouTube video based on the notes on the next slide.)</span></li>
762
769
<li>Update <code>contact.html</code> with contact info.<br/>
763
770
<spanclass="sidenote">(You can even try adding a Google Map.)</span></li>
764
-
<li><strong>Don't</strong> update <code>index.html</code> any more!<br/>
771
+
<li><strong>Don’t</strong> update <code>index.html</code> any more!<br/>
765
772
<spanclass="sidenote">We'll get to that <strong>after</strong> lunch.</span></li>
766
773
</ol>
767
774
</article>
@@ -781,7 +788,7 @@ <h2>Bonus: Add video to your webpage</h2>
781
788
<h2>HTML reference</h2>
782
789
<ulclass="spacey_list">
783
790
<li>Download a <ahref="http://woorkup.com/2009/12/16/html5-visual-cheat-sheet-reloaded/" target="_blank">cheatsheet of HTML tags</a>. (There is a copy in the <code>cheatsheets</code> folder.)</li>
784
-
<li>Try looking up individual tags using the HTML sections of <ahref="https://developer.mozilla.org/en-US/docs/HTML/Element" target="_blank">Mozilla's Developer Network</a> or the <ahref="http://www.w3.org/community/webed/wiki/HTML/Elements" target="_blank">W3C</a> for more details about attributes and tag usage.</li>
791
+
<li>Try looking up individual tags using the HTML sections of <ahref="https://developer.mozilla.org/en-US/docs/HTML/Element" target="_blank">Mozilla’s Developer Network</a> or the <ahref="http://www.w3.org/community/webed/wiki/HTML/Elements" target="_blank">W3C</a> for more details on tag usage and attributes.</li>
785
792
<li>For further exploration, use the <ahref="http://hackasaurus.org/en-US/goggles/install/" target="_blank">Hackasaurus X-Ray Goggles</a> to look at any webpage.</li>
786
793
<li>And don’t forget the “view source” option of your web browser!</li>
0 commit comments