Projects > E-Learning


COGS 25 - Intro to Web Programming

  Keywords: Cognitive Science 25, Elearning, Web Programming, XHTML, HTML, CSS, JavaScript, XML, Document Structure, Formal Layout, Interactivity, Structure of Content, Interactive Excercise  

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.

Interactive Exercises allow each student to individually solve fun projects that incorporates the material. In class polls also provide opportunities for the students and the professor to make sure the class is moving at the proper pace.


Course Website

Browse the COGS 25 course website.

Visit Course Website


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.



The result of a stricter format allows for XHTML to be easily converted over to XML.


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.



Maybe if you had a week you could fix all the font tags on all of the 93 pages you designed, but definitely not in half an hour!




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.




Add interactivity to your website using JavaScript by using message prompts, rollovers, and capturing input and output through forms.




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.



XML allows the developer to describe information in meaningful ways. This information is context independent, meaning it can be used anywhere by just about anything, from PDAs to speech generators.


  Project Team  
David Kirsh
(202) 623-3624
Office: CSB173
Justin Kodama
(858) 455-0965
Shailendra Rao
(858) 455-0965
Andy Guerrero
(858) 822-2475
Office: CSB 206B
Gregory Elliott
Joseph Dang
Shibani Kapoor
Meghana Rao