├── .nova └── Configuration.json ├── README.md ├── bk01ch01 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html └── styles.css ├── bk01ch04 ├── example01.html ├── example02.html ├── example03.css ├── example04.css └── example05.html ├── bk02ch01 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html └── iis-logo.png ├── bk02ch02 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example05a.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html ├── example15.html ├── example16.html ├── example17.html ├── example18.html ├── example19.html └── example20.html ├── bk02ch03 ├── audio │ ├── jabberwocky.m4a │ ├── jabberwocky.mp3 │ ├── jabberwocky.ogg │ ├── jabberwocky.wav │ └── jabberwocky.webm ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── images │ ├── bear.png │ ├── flower-and-ant.jpg │ ├── guardian-we-are-hiring.jpg │ ├── iis-logo.png │ ├── image01.jpg │ ├── image02.jpg │ ├── image03.jpg │ └── image04.jpg └── videos │ ├── bear.mp4 │ ├── bear.ogv │ └── bear.webm ├── bk02ch04 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html └── example13.html ├── bk02ch05 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html └── example09.html ├── bk02ch06 └── example01.html ├── bk03ch01 ├── example00.html ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html └── images │ └── notw.png ├── bk03ch02 ├── example00.html ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html └── images │ ├── Icon_External_Link.png │ ├── image24-thumbnail.jpg │ ├── image27-thumbnail.jpg │ └── image35-thumbnail.jpg ├── bk03ch03 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html ├── example15.html ├── example16.html ├── example17.html ├── example18.html ├── example19.html ├── example20.html ├── example21.html ├── example22.html ├── example23.html ├── example24.html ├── example25.html ├── example26.html ├── example27.html ├── example28.html ├── example29.html ├── example30.html ├── example31.html ├── example32.html ├── example33.html ├── example34.html ├── example35.html ├── example36.html └── images │ └── Icon_External_Link.png ├── bk03ch04 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── normalize.css └── notw.png ├── bk03ch05 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html └── example07.html ├── bk03ch06 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html ├── example15.html ├── example16.html ├── example17.html └── images │ ├── ant-on-a-flower.jpg │ ├── webdev-workshop-logo.png │ └── webdev-workshop.png ├── bk03ch07 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example05a.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html ├── example15.html ├── example15a.html ├── example16.html ├── example17.html ├── example18.html ├── example19.html ├── example20.html ├── example21.html └── fonts │ ├── OpenSans-VariableFont_wdth,wght.ttf │ ├── opensans-variablefont_wdthwght-webfont.woff2 │ ├── roboto-700.woff │ ├── roboto-700.woff2 │ ├── roboto-italic.woff │ ├── roboto-italic.woff2 │ ├── roboto-regular.woff │ └── roboto-regular.woff2 ├── bk03ch08 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html ├── example15.html ├── example16.html ├── example17.html ├── example18.html └── images │ ├── ant-on-a-flower.jpg │ ├── eye-roll.png │ └── please-brake-for-snakes.jpg ├── bk04ch01 ├── example01.html └── footer.js ├── bk04ch02 ├── example01.html ├── example02.html └── example03.html ├── bk04ch03 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html ├── example15.html ├── example16.html ├── example17.html ├── example18.html ├── example19.html ├── example20.html ├── example21.html ├── example22.html ├── example23.html ├── example24.html └── example25.html ├── bk04ch04 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html └── example14.html ├── bk04ch05 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html ├── example15.html ├── example16.html ├── example17.html ├── example18.html └── example19.html ├── bk04ch06 ├── example00.html ├── example01.html ├── example02.html ├── example02a.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html ├── example15.html ├── example16.html ├── example17.html ├── example18.html └── mangosteen.png ├── bk04ch07 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example04a.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example08a.html ├── example09.html ├── example09a.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html └── images │ ├── dog-1.png │ ├── dog-2.png │ ├── dog-3.png │ ├── dog-4.png │ └── dog-5.png ├── bk04ch08 ├── .DS_Store ├── example01.html ├── example01a.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html └── example13.html ├── bk04ch09 ├── example01.html ├── example02.html ├── example03.html ├── example04.html └── example05.html ├── bk04ch10 ├── example01.html ├── example02.html ├── example03.html └── example04.html ├── bk04ch11 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html ├── example15.html ├── example16.html └── example17.html ├── bk05ch01 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html ├── example15.html └── images │ ├── holloway1.jpg │ ├── holloway2.jpg │ ├── holloway3.jpg │ ├── holloway4.jpg │ ├── keep-off-the-grass.jpg │ ├── new.png │ └── notw.png ├── bk05ch02 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html ├── example15.html ├── example16.html ├── example17.html ├── example18.html ├── example19.html ├── example19a.html ├── example20.html └── example21.html ├── bk05ch03 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html ├── example11.html ├── example12.html ├── example13.html ├── example14.html ├── example15.html ├── example16.html └── example17.html ├── bk05ch04 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html └── images │ ├── facebook.png │ ├── hooli.png │ ├── img-large.jpg │ ├── img-medium.jpg │ ├── img-small.jpg │ ├── inflatable-dartboard.png │ ├── instagram.png │ ├── notw.png │ └── twitter.png ├── bk06ch01 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html └── images │ └── inflatable-dartboard.png ├── bk06ch02 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html ├── example08.html ├── example09.html ├── example10.html └── example11.html ├── bk06ch03 ├── example01.html ├── example02.html ├── example03.html ├── example04.html ├── example05.html ├── example06.html ├── example07.html └── images │ └── notw.png ├── cheatsheet └── template.html └── license.md /.nova/Configuration.json: -------------------------------------------------------------------------------- 1 | { 2 | "workspace.name" : "HTML, CSS, & JS FD Examples" 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML, CSS, and JavaScript All-in-One For Dummies 2 | ## Example Files 3 | 4 | This repository contains the example files used in the book *HTML, CSS, and JavaScript All-in-One For Dummies*. 5 | 6 | You can access the example files individually or you can get your hands on everything by following these steps: 7 | 8 | 1. Click the green Code button. 9 | 1. In the menu that appears, click Download ZIP. 10 | 1. Once the download is complete, double-click the downloaded file to unzip the files. 11 | -------------------------------------------------------------------------------- /bk01ch01/example01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Book 1, Chapter 1, Example 1 6 | 7 | 8 | This is a web page with something important to say. 9 | 10 | 11 | -------------------------------------------------------------------------------- /bk01ch01/example02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Book 1, Chapter 1, Example 2 6 | 7 | 8 | This is a web page with something important to say. 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /bk01ch01/example03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | My Home Sweet Home Page 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /bk01ch01/example04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | My Home Sweet Home Page 6 | 7 | 8 | Hello HTML World! 9 | 10 | 11 | -------------------------------------------------------------------------------- /bk01ch01/example05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Plain <h1> Tag 6 | 7 | 8 |

Hello CSS World!

9 | 10 | 11 | -------------------------------------------------------------------------------- /bk01ch01/example06.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Styled <h1> Tag 6 | 16 | 17 | 18 |

Hello CSS World!

19 | 20 | -------------------------------------------------------------------------------- /bk01ch01/example07.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Inline Styles 6 | 7 | 8 |

The Big Cheese

9 |

Just How Big Is This Cheese?

10 |

And Why Cheese, Of All Things?

11 | 12 | -------------------------------------------------------------------------------- /bk01ch01/example08.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Internal Styles 6 | 21 | 22 | 23 |

solid adj. having no break or interruption

24 |

dotty adj. 1. crazy or eccentric.

25 |

dotty adj. 2. feeble or unsteady.

26 |

dotty adj. 3. enthusiastic.

27 | 28 | -------------------------------------------------------------------------------- /bk01ch01/example09.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Book 1, Chapter 1, Example 0 6 | 7 | 8 |

This Heading Will Appear Blue

9 |

This text will be displayed in a 24-pixel font.

10 | 11 | 12 | -------------------------------------------------------------------------------- /bk01ch01/example10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Displaying a Message to the User 6 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /bk01ch01/example11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Writing Data to the Page 6 | 7 | 8 | This is a regular line of text.
9 | 12 |
This is another line of regular text. 13 | 14 | 15 | -------------------------------------------------------------------------------- /bk01ch01/styles.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: blue; 3 | } 4 | p { 5 | font-size: 24px; 6 | } -------------------------------------------------------------------------------- /bk01ch04/example01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Book 1, Chapter 4, Example 1 6 | 7 | 8 | I hope everything checks out! 9 | 10 | 11 | -------------------------------------------------------------------------------- /bk01ch04/example02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | I hope everything checks out! 8 | 9 | 10 | -------------------------------------------------------------------------------- /bk01ch04/example03.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: blue; 3 | } 4 | p { 5 | font-size: 24px; 6 | } -------------------------------------------------------------------------------- /bk01ch04/example04.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color blue; 3 | } 4 | p { 5 | fontsize: 24px; 6 | } -------------------------------------------------------------------------------- /bk01ch04/example05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Displaying a Message to the User 6 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /bk02ch01/example03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 3: Headings 6 | 7 | 8 |

This is Heading 1

9 |

This is Heading 2

10 |

This is Heading 3

11 |

This is Heading 4

12 |
This is Heading 5
13 |
This is Heading 6
14 | 15 | -------------------------------------------------------------------------------- /bk02ch01/example05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 5: Limerick with Paragraphs 6 | 7 | 8 |

There once was woman named Elle, 9 |

Who learned tons of HTML. 10 |

Then she came to an ode 11 |

That she just couldn’t code, 12 |

Now she lives in a white padded cell. 13 | 14 | -------------------------------------------------------------------------------- /bk02ch01/example06.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 6: Limerick with Line Breaks 6 | 7 | 8 |

9 | There once was woman named Elle,
10 | Who learned tons of HTML.
11 | Then she came to an ode
12 | That she just couldn’t code,
13 | Now she lives in a white padded cell. 14 | 15 | -------------------------------------------------------------------------------- /bk02ch01/example07.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 7: The <hr> Tag 6 | 7 | 8 |

9 | For these kinds of thematic breaks, HTML offers the hr element. The name is short for horizontal rule and the element does just what it says: it draws a horizontal rule (that’s a line to the likes of you and me) clear across the page. The result? A nice, clean visual indication that the next paragraph is in some way a break from the previous one. Figure 1-7 offers an example where I’ve placed an <hr> tag between this paragraph and the next one. 10 |

11 |
12 |

13 | Now it’s time to take these page-structure ramblings to the next level with an in-depth look at HTML’s so-called semantic page elements. Once you’ve mastered the tags I cover in the next section, you’ll know everything you need to know to build pages with good digital bones. 14 |

15 | 16 | -------------------------------------------------------------------------------- /bk02ch01/example08.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 8: The <header> Tag 6 | 7 | 8 |
9 | Isn't it Semantic? company logo 10 |

Welcome to “Isn’t it Semantic?”

11 |
12 |
13 | 14 | -------------------------------------------------------------------------------- /bk02ch01/example09.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 9: The <nav> Tag 6 | 7 | 8 |
9 | Isn't it Semantic? company logo 10 |

Welcome to “Isn’t it Semantic?”

11 |
12 |
13 | 19 | 20 | -------------------------------------------------------------------------------- /bk02ch01/example10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 10: The <div> Tag 6 | 13 | 14 | 15 |
16 | Requisite social media links: 17 |
18 |
19 | Facebook 20 | Twitter 21 | Instagram 22 | Hooli 23 |
24 | 25 | -------------------------------------------------------------------------------- /bk02ch01/example11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 11: The <span> Tag 6 | 12 | 13 | 14 |

15 | Notice how an inline element flows right along with the rest of the text. 16 |

17 | 18 | -------------------------------------------------------------------------------- /bk02ch01/iis-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulmcfe/html-css-js-fd/bd68c1825e1f69cf71e121a96585da3b2625fa83/bk02ch01/iis-logo.png -------------------------------------------------------------------------------- /bk02ch02/example01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 1: The <em> Tag 6 | 12 | 13 | 14 |

15 | You'll never fit in there with that ridiculous thing on your head! 16 |

17 | 18 | -------------------------------------------------------------------------------- /bk02ch02/example02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 2: The <strong> Tag 6 | 13 | 14 | 15 |

16 | Dear reader: Do you see the red button in the upper-right corner of this page? Never click the red button! You have been warned. 17 |

18 | 19 | -------------------------------------------------------------------------------- /bk02ch02/example03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 3: Nesting Tags 6 | 13 | 14 | 15 |

16 | Dear reader: Do you see the red button in the upper-right corner of this page? Never, I repeat never, click the red button! You have been warned. 17 |

18 | 19 | -------------------------------------------------------------------------------- /bk02ch02/example04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 4: The <blockquote> Tag 6 | 13 | 14 | 15 |

16 | Here's what the great jurist Oliver Wendell Holmes, Sr. had to say about puns: 17 |

18 | A pun does not commonly justify a blow in return. 19 | But if a blow were given for such cause, and death 20 | ensued, the jury would be judges both of the facts 21 | and of the pun, and might, if the latter were of an 22 | aggravated character, return a verdict of justifiable 23 | homicide. 24 |
25 | Clearly, the dude was not a pun fan. 26 |

27 | 28 | -------------------------------------------------------------------------------- /bk02ch02/example05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 5: The <q> Tag 6 | 13 | 14 | 15 |

16 | Whether you love or hate people who pun, you can't argue with Ron Wolfe, who said that A punster is someone who shticks by his word. 17 |

18 | 19 | -------------------------------------------------------------------------------- /bk02ch02/example05a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 5a: The <q> tag with the cite attribute 6 | 13 | 14 | 15 |

16 | The WHATWG says that using the q element is optional and that using explicit quotation punctuation without q elements is just as correct. 17 |

18 | 19 | -------------------------------------------------------------------------------- /bk02ch02/example06.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 6: The <a> Tag 6 | 13 | 14 | 15 |

16 | To play with HTML and CSS, check out the Web Dev Workbench! 17 |

18 | 19 | -------------------------------------------------------------------------------- /bk02ch02/example07.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 7: Bulleted Lists 6 | 13 | 14 | 15 |

My All-Time Favorite Oxymorons

16 | 28 | 29 | -------------------------------------------------------------------------------- /bk02ch02/example08.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 8: Numbered Lists 6 | 13 | 14 | 15 |

My Ten Favorite U.S. College Nicknames

16 |
    17 |
  1. U.C. Santa Cruz Banana Slugs
    2. 18 |
  2. Delta State Fighting Okra
    3. 19 |
  3. Kent State Golden Flashes
    4. 20 |
  4. Evergreen State College Geoducks
    5. 21 |
  5. New Mexico Tech Pygmies
    6. 22 |
  6. South Carolina Fighting Gamecocks
    7. 23 |
  7. Southern Illinois Salukis
    8. 24 |
  8. Whittier Poets
    9. 25 |
  9. Western Illinois Leathernecks
    10. 26 |
  10. Delaware Fightin’ Blue Hens
    11. 27 |
28 | 29 | -------------------------------------------------------------------------------- /bk02ch02/example09.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 9: The <abbr> Tag 6 | 13 | 14 | 15 |

16 | What happens to upwardly-mobile couples who have children and then one spouse stops working to raise the kids? Why, their life becomes a SITCOM, of course. 17 | 18 | -------------------------------------------------------------------------------- /bk02ch02/example10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 10: The <address> Tag 6 | 13 | 14 | 15 |

16 | Having a problem? Please "contact us" here: 17 |

18 |
19 | The Complaints Department
20 | 0 Black Hole Blvd, Suite -23
21 | Nowheresville, BC N0N 0N0 22 |
23 | 24 | -------------------------------------------------------------------------------- /bk02ch02/example11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 11: The <cite> Tag 6 | 13 | 14 | 15 |

16 | The HTML specs published by the WHAT Working Group are notoriously dry, fussy, and judge-sober. However, every now and then some wag sneaks in a bit of humor: 17 |

18 |
19 | A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names. 20 |
21 |

22 | Source: The cite element, published by WHATWG. 23 |

24 | 25 | -------------------------------------------------------------------------------- /bk02ch02/example12.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 12: The <code> Tag 6 | 13 | 14 | 15 |

16 | Way back in 1994, someone at Netscape (one of the original web browsers) had the not-so-bright idea that text that blinked on and off would be a good thing. Thus the <blink> tag — the most reviled tag of all time — was born. 17 |

18 | 19 | -------------------------------------------------------------------------------- /bk02ch02/example13.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 13: The <dfn> Tag 6 | 13 | 14 | 15 |

16 | The defining instance of a term is the usage of 17 | the term that’s immediately followed by the term’s 18 | definition. 19 |

20 | 21 | -------------------------------------------------------------------------------- /bk02ch02/example14.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 14: The <dl> Tag 6 | 13 | 14 | 15 |

Some Insults Worth Hurling

16 |
17 |
disingenuflect
18 |
To act in a servile or worshipful manner insincerely or hypocritically.
19 |
dudefussing
20 |
Making numerous small, needless adjustments as a pretense of effort, particularly by a man.
21 |
escalefter
22 |
A person who stands on the left side of a busy escalator, thus blocking those who would walk up or down.
23 |
nerdsplaining
24 |
Explaining in an overly intellectual, obsessively detailed way, particularly when the topic is obscure or highly technical.
25 |
omnishambles
26 |
A situation or person that is a mess in every possible way.
27 |
28 | 29 | -------------------------------------------------------------------------------- /bk02ch02/example15.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 15: The <kbd> Tag 6 | 13 | 14 | 15 |

16 | To abort the countdown and prevent detonation, press Esc. 17 |

18 |

19 | Alternatively, you can restart the countdown by pressing Ctrl+R. 20 |

21 | 22 | -------------------------------------------------------------------------------- /bk02ch02/example16.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 16: The <mark> Tag 6 | 13 | 14 | 15 |
16 | If words, as Samuel Johnson said, are the 'dress' of rational thought, a good vocabulary is the Wonderbra of intellect. —Hilary Bower 17 |
18 |
19 | Language is not just the spoken and written word, it is also the currency of conscious thought. What one cannot put into words is hard to even think about. —Nicholas Wade 20 |
21 | 22 | -------------------------------------------------------------------------------- /bk02ch02/example17.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 17: The <pre> Tag 6 | 13 | 14 | 15 | 
16 | <style>
17 |     h1 {
18 |         border-width: 2px;
19 |         border-style: solid;
20 |         border-color: black;
21 |     }
22 |     h2 {
23 |         border-width: 2px;
24 |         border-style: dotted;
25 |         border-color: black;
26 |     }
27 | </style>
28 |
29 | 30 | -------------------------------------------------------------------------------- /bk02ch02/example18.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 18: The <s> Tag 6 | 13 | 14 | 15 |

Who Needs Tickets?

16 |
17 |

The Brazil Nutcracker

18 |

19 | All performances: $950 per ticket 20 |

21 |

22 | SOLD OUT! 23 |

24 |
25 |

Sleeping Pill Beauty

26 |

27 | All performances: $15,000 per ticket 28 |

29 |

30 | Now $9.99! 31 |

32 |
33 | 34 | -------------------------------------------------------------------------------- /bk02ch02/example19.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 19: The <sub> Tag 6 | 13 | 14 | 15 |

16 | Feeling up today? Perhaps your brain is taking a dopamine (C8H11NO2) bath. 17 |

18 | 19 | -------------------------------------------------------------------------------- /bk02ch03/audio/jabberwocky.m4a: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulmcfe/html-css-js-fd/bd68c1825e1f69cf71e121a96585da3b2625fa83/bk02ch03/audio/jabberwocky.m4a -------------------------------------------------------------------------------- /bk02ch03/audio/jabberwocky.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulmcfe/html-css-js-fd/bd68c1825e1f69cf71e121a96585da3b2625fa83/bk02ch03/audio/jabberwocky.mp3 -------------------------------------------------------------------------------- /bk02ch03/audio/jabberwocky.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulmcfe/html-css-js-fd/bd68c1825e1f69cf71e121a96585da3b2625fa83/bk02ch03/audio/jabberwocky.ogg -------------------------------------------------------------------------------- /bk02ch03/audio/jabberwocky.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulmcfe/html-css-js-fd/bd68c1825e1f69cf71e121a96585da3b2625fa83/bk02ch03/audio/jabberwocky.wav -------------------------------------------------------------------------------- /bk02ch03/audio/jabberwocky.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulmcfe/html-css-js-fd/bd68c1825e1f69cf71e121a96585da3b2625fa83/bk02ch03/audio/jabberwocky.webm -------------------------------------------------------------------------------- /bk02ch03/example01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 1: The <img> Tag 6 | 13 | 14 | 15 | To see a World in a Grain of Sand
16 | And a Heaven in a Wild Flower
17 | —William Blake
18 | Macro photo showing an ant exploring a flower 19 | 20 | -------------------------------------------------------------------------------- /bk02ch03/example03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 3: The <img> Tag as a Link 6 | 7 | 8 |
9 | Isn't it Semantic? company logo 10 |

Welcome to “Isn’t it Semantic?”

11 |
12 |
13 | 19 | 20 | -------------------------------------------------------------------------------- /bk02ch03/example04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 4: Aligning Images Vertically 6 | 7 | 18 | 19 |
20 | Baseline 21 |
22 |
23 | Bottom 24 |
25 |
26 | Middle 27 |
28 |
29 | Top 30 |
31 | 32 | -------------------------------------------------------------------------------- /bk02ch03/example05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 5: The <video> Tag 6 | 7 | 13 | 14 |