More exercises.

Author: adetaylor

README.md

@@ -27,10 +27,9 @@ below.
 ## Part Two: Building a browser
 
 * [docs/exercise2a.md](Exercise 2a): Add support for italic text in the browser.
-* Exercise 2b: Add support for `h1` or `font color` or similar.
-* Exercise 2c: Add word wrap in the browser. (TBD - might be too hard)
-* Exercise 2d: Add scrolling in the browser. (TBD - might be too hard)
-* Exercise 2e: Invent your own HTML tag. Add it to the browser and to some
+* [docs/exercise2b.md](Exercise 2b): Add support for `h1` or `font color` or similar.
+* [docs/exercise2c.md](Exercise 2c): Add word wrap in the browser. (HARD!)
+* [docs/exercise2d.md](Exercise 2d): Invent your own HTML tag. Add it to the browser and to some
   HTML pages in the server. See how it works end-to-end.
 
 ## Part Three: Encryption

docs/exercise2a.md

@@ -0,0 +1,7 @@
+# Exercise 2a
+
+Make the browser support _italic_ text whenever it comes across the
+HTML tags `<i>` or `<em>`. (`em` means "emphasis" and sometimes websites
+use that rather than `i` for italic.)
+
+Check it works using a web page you create.

docs/exercise2b.md

@@ -0,0 +1,20 @@
+# Exercise 2b: Add support for other tags
+
+Do some [research on standard HTML tags](https://www.w3schools.com/tags/), and add support for another one of your choice.
+
+* (Hopefully) easy choices: anything that just alters the appearance of the text, e.g. `h1`-`h6`, `font color`.
+* Medium choices: change the title bar of the browser window when it finds a `title` tag. (Hint: this will
+  probably involve adding another function to the `Browser` class which you'll call from the `Renderer` class).
+* Very hard choice: add support for `img src` which will include pictures on the page.
+  This will likely take several hours even if you're a Python wizard. You'd need to do this:
+  1. Get an absolute URI to the image (see the existing code in `link_clicked` which does the same)
+  2. Download the image file using [`requests`](https://pypi.org/project/requests/), perhaps into a
+     [`NamedTemporaryFile`](https://docs.python.org/3/library/tempfile.html#tempfile.NamedTemporaryFile)
+  3. Use `create_image` on the `canvas` to draw it.
+* Another very hard choice: the `blink` tag. This will require you to set a timer to re-draw the page
+  periodically.
+* Impossible choice: anything to do with page layout. Don't attempt to support tables, frames or anything
+  fancy like that. It would take hundreds of hours - it's all very complicated. Don't even try.
+
+Good choices might be h1-h6 or `font color`.
+

docs/exercise2c.md

@@ -0,0 +1,15 @@
+# Exercise 2c: word wrap!
+
+You might notice that the browser doesn't have word wrap.
+How would you do that?
+
+Hints:
+* This will all be inside the `Renderer` class.
+* In `handle_data`
+* Do it _approximately_ first
+* Right now, it receives all the text inside each HTML tag in one go, for
+  example `<p>All this text arrives in one call to that function</p>`
+* Maybe you can split that into words and draw one word at a time?
+* We already measure how wide the text was. Perhaps you can use that to
+  decide when to start a new line?
+* But you already drew too much text, right? Maybe `canvas.delete` helps!

docs/exercise2d.md

@@ -0,0 +1,3 @@
+# Exercise 2d: invent your own!
+
+Make up your own HTML tag! Do it at both the browser and server side.