COGS 25 - Intro to Web Programming

This course is an introduction to several web programming languages and their real world applications. Concepts and programming languages covered include: document structure (XHTML), formal layout (CSS), interactivity (JavaScript), and structure of content (XML). Students learn how to organize and present information on the World Wide Web. No programming knowledge is presupposed, however a basic background in computing is expected.

Document Structure - XHTML

The World Wide Web is written in a language known as HyperText Markup Language (HTML). An HTML file is used by the web browser to correctly format a web page as the web designer had intended. Display of a web page is controlled by the markup tags in the HTML file, hence the “M” part of HTML. With the development of new technologies, HTML has been outdated. Hence, the evolution of the World Wide Web has caused the development of XHTML as the next level of HyperText Markup Language.

XHTML is a language for describing the structure of a document. Imagine that you are given the task of coming up with a language for describing documents. If your language is expressively adequate it must be able to describe documents so that any difference in the structure of a document can be unambiguosly stated.

Some of these structural elements are easy to generate: paragraphs, headings, images, figures, chapters, title pages, indexes. All the information about the structure of a document is interpreted by browsers as a document tree. This tree structure represents the elements of the document and is relied on by CSS and JavaScript.

Formal Layout - CSS

Cascading StyleSheets (CSS) by itself cannot produce a website, but when combined with XHTML it becomes a powerful tool that makes websites more dynamic while increasing the efficiency of the design process.

In separating out the languages used to specify the logical structure of a document (XHTML) and its appearance – its formal layout (CSS) – the designers of the WWW have modularized web programming. This is good practice. It allows designers to change the skin of entire sites.

It is alright to think of CSS as controlling the appearance or skin of webpages. But don’t underestimate how important appearance and layout is. Even for understanding. For instance, annotations and figures have to be near the content they enhance. From Gestalt psychology we have learned that what is semantically related should be visually related. It is important to establish visual lines. The beginning or the ends of text blocks should line up, and so on. You may think you know this already but it is hard to do graphic layout well. And it quickly marks the difference between adequate designers and good ones.

Interactivity - JavaScript

Using XHTML and CSS allows for creating, formating, and styling webpages. The one thing that is missing is interaction. Aside from navigating links, there is very little users can do to interact with the pages and the content. JavaScript is a scripting language that is used to add interactivity to a web page. It can be inserted into an HTML page. This means that a web page does not have to be static HTML, but with the help of JavaScript scripts it can include programs that interact with the user, control the browser, and dynamically create HTML content.

With JavaScript, you can control many aspects about the page that XHTML and CSS could not. For instance, you can control the size of the window, where the window is, or whether the window has scroll bars. JavaScript allows you to read from the user and write messages to the user. Interactivity between the user and the browser becomes an important aspect of how people view websites.

Structure of Content - XML

XML stands for eXtensible Markup Language and is a standard way to store and organize information. Unlike XHTML, with XML there are no predefined tags like <HR> or <TR>. XML, like XHTML, is a markup language, meaning that it is a way to add, organize, and tag elements of a document. XML tags are structured like XHTML tags. (ex: <monkey> </monkey> or <elephant> </elephant>). XML allows the developer to describe their information in meaningful ways. This data is context independent, meaning it can be used anywhere by just about anything, from PDAs, to speech generators.