Add chapter pictures for chapters 12 to 21 and the introduction

Author: marijnh

00_intro.md

@@ -11,6 +11,8 @@ portion devoted to logic, order, rule, and clarity.
 
 quote}}
 
+{{figure {url: "img/chapter_picture_00.jpg", alt: "Picture of a screwdriver and a circuit board", chapter: "framed"}}}
+
 This is a book about instructing ((computer))s. Computers are about as
 common as screwdrivers today, but they are quite a bit more complex,
 and making them do what you want them to do isn't always easy.

12_language.md

@@ -11,6 +11,8 @@ quote}}
 
 {{index "Abelson, Hal", "Sussman, Gerald", SICP, "project chapter"}}
 
+{{figure {url: "img/chapter_picture_12.jpg", alt: "Picture of an egg with smaller eggs inside", chapter: "framed"}}}
+
 Building your own ((programming language)) is surprisingly easy (as
 long as you do not aim too high) and very enlightening.
 

13_browser.md

@@ -11,6 +11,8 @@ quote}}
 
 {{index "Berners-Lee, Tim", "World Wide Web", HTTP, [JavaScript, "history of"], "World Wide Web"}}
 
+{{figure {url: "img/chapter_picture_13.jpg", alt: "Picture of a telephone switchboard", chapter: "framed"}}}
+
 The next chapters of this book will talk about web browsers. Without
 web ((browser))s, there would be no JavaScript. Or even if there were,
 no one would ever have paid any attention to it.

14_dom.md

@@ -8,6 +8,8 @@ have known—before you started.
 
 quote}}
 
+{{figure {url: "img/chapter_picture_14.jpg", alt: "Picture of a tree with letters and scripts hanging from its branches", chapter: "framed"}}}
+
 {{index drawing, parsing}}
 
 When you open a web page in your browser, the browser retrieves the

15_event.md

@@ -9,6 +9,8 @@ quote}}
 
 {{index stoicism, "Marcus Aurelius", input, timeline, "control flow"}}
 
+{{figure {url: "img/chapter_picture_15.jpg", alt: "Picture a Rube Goldberg machine", chapter: "framed"}}}
+
 Some programs work with direct user input, such as mouse and keyboard
 actions. That kind of input isn't available as neatly organized data
 structure—it comes in piece by piece, in real time, and the program is

16_game.md

@@ -10,6 +10,8 @@ quote}}
 
 {{index "Banks, Ian", "project chapter", simulation}}
 
+{{figure {url: "img/chapter_picture_16.jpg", alt: "Picture of a game character jumping over lava", chapter: "framed"}}}
+
 Much of my initial fascination with computers, like that of many nerdy
 kids, had to do with computer ((game))s. I was drawn into the tiny
 simulated ((world))s that I could manipulate and in which stories

17_canvas.md

@@ -8,7 +8,11 @@ Drawing is deception.
 
 quote}}
 
-{{index "Escher, M.C.", CSS, "transform (CSS)"}}
+{{index "Escher, M.C."}}
+
+{{figure {url: "img/chapter_picture_17.jpg", alt: "Picture of a robot arm drawing on paper", chapter: "framed"}}}
+
+{{index CSS, "transform (CSS)"}}
 
 Browsers give us several ways to display ((graphics)). The simplest
 way is to use styles to position and color regular ((DOM)) elements.

18_http.md

@@ -11,6 +11,10 @@ context on the server.
 
 quote}}
 
+{{index "Fielding, Roy"}}
+
+{{figure {url: "img/chapter_picture_18.jpg", alt: "Picture of a web form on a medieval scroll", chapter: "framed"}}}
+
 The _Hypertext Transfer Protocol_, already mentioned in [Chapter
 ?](browser#web), is the mechanism through which data is requested and
 provided on the ((World Wide Web)). This chapter describes the

19_paint.md

@@ -12,6 +12,8 @@ quote}}
 
 {{index "Miro, Joan", "drawing program example", "project chapter"}}
 
+{{figure {url: "img/chapter_picture_19.jpg", alt: "Picture of a tiled mosaic", chapter: "framed"}}}
+
 The material from the previous chapters gives you all the elements you
 need to build a basic ((web application)). In this chapter, we will do
 just that.

20_node.md

@@ -12,7 +12,11 @@ beautiful huts.'
 
 quote}}
 
-{{index "command line", "Yuan-Ma", "Book of Programming"}}
+{{index "Yuan-Ma", "Book of Programming"}}
+
+{{figure {url: "img/chapter_picture_20.jpg", alt: "Picture of a telephone pole", chapter: "framed"}}}
+
+{{index "command line"}}
 
 So far, we have used the JavaScript language in a single environment:
 the browser. This chapter and the [next one](skillsharing) will

21_skillsharing.md

@@ -10,6 +10,8 @@ quote}}
 
 {{index "skill-sharing project", meetup, "project chapter"}}
 
+{{figure {url: "img/chapter_picture_21.jpg", alt: "Picture of two unicycles", chapter: "framed"}}}
+
 A _((skill-sharing))_ meeting is an event where people with a shared
 interest come together and give small, informal presentations about
 things they know. At a ((gardening)) skill-sharing meeting, someone