As your teacher, my objectives for you this semester are:


+The ability to handle content well, to make it accessible and support its meaning and purpose
+An appreciation of how to best structure assets and code to create well optimized sites
+A clear understanding of how HTML, CSS and Javascript all work together to create wonderful user experiences
+Mastery of semantic HTML
+A solid grounding in modern CSS
+An appreciation of ECMA scripting languages in general, and Javascript in particular, and of their shared syntax
+Strategies for designing across browsers, platforms and devices
+An appreciation of well-written code — I want you to become a code snob
+An understanding of basic programming concepts like variables, conditionals, loops, and functions
+The ability to write and debug your own code


The Web is really a set of accepted rules for sending, addressing, and formatting data. It is built on top of the Internet and, unlike the Internet, it allows information to persist. It is the combination of URL, HTTP, and HTML that make the Web possible.

The Web is built along the spine of the Internet. It is the brainchild of Sir Tim Berners-Lee. It is defined by the use of:

-HTTP, Hypertext Transfer Protocol: This protocol permits networking and is the foundation of communications on the Web.
-FTP, File Transfer Protocol: The standard network protocol that allows the transfer of files from a client machine to a server.
-URL, Uniform Resource Location: Originally known as URI, Uniform Resource Identifier, this is the address of a particular resource.


The < i m g > tag was introduced by the Mosaic browser in 1994. It was so popular that it was later included in the specifications for HTML 2.0. People were hungry for more media and richer Web experiences.


The specifications is the approved description of the language. The specifications are maintained by the W3C, the World Wide Web Consortium. As it describes itself, "The World Wide Web Consortium (W3C) is an international community that develops standards to ensure the long-term growth of the Web." At the end of the day, the Web works because the major players agree to follow the rules pretty much the same way. Browser manufacturers work to implement the standards as laid out by the W3C.


The next big advance in HTML came with the introduction of XHTML, which is HTML written to follow the rules of XML. XML and HTML are sibling languages -- HTML is a subset of XML. XML, as a stricter language with stricter rules, has its advantages. It forced web authors to all code the same. XHTML emerged around 1999, about the same time that browser support for CSS began to improve. Also emerging were cell phones and a need for the mobile web.


By 2002, browser development had stagnated.... If you are interested in learning more, you can read the specification here: HTML5.


The focus of this class is client side coding. In this course we are writing in different languages: HTML, CSS and Javascript. Writing clean code is not difficult, but it does require precision and you need to know what you are doing. The style in which you write is not nearly as important as consistency.

You need to watch spelling, capitalization, punctuation -- everything counts. Here is a short list of the rules that will improve your code and avoid embarrassing errors:

Rules for File & Folder Names:
Begin all names with either a lowercase letter or an underscore ("_"). Do not use numbers to start names -- I know it's tempting, but it will cause problems.
Limit yourself to letters, numbers and underscores.
Avoid capital letters in file and folder names. Older servers may break them and your page will fail.
Avoid special characters like ?, #, $, etc. Browsers use these characters to pass information to the servers and they will break your names. For instance, the question mark ("?") is used in URLs to attach the name and value of a variable to the URL. When you do a Google search, your query is attached at the end of the search URL by a question mark. The parameters are separated by ampersands ("&".) That's how Google figures out what to search for. In ECMA scripting languages, these characters have special meanings as well. Javascript, PHP and ActionScript are all examples of ECMA scripting languages. Special characters will break your code.

Don't use spaces in your file or folder names -- it's bad Web form and your names will break. Other web developers will laugh at you behind your back. It will bring shame on your family. Your kids will be embarrassed to go to school. If you need to separate two words, use an underscore "_" or possibly a hyphen, "-".

General Rules for Coding:
When referring to external files, always use the proper file extension. Otherwise, the poor browser will have to guess how to handle your file. You may not like the results! When interpreting files, browsers will ignore white space. This means you can use line breaks, tab and multiple spaces to make your code easier to read. Make liberal use of this gift. Indent to show nesting. Use line breaks to visually "chunk" your code into related parts. Comment your code liberally. The browser will ignore the comment. Commenting your code helps you understand and document your choices and decisions. You will be glad you did (and will also make all the other folks who have to support or update your files happy).



//this is a single line of comment in Javascript only

/* this is a multiple line comment. It work great in both CSS and Javascript! It is the only form of comment that CSS understands. I can write a novel in this comment.
*/
Special Rules for CSS and Javascript: Be mindful of case sensitivity. "mydog" is not the same as "MyDog", or "myDog" or "MYDOG". As far as Javascript and CSS are concerned these are all different names. Best practice is to use lowercase letters. If there is more than one word, you may capitalize the second word or use an underscore (_) to make your name more readable. Choose names that reflect what they refer to. For instance, if you are writing a Javascript function that swaps out images, good name choices might include "swapImage" or "imageSwap" -- "vodkaMartini" would not be a good choice. When your boss asks you update your code six months later, you will be able to understand what you meant.

Rules for HTML:
HTML was designed to be flexible. There are multiple styles for writing HTML. For the purposes of these demonstrations, we will prefer and use a strict style based on XML. We believe that the added rigor clarifies the code and reduces sloppy errors. Just know that there are other ways to code. Here is a list of the conventions that we will use in this class:


-Use lowercase for all tag names and attributes.
-Quote all attribute values.
-Indent nested tags to show the document structure.
-Close all tags, even the stand-alone tags. There are two styles for closing tags:

< script src = " js /scripts.js " > < / script >

-OR-
< img src = " myimage.jpg " />
Don't worry if this feels like a blur now. You will see lots of examples and get plenty of experience writing this kind of code for yourself! you can keep coming back and re-read this!

Backing Up Your Files
Time is expensive and memory is cheap. Never rely on any one single computer or device -- have back up. External hard drives and thumb drives are both cheap. As you work on your demonstrations and assignments for this class, make copies frequently. Store them on an external drive or a thumb drive. If your computer should fail or one of your drives goes bad, you'll be glad you did. It's not uncommon for hardware to fail!


Alternatively you could investigate back-up services in the cloud like Dropbox (free), Carbonite or Sugarsync.


You will need the following tools (options for each category follow below, so scroll on down. remember this page is in reverse chronological order.):

+A good text editor that supports code tinting (textWrangler or BBedit are linked below)

+A development browser and browser add-ons to inspect your code (links below. http headers, firebug, etc)

+An FTP client for transferring your assignments to your server

+An image editor to make and compress your graphics (photoshop, imageReady, fireworks included with Tuition)