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
Copy file name to clipboardExpand all lines: index.html
+44-73Lines changed: 44 additions & 73 deletions
Original file line number
Diff line number
Diff line change
@@ -177,7 +177,7 @@ <h2>Setting Up Our Work Flow</h2>
177
177
<sectionclass="slide">
178
178
<h2id="making-changes">Making changes</h2>
179
179
180
-
<p>Let's make a change. Replace the “your name here” content, save the file, and refresh your browser.</p>
180
+
<p>Let's make a change. Replace the “your name here” content, save the file, then refresh your browser.</p>
181
181
182
182
<p>This will be your work flow for the day.</p>
183
183
@@ -293,7 +293,7 @@ <h2>Nesting HTML tags</h2>
293
293
</section>
294
294
295
295
<sectionclass="slide">
296
-
<h2>Exercise #1 - Updating your home page (10 mins)</h2>
296
+
<h2>Exercise #1 - Updating your home page (5 mins)</h2>
297
297
298
298
<ol>
299
299
<li>In the Sublime Text editor, update your name in the <code>h1</code> tag if you haven’t already.</li>
@@ -318,20 +318,24 @@ <h2>Exercise #1 - Updating your home page (10 mins)</h2>
318
318
<sectionclass="slide project" data-markdown>
319
319
##Adding more HTML & content
320
320
321
-
All three pages have the same headings, navigation links and footer information. Though the home page header and navigation look different from the other two pages, don't worry about that just yet. Right now we are just concentrating on adding the HTML.
321
+
All three pages have the same headings, navigation links and footer information. Though the home page header and navigation *look* different from the other two pages, don't worry about that just yet. Right now we are just concentrating on adding the HTML.
322
322
323
323
324
324
It's best to write as much HTML as possible before adding CSS to ensure that the proper tags are being used and to help keep your code organized and semantic.
327
+
**Protip!** It's best to write as much HTML & content as possible before adding CSS to ensure that the proper tags are being used. This will help keep your code organized and [semantic](http://en.wikipedia.org/wiki/Semantic_HTML).
328
328
</section>
329
329
330
330
<sectionclass="slide" data-markdown>
331
331
##Navigation menu & Lists
332
332
333
+
Navigational elements are commonly created using lists.
334
+
333
335
There are two kinds of lists in HTML: ordered (`ol`) for numbered lists & unordered (`ul`) for lists with bullets. Content must be included **only within the list item** (`li`).
334
336
337
+
Since the order of the list items doesn't matter for creating nav items, an unordered list can be used.
338
+
335
339
```xml
336
340
<ul>
337
341
<li>Unordered list item</li>
@@ -344,39 +348,28 @@ <h2>Exercise #1 - Updating your home page (10 mins)</h2>
344
348
<li>Ordered list item</li>
345
349
</ol>
346
350
```
347
-
348
-
Navigational elements are commonly created using lists. Since the order of the list items doesn't matter for creating nav items, an unordered list can be used.
349
-
</section>
350
-
351
-
<sectionclass="slide" data-markdown>
352
-
##Class exercise: Add a navigation
353
-
354
-
Let's go back to **index.html** and add an unordered list, *before* `<header>`, as a navigation menu for the three pages: **Home**, **About**, **Contact**.
355
-
356
-
It should look like this:
357
-
358
-
359
351
</section>
360
352
361
353
<sectionclass="slide" data-markdown>
362
354
##Links & Attributes
363
355
364
356
The purpose for creating page navigation is to link to other pages. In addition to creating a list, we'll also need to add links to navigate between the three pages.
365
357
366
-
Links are represented by the `<a>` (anchor) tag. Unlike the tags we've looked at so far, anchor tags need additional information to specify where to link to. An **attribute** can provide additional information and is added inside the opening tag.
358
+
Links are represented by the `<a>` (anchor) tag. Unlike the tags we've looked at so far, anchor tags need additional information to specify where to link *to*. An **attribute** can provide additional information and is *added inside the opening tag*.
@@ -393,27 +386,9 @@ <h2>Exercise #1 - Updating your home page (10 mins)</h2>
393
386
<sectionclass="slide" data-markdown>
394
387
##HTML5 Sectioning Tags
395
388
396
-
Sometimes, multiple HTML elements need to be grouped together for organization and/or for styling. For example, the `header` contains multiple elements (name and tagline) as well as the navigation on the about and contact page.
397
-
398
-
Prior to HTML5, the `<div>` tag was used for grouping elements together to create page layouts. The header of the page might look something like this:
399
-
400
-
```xml
401
-
<div>
402
-
<h1>Jane Smith</h1>
403
-
<h2>Web Developer + City Girl</h2>
404
-
405
-
<div>
406
-
<ul>
407
-
<li><a href="">Home</a></li>
408
-
<li><a href="">About</a></li>
409
-
<li><a href="">Contact</a></li>
410
-
</ul>
411
-
</div>
412
-
</div>
413
-
414
-
```
389
+
Sometimes, multiple HTML elements need to be grouped together for organization and/or for styling. Prior to HTML5, the `<div>` tag was used for grouping elements. While it is still valid, HTML5 introduced a number of semantic tags that better describe blocks of content. You've already seen two of them: `<header>` and `<footer>`. We'll be using two more today: `<nav>` and `<section>`.
415
390
416
-
The `<div>` is still valid but HTML5 introduced a number of semantic tags that better describe blocks of content such as `<header>`, `<footer>`, `<nav>`, `<section>`. The above example can be changed to this:
391
+
For the navigation, adding a `<nav>` tag around the list will make it more semantic. It can also be grouped with the headings by adding it *inside* of the `<header>` tag.
417
392
418
393
```xml
419
394
<header>
@@ -422,20 +397,33 @@ <h2>Exercise #1 - Updating your home page (10 mins)</h2>
**Extra resource:** More about HTML5 here: http://html5doctor.com
408
+
</section>
409
+
410
+
<sectionclass="slide">
411
+
<h2>Class exercise: Add a navigation</h2>
412
+
413
+
<p>Let’s go back to <strong>index.html</strong> and add the navigation for the three pages: <strong>Home</strong>, <strong>About</strong>, <strong>Contact</strong>.</p>
414
+
<p>Eventually we’ll have 3 HTML pages to link to as well, <strong>index.html</strong>, <strong>about.html</strong> and <strong>contact.html</strong>. Let's also add <em>relative</em> links to these pages in the navigation list. It should look like this:</p>
<p>Anything titled “class exercise” is meant to be a type along exercise. The code is there as reference. </p>
420
+
</div>
433
421
</section>
434
422
435
423
<sectionclass="slide" data-markdown>
436
-
##Good file naming habits
424
+
##Creating HTML pages
437
425
438
-
To create an HTML page, name your file using an `.html` extension and it will open in your default browser (much like .pdf for PDF files or .doc for Word files). Before we start another exercise, let's go over some best practices.
426
+
To create an HTML page, name your file using an `.html` extension and it will open in your default browser (much like .pdf for PDF files or .doc for Word files). Here are some best practices and good file naming tips.
439
427
440
428
* Use lowercase letters.
441
429
* **about.html** instead of **About.html** or **ABOUT.html**
@@ -451,7 +439,7 @@ <h2>Exercise #1 - Updating your home page (10 mins)</h2>
451
439
</section>
452
440
453
441
<sectionclass="slide">
454
-
<h2>Exercise #2 - Adding pages and content (20mins)</h2>
442
+
<h2>Exercise #2 - Adding pages and content (10mins)</h2>
455
443
456
444
<p>We are just adding HTML content so don’t worry about how to style the page just yet. Writing code often requires a lot moving, deleting and adding content. Here are some more shortcuts that will come in handy to speed up your work flow.</p>
<li>Create an new page (cmnd/ctrl + n) and name it <strong>about.html</strong>
467
455
<ul>
468
456
<li>Save it in the same folder as <strong>index.html</strong> (project folder)</li>
469
-
<li>Be sure to include all the <ahref="/#slide14">basic HTML tags</a></li>
470
-
<li>Update the <code>title</code> tag to update the page title</li>
471
-
<li>Add the HTML5 header and nav markup referenced in <ahref="index.html#slide23">HTML5 Sectioning Tags</a></li>
472
-
<li>Add <strong>relative</strong> links to navigate between pages</li>
473
-
<li>Add the footer content created in <strong>index.html</strong></li>
457
+
<li>Copy all the contents from <strong>index.html</strong> into your new page. It's is all the same content right now.</li>
458
+
<li>Update the <code>title</code> tag to reflect the contents of the page. (e.g. Your Name | About Me )</li>
474
459
</ul>
475
460
</li>
476
461
<li>Create a new page and name it <strong>contact.html</strong>
477
462
<ul>
478
-
<li>Follow the same instructions as the About page (or just copy it and update the page title)</li>
463
+
<li>Follow the same instructions as the About page.</li>
479
464
</ul>
480
465
</li>
481
-
<li>
482
-
Add the same navigation markup and relative links to <strong>index.html</strong><em>BUT</em> since the structure and style is different, put the nav HTML <strong>above</strong> the header tag, not inside like About and Contact. The order of the HTML will matter when we add CSS to it later. Here is the code sample for reference for the home page (index.html).
<li>Test the navigation. Are all the links going to the proper page?</li>
497
467
</ol>
498
468
<p>If you get stuck, you can take a peek in the <strong>examples</strong> folder: <ahref="project/examples/exercise2-home.html">exercise2-home.html</a>, <ahref="project/examples/exercise2-about.html">exercise2-about.html</a>, <ahref="project/examples/exercise2-contact.html">exercise2-contact.html</a></p>
499
469
500
470
<divclass="presenter-notes">
501
-
<p>Check in with learners after 20mins. If majority of people have not started step 3, give them 5-10 more minutes. If they are still not done after that, let them know they'll have some time in the next exercise to finish up.</p>
471
+
<p>Check in with learners after 10mins. If majority of people have not finished, give them 5-10 more minutes. If they are still not done after that, let them know they'll have some time in the next exercise to finish up.</p>
<p>Images are an example of a void element. It doesn't need a closing tag because it <em>is</em> the content. Read more about void elements <ahref="framework/extras-void-elements.html">here</a>.</p>
521
+
<p>Images are an example of a void element/self-closing tag. It doesn't need a closing tag because it <em>is</em> the content. Read more about void elements <ahref="framework/extras-void-elements.html">here</a>.</p>
552
522
553
523
<p>Just like links, the image tag also requires an <em>attribute</em> to define the file path of the image file. However, it uses the <code>src</code> attribute (not <code>href</code>). The value can be an absolute or relative path. The below is an example of an absolute path.</p>
554
524
@@ -599,7 +569,8 @@ <h2>Adding images</h2>
599
569
<sectionclass="slide" data-markdown>
600
570
##Exercise #3 - Update the About page (15 mins)
601
571
602
-
Add some more content to your About page. If you need to reference what you page should look like before adding these updates, take a look at [exercise2-about.html](project/examples/exercise2-about.html) in the **examples** folder.
572
+
Add a profile picture, heading and some information to your About page to make it look like this:
Use the `<section>` tag to create a new sectioning block for the page content. Add it *between* the `<header>` tag and the `<footer>` like this:
605
576
@@ -622,8 +593,8 @@ <h2>Adding images</h2>
622
593
</footer>
623
594
```
624
595
625
-
1. Inside of the `section` tag, add a profile picture.
626
-
1. After the image tag, add an `h2` for the page title.
596
+
1. Inside of the `section` tag, add a profile picture using the `img` tag.
597
+
1. After your profile picture, add an `h2` for the About page title.
627
598
1. After the `h2`, add a couple of paragraphs about you, or use placeholder text.
628
599
629
600
**Bonus:** Try adding a couple links. Ask a mentor how to get a link to open in a new tab/window.
0 commit comments