Post CSS lesson changes and JS graphics lesson

Reactions/7.textile

@@ -0,0 +1 @@
+My original plan was to revise the first CSS lesson for a few minutes and then go on to talk about Cascading and introduce manymore properties.  But the revision exercise, of setting up an external stylesheet tool most of the lesson to get donw with the 7 people who turned up.  Those who finished it relatively quickly seemed happy to add images and experiment with fonts and colors while I helped the others, so this lesson is now amended to concentrate just on external style sheets and the process of having two documents open (in notepad) saving them and refreshing the browser.  Short cut key strokes were new to them, so I did a little section on that and I had to explain about active applications.

lessons/1 - Introduction to the web.textile

@@ -0,0 +1,52 @@
+h1. Introduction and History
+
+h2. What is the web?
+
+In the beginning (which was not long ago) was the internet – a bunch of computers linked together mostly so that universities and academic institutions could share their research.  They used various protocols.  What is a protocol?  Informal speech, hands up in class, formal meetings, file transfers.
+
+One of the academic institutions was CERN, in Switzerland, which you may have heard of because they smash atoms together very fast (maybe even faster than the speed of light).  "Tim Berners-Lee":http://www.facebook.com/profile.php?id=100000424716576 "(homepage here)":http://www.w3.org/People/Berners-Lee/, one of the people who worked at CERN, had an idea to make sharing information easier which he proposed in 1989.  This became the World Wide Web and the first site went public 6th August 1991 and the web was born.
+
+h2. Structure - HTML
+
+The content or structure of web pages is written in a language called HTML – Hyper Text Markup Language.
+One of the first web pages: "http://www.w3.org/History/19921103-hypertext/hypertext/WWW/Link.html":http://www.w3.org/History/19921103-hypertext/hypertext/WWW/Link.html
+Let's look at that page and the look at the source.
+
+h2. What is a browser?
+
+Define it: A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web
+
+The web started to gain popularity in 1993 when the first popular browser, Mosaic, was written in an American university by a team led by "Marc Andreessen":http://www.facebook.com/pages/Marc-Andreessen/109250945767519.  Mosaic was popular because it allowed graphics to be shown in web pages. 
+
+Examples of modern browsers – desktops, mobiles, games devices, TVs etc
+
+Mosaic (which soon changed it's name to Netscape) pushed along the development of the internet in the early 90s, and was to a large extent responsible for introducing the two languages that, along with HTML, you need to know about to understand the web.
+
+h2. Presentation - CSS
+
+As the web grew, people wanted to make the content prettier and various browsers did various things to make that easier, but people realised that a standard needed to be developed so that all web pages could work with all browsers.  The language that was decided on was called CSS (which stands for Cascading Style Sheets) and it was published in December 1996.  Browsers did not have good support for it until 2000.
+
+h2. Behaviour - Javascript
+
+As well as wanting to make their pages prettier, people wanted to make them do things.  Sometimes simple things like making their pages change content when a button was pressed, and sometimes   really complicated things like Google calendar.  They invented a language called JavaScript (or JS).
+
+Mosaic (sort of) lives on today, in the form of the Firefox browser.  
+
+h2. Practice looking at served source
+
+Look at some web pages look at the served source using Ctrl-U.
+
+Computers are stupid, but very fast.  Look at some big sites like Facebook.  Look at Club Penguin/Moshi Monsters.  What is that about?  Most of what browsers are doing is quite simple (when know a bit of HTML, CSS and JS) but they do it super quick.
+
+h2. Separation of Concerns
+
+Structure, Presentation and Behaviour
+Look at a few websites and identify what is likely to be HTML, CSS and JS.
+
+For example:
+"http://en.wikipedia.org/wiki/School":http://en.wikipedia.org/wiki/School
+"http://blogger.com":http://blogger.com
+
+Optional homework:Have a read of "Tim Berners-Lee's Answers for Young People":http://www.w3.org/People/Berners-Lee/Kids.html (miss out the section entitled "I'm interested in Math -- what exciting stuff is there we don't do at school?" which is quite advanced, unless you are super interested.
+
+

lessons/10 - HTML tables.textile

@@ -0,0 +1,24 @@
+h2. Tables 
+
+In the last HTML we saw that we can use a list (ordered or unordered) for our wish-list project.  Tables are used to list things that have the same properties.  In our case we could have a table that had a column with an image of the present, a column describing why we wanted it and a column with the approximate price.
+
+Tables use the @<table>@ element.  Every row needs a table row element - @<tr>@, and every *cell* within the row needs a table data element @<td>@.  It is very common to use a border attribute with your table element such as @border="1"@.
+
+There is a lot that you can do with tables such as have cells spanning columns, headings etc (see the relevant section of "W3Schools":http://www.w3schools.com/html for more detail) but one thing you should never do is use tables to lay out html content that is not a list of similar data elements - that is the job of CSS.
+<pre>
+<code><table border="1">
+    <tr>
+      <td>row 1, cell 1</td>
+      <td>row 1, cell 2</td></tr>
+    <tr>
+      <td>row 2, cell 1</td>
+      <td>row 2, cell 2</td></tr></table>
+</code></pre>
+
+h4. Practical
+
+* Create a 2 column, 3 row table using the presents from the previous section, with the second column being an approximate price.
+* See what the table looks like without borders, and with different border values.
+* If you have time, find out at "W3Schools":http://www.w3schools.com/html/html_tables.asp how to add a header to your table and do so.
+
+

lessons/11 - More CSS properties.textile

@@ -0,0 +1,53 @@
+
+h2. Inheriting, Merging and Cascading
+
+A browser builds up the property values for a selector as follows:
+
+* Start with the browser built-in styling for the selector.  If it is not defined for the selector then start with the styling for the selector that this selector inherits from (body is the lowest level).
+* Process the style sheets in the order in which they appear in the head.  If a new declaration matches your selector, merge it in.  If it clashes with an existing declaration, override the old one (cascading).
+* Process the inline style in the same manner.
+
+h4. Practical
+
+* In your external stylesheet set the background-color to black for the p selector
+* Create an internal stylesheet that sets color to white for the p selector.  Refresh the browser - you should see white text on a black background, as the properties have been merged.
+* In your HTML file set up an inline style for a p element that sets the color to yellow.  Refresh the browser - you should see yellow text on a black background, as it has 'cascaded' on to of the white.
+* In your HTML file modify your inline style so that is says <p style="color:yellow; color:aqua">.  Refresh the browser - you should see aqua text on a black background, as the aqua was the last value to be read, and it has 'cascaded' on top of the yellow.
+
+h2. Backgrounds - styling with pictures
+
+Last week we learnt about the HTML @<img>@ tag, which can be used to put a picture on the screen.  Remember though that we want our HTML documents only to contain content, not style, so if we want a picture _just_ for prettiness, then we don't want it in our HTML.  We _would_ use the @<img>@ tag if the picture was part of the content of the document, such as a picture of a present on your wish list in the project, but if we just wanted a fancy background for our page we would use the @background-image@ paoperty.
+
+h4. Practical
+
+* Add the line @body { background-image : url(http://goo.gl/WqRGY) ; }@ to your stylesheet and refresh the browser
+* Add the declaration @background-repeat : no-repeat@ and refresh again.  Notice that the actual picture is very small and the browser "tiles" it by default.
+
+h2. Class and ID
+
+Last week we looked at adding these attributes could be used with an HTML tag - now we will see how we can make use of this.  You create a CSS selector for a class by prefixing the class name with a dot (.) which you will often see called 'period' in documentation as that is how americans say it.  You create a selector for an ID by prefixing the ID name with a hash (#) which the americans sometimes call a pound sign (I have no idea why).
+
+h4. Practical
+
+* Add two more paragraphs to your document, one with class "bold" and one with id "italic" 
+* Add some CSS to make the paragraph with the bold class appear bold
+* Add some CSS to make the paragraph with the id italic appear (yes, you guessed it) italic
+
+h2. Link States
+
+Have you noticed how links sometimes change their appearance when you put your mouse over them or when you have visited them?  You can do this with the pseudo classes 
+* :link - an unvisited link
+* :visited - a visited link
+* :hover - an element when you mouse over it
+* :active - an element in clicked state
+If you specify styles for more than one they must be in that order).
+
+h4. Practical
+
+Add a link to your favoutite website and style the link so that it appears with an orange background when it has been visited 
+
+h2. So how powerful is CSS?
+
+There is a famous site on the internet called "www.csszengarden.com":http://www.csszengarden.com/ which contains an HTML file that is displayed with many different CSS files.  Have a look at some examples, examine the CSS and see what properties you recognise.
+
+You can learn more about CSS at "w3schools":http://www.w3schools.com/css

lessons/2 - HTML intro.textile

@@ -0,0 +1,72 @@
+h1. Structure and Content
+
+h2. Our first HTML file
+
+h4. Demonstration:
+
+* Open notepad
+* Write hello world with no tags
+* Save as hello.html
+* Open in Chrome
+* Right click and Inspect Element
+
+h4. Lessons:
+
+* (Some) browsers are forgiving
+* Structure of well formed HTML document - HTML, Head, Body
+
+h4. Practical:
+
+* Do it yourself
+* If you finish quickly - add some more content and have a play at adding some of the tags we saw last week, h1, title 
+
+h2. Experimenting with jsfiddle.net
+
+If we use the website "jsfiddle.net":http://www.jsfiddle.net then we get two big advantages: 
+* We get to see what we are working on at the same time as the HTML
+* We get syntax highlighting
+
+h4. Demonstration:
+
+* Type in a heading and some body
+* Do Ctrl-Enter - notice that there are no default styles
+* Untick the "Normalised CSS" checkbox and do Ctrl-Enter
+
+h4. Practical
+
+* Repeat the demonstration, and have a play in jsfiddle
+
+h2. Some common elements
+
+@<title>@ - the browser title, remember, not something that appears in the body.  Head elements cannot be used in jsfiddle.net.
+@<h1>@...@<h6>@ - headings.  1 is the biggest, 6 the smallest
+
+h2. Presentational elements (old and bad!) and semantic equivalents (new and good)
+
+@<br>@ (use @<p>@ instead).  Here the old element doesn't add meaning to the content - it adds meaning to the empty gaps between content, which is nonsense.
+@<b>@ and @<i>@ should not be used for presentation (as we will be using CSS for that - starting next week).  Elements should be about meaning, not presentation.  Presentation can then be decided depending on the medium - a reader for blind people for instance, cannot read in bold, but can add stress to words.
+
+Related semantic markup elements from HTML5:
+* @<i>@ text in an “alternate voice,” such as foreign words, technical terms and typographically italicized text 
+* @<b>@ “stylistically offset” text, such as keywords and typographically emboldened text
+* @<em>@  for stress emphasis, i.e., something you’d pronounce differently
+* @<strong>@  for strong importance
+
+Another new element is @<mark>@ which marks the text, like you were highlighting it.
+
+h2. Some new elements (and their old equivalents)
+
+@<article>@ (used to be @<div>@) - a passage of text (and perhaps other content) that makes sense on its own
+@<section>@ (used to be @<div>@) - a passage of text belongs with another section to make complete sense
+@<header>@ (used to be @<div>@) - a the top section
+@<footer>@ (used to be @<div>@) - a bottom section
+
+h2. Preview of next HTML lesson (4 lessons time)
+
+To display a picture on your page you use an @<img>@ element.  This is a singleton element - it has no closing tag (the slash appears at the end of the only tag).  All the information is contained in _attributes_ in the first tag.  For example:
+@<img src="http://www.placekitten.com/200/300" />@
+*src* is short for _source_ - where the picture comes from.  
+
+h2. Want to learn some more?
+
+"w3schools.com":http://www.w3schools.com/ is a free website where you can learn about HTML and many other web related languages.

lessons/3 - Simple CSS.textile

@@ -0,0 +1,85 @@
+h1. Making things prettier
+
+This lesson we are going to start making our content a bit prettier.  We do that using a language called CSS - which stands for Cascading Style Sheet.
+
+h2. Colours
+
+h4. Demonstration
+
+In "jsfiddle.net":http://www.jsfiddle.net enter the following:
+* HTML: @<h1>My heading</h1><p>Here is some body text blah blah.</p>@
+* CSS: @h1 {color: red;} p {color: green;}@
+
+h4. Practical
+* Do the demonstration yourself.  Note that the American spelling of colour is used - *color*.
+* Play with the colours a bit.  The 17 standard colours are aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.  A complete list, with samples, can be found at "www.w3schools.com/cssref/css_colornames.asp":http://www.w3schools.com/cssref/css_colornames.asp.
+* Play with the normalize css checkbox.  Think about what is happening.
+
+Colours can be expressed in other ways, such as three numbers between 0 and 255, representing how much Red, Green and Blue there is in the colour.  For example @color: rgb(242,150,9)@ is a kind of orangey brown.  You will also see @color: #f29609@ which is the same three numbers expressed in base 16, one after the other.  The "ColorPicker.com":www.colorpicker.com site is a good place to learn about colours and which colours work well together.
+
+h2. The syntax of CSS
+
+A CSS stylesheet is made up of one or more *rules*.
+Each rule contains a *selector* (@p@ for example) which tells the browsers which bit of content to apply the style to, and a *declaration group* which specifies the style to be applied.
+A declaration group sits in curly brackets or braces @{}@ and consists of one or more *declarations* such as @color:green;@.
+A declaration is formed of a *property* (such as @color@), a colon @:@, a *value* (such as @green@) and a semi-colon @;@.
+"White space" (spaces, tabs and line endings) don't matter.
+
+There are two common ways to lay out CSS:
+# Concise - one line per rule
+This is best for production sites, since there is slightly less data to be transferred (because you are saving on the white-space)
+@h1{color:red;}@
+@p{color:green;}@
+# Verbose - one line per declaration
+Easier to work on, particularly when working with others.
+@h1 {@
+  @color: red;@
+@}@
+@p {@
+  @color: green;@
+@}@
+
+Unlike with HTML, where the browser doesn't mind the odd missing closing tag etc, CSS has to be _exact_: a missing colon or a mis-placed curly bracket will stop things working.
+
+h2. Background colour
+
+The next property we will use is @background-color@ - it uses the same values as color.
+
+h4. Practical
+
+* Give your heading a background colour
+* If you have time, use "ColorPicker.com":http://www.colorpicker.com to suggest a nice colour scheme.
+
+h2. Some more properties - Fonts
+
+There are several properties that affect the font and typeface.  We will look at a couple for now - *font-style* and *font-weight*.  The values for font-style are *normal* and *italic*.  The values for font-weight are *normal*, *bold*, *bolder*, *lighter*.  Find out more about fonts at "w3schools":http://www.w3schools.com/css/css_font.asp
+
+h4. Practical
+
+Experiment with font weights and styles.
+
+h2. Aligning your text
+
+*text-align* is a very useful property that sets the alignment of text.  Values are *center* (note the american spelling), *left*, *right* and *justify*.
+
+h4. Practical
+
+Experiment with alignment - you will need quite a lot of text (three lines or more) to see what *justify* means, but it should come out looking like a newspaper or magazine column.
+
+h2. Internal Stylesheets and Browser Inspection Tools
+
+h4. Demonstration
+
+* In jsfiddle make sure Normalized CSS is enabled
+* Using the browser _Inspect Element_ or equivalent, find the iframe where jsfiddle constructs the page.
+* Point out external style sheet 
+@<link rel="stylesheet" type="text/css" href="/css/normalize.css">@
+* Point out internal style sheet 
+@<style type="text/css">@
+@p {color: red}@
+@</style>@
+
+h4. Practical
+
+* Repeat the demonstration and locate the two types of CSS in the iframe
+* Uncheck the normalized css and refresh.  Where is the @<link rel="stylesheet" type="text/css" href="/css/normalize.css">@ gone?