The Web Programming track will cover basic dynamic website creation using FLOSS technologies.

This page is an initial syllabus for the intro class. Later we'll amend it to make it more a general reference. The initial class planned will be about 3 hours long and cover the following: These notes are divided into Client-side and Server side sections. Experience so far has shown it's too much stuff for one class (for new folks anyway.)

Introduction[edit]

Who am I?[edit]

Instructor, introduce thyself!

Name, rank, serial number... I mean email address, IRC handle, any other info you think is relevant.

Introduce FGS, what we do, pitch for donations?

Other (and therefore better) resources[edit]

References:

World Wide Web Consortium(W3C)
[http:whatwg.org Web Hypertext Application Group (WHATWG)]

Questions Answered:

StackExchange

Tutorials:

Ctrl-U is your friend! Hit Ctrl-u on any web page (or choose View Source from your browser's menus) to see the source code of any web page in your browser.

Client side web programming[edit]

Things you will need[edit]

For the client side[edit]

A computer with a web browser and a text editor (NOT a word processor.)
That's really all.

Optional: Version control, access to the internet for looking up references.

Client-side references[edit]

http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc

DOM

HTML

CSS

Javascript

Your first Web page[edit]

It can be as simple as this:

Fire up your text editor of choice.
Enter the text that follows this list.
Save as [something].html - for example, "hello.html"

 <!DOCTYPE html>
 <html>
   <head />
   <body>
     <h1>Hello World!</h1>
   </body>
 </html>

Now open your Web browser and point it at your file. You can type its path into your address bar:

file:///home/user/hello.html

Or you can drag-and-drop the file's icon from your file manager into the browser.

That's a pretty basic web page, and it doesn't do much. Actually, it doesn't do anything. Before making it do stuff, let's talk about structure.

DOM[edit]

Your HTML is a template for a Document Object. In programming (Object Oriented Programming) an *object* is an instance of a *class*- for example, a particular document is an instance of the general class of documents. This class is described by the Document Object Model.

When the browser loads your HTML file, it takes the information in it and builds a document object out of it. This object is a tree-like structure, like a file system. Instead of file names and file contents, the document object contains the tags and the text inside the tags- along with other things. Instead of 'files', these key-value sets are called 'nodes'.

So, the "Hello World" text in the example might have a DOM path something like:

document.html.body.h1.InnerHTML

DOM is API[edit]

The Document Object Model is an Application Programming Interface. That means it's a way for a programming language to manipulate parts of the document.

For example, if you wanted to use Javascript to change the text in the example above, you could use

var displayedText = document.getElementsByTagBame("h1").InnerHTML;
displayedText = "This is only a text";

Except that you couldn't, because Javascript is pants. getElementsByTagName returns an array, so InnerHTML would be 'undefined'. Should have used an ID!

HTML[edit]

DOCTYPE[edit]

Elements and attributes[edit]

In HTML, elements are the combination of a tag and its contents (including other tags). Elements can also have *attributes* which are defined as follows:

Hello World!

Here "id" and "class" are both attributes of h1.

Structuring data[edit]

CSS[edit]

Linking stylesheets[edit]

Selectors and Properties[edit]

Scope[edit]

ECMAScript[edit]

Including scripts[edit]

Inline
with <link>
with <script>
in <head>
in body
on events

Scope[edit]

How To[edit]

Objects & classes
Variables & types
Conditionals
Loops
Exceptions