added some examples

basic/display/Opacity.elm

@@ -0,0 +1,10 @@
+import Graphics.Element (..)
+
+main : Element
+main = let imgWidth = 600
+           imgHeight = 430
+           url = "http://placekitten.com/g/" ++
+                        toString imgWidth ++ "/" ++
+                        toString imgHeight
+        in
+           opacity 0.5 (fittedImage 200 200 url)

basic/display/Size.elm

@@ -0,0 +1,24 @@
+{-------------------------------------------------------
+  You can set the width and height of the element with
+  the following two functions:
+
+        width, height : Int -> Element -> Element
+
+  You can set both width and height at the same time
+  with this function:
+  
+          size : Int -> Int -> Element -> Element
+
+   Try them out on the car.
+-------------------------------------------------------}
+
+import Graphics.Element (..)
+
+main : Element
+main = let imgWidth = 600
+           imgHeight = 430
+           url = "http://placekitten.com/g/" ++
+                        toString imgWidth ++ "/" ++
+                        toString imgHeight
+        in
+           width 100 (image imgWidth imgHeight url)

basic/display/Text.elm

@@ -0,0 +1,13 @@
+import Graphics.Element (Element, flow, down)
+import Text (..)
+
+main : Element
+main =
+  flow down
+    [ leftAligned (bold (fromString "Bold"))
+    , leftAligned (italic (fromString "Italicize"))
+    , leftAligned (link "/" (fromString "Link"))
+    ]
+
+-- Challenge: can you rewrite this example so the code is less
+-- repetative? Try using map to factor out common patterns.

basic/display/Typeface.elm

@@ -0,0 +1,35 @@
+import Graphics.Element (..)
+import List
+import Text
+
+
+main : Element
+main = flow down sentences
+
+
+sentences : List Element
+sentences =
+    let msg = "\nThe quick brown fox jumps over the lazy dog.\n"
+        sentence tfs =
+          Text.leftAligned (Text.typeface tfs (Text.fromString msg))
+    in
+        List.map sentence
+        [ ["times new roman"]
+        , ["helvetica", "sans-serif"]
+        , ["georgia", "serif"]
+        , ["trebuchet ms", "sans-serif"]
+        , ["inconsolata", "courier new", "monospace"]
+        ]
+
+
+{-- More Information on Typefaces -----------------------------------
+
+The typeface provided is a list of possible options. Each typeface
+is tried (left-to-right) until one is found that is available on the
+client machine. You do not *need* to specify multiple typefaces, but
+it is a good idea just in case someone is missing the particular
+typeface you want.
+
+Look into the CSS font-family property to learn more.
+
+--------------------------------------------------------------------}