This page is formatted in a plain simple data and HTML layout. (tags & tables)
Students may submit external CSS files for formatting and decoration.

The elements are: 
div 
	#buttons
	.section
		#firststeps
		#design
		#css
		#scripts
		#cgi
		#xml
		#tools
		#links

Consider these factors when making a web site

Work from a design

CSS - Cascading Style Sheets

The styles apply to both HTML and user-defined elements. There is also simple functionality such as sensing mouse hover events. Unfortunately, CSS is not uniformly implemented in all browsers. MSIE, for example, does not comply closely with web-standards so the CSS that MSIE will support is limited. Nevertheless, you can still use CSS to enhance and layout your web sites.

body {
	background: black url(../images/bg_SaturnTitan.jpg) 0 0 no-repeat fixed;  
	background-position:center 0px;
	text-align:center;
}
.center {
	position:relative; display:block; 	
	margin:0px auto; padding:0px;
	margin:auto auto;
	width:700px;
	text-align:left;
	vertical-align:middle;
}
#attention { display:none; }
#menu  { display:none; }
#buttons { position:fixed; display:inline;
		width:100px; left:4px; top:40px;
		border:4px groove gray;
		margin-bottom:6px; padding:3px;
}
#buttons input {display:block; width:100px; }
#sensehover {text-decoration:underline;}
#sensehover:hover {text-decoration:none; color:#9999ff;}

Javascript

JavaScript is a small programming language that provides functionality for web pages. It makes HTML into "Dynamic HTML" - DHTML. It works with the HTTP Document Object Model - the DOM. JavaScript is object oriented and case sensitive. Javascript (which is from Netscape) is not related to Java (from Sun Microsystems). The similarity in names was simply due to uncoordinated advertising campaigns by people who were strung out on caffeine.

XML - "eXtensible Markup Language"

Here is an example of an XML document.
The tags have descriptive names, so it is easier to make a program to sort them out. 
< p-language >
   < p-lang-num >45< /p-lang-num >
   < p-lang-name >XML< /p-lang-name >
   < description >
	
      < whatisit >
         XML is based upon SGML- the prototype MarkupLanguage.
         It is used primarily in the transfer or re-use of data.
      < /whatisit >
		
      < whyuseit >
          with XML, you can make your own tags.
          a program can then access each piece of data distinctly
          and interpret the data according to the tag labels.
          programs can easily use xml as a data exchange format.
          this can reduce the amount of programming needed to 
          interpret data in transference, processing and display.
      < /whyuseit >
		
      < howtouseit >
          XML can be formatted with XSL & CSS.
      < /howtouseit >
		
   < /description >                                                                                  
< /p-language >
Here are some links to understand the usage and potential of XML.
W3 Org O'Reilly W3Schools XML Org XML Apache Org Mulberry

Web Applications

Web applications allow users to work with browsers. Making your program into a web application means that anyone with a browser can use your program, regardless of which operating system or machine they have. Most often used as programs on the server that process incoming data from web site visitors. For example: CGI programs often accept a click on a page as a request for data, access a data file or database engine and return a page with the requested information which is up to date. CGI enables the programmers to prepare a database instead of updating each and every page with the new information. This makes presentation of large amounts of data and many different kinds of data possible.

CGI - Common Gateway Interface

There are dozens of languages usable for Web CGI applications.

  • Perl
  • PHP
  • Python
  • Ruby

WSGI - Web Server Gateway Interface

There are many frameworks working towards a new definition of the web.

  • Smalltalk Seaside
  • PHP Horde
  • Ruby Rails
  • Perl Maypole
  • Apache Cocoon
  • Python Dhango

CGI Examples:

www.astrofaces.com This button displays a page generated by Perl from a research site that uses CGI programs:

Here is a more detailed request of the same site. Select a dot ("radio button") then click the button.
Aries
Taurus
Gemini
Cancer
Leo
Virgo

New York movie - Click to view

Tools, Ancillary Software

Free Open Source IDE WEB Editors

  • BlueFish
  • NVU
  • Quanta
  • Screem
  • Komposer
  • Xoops

Commercial IDE Web Editors

  • Dreamweaver MX
  • Adobe GoLive"
  • Apple Quark
  • Microsoft Front Page

Graphics

  • Adobe Photoshop
  • The GIMP
  • Corel Draw & PaintShop Pro
  • Xara

Web Application Languages & Frameworks

  • Perl
  • PHP
  • Python
  • Ruby
  • Python CherryPy
  • Morfik
  • Smalltalk Seaside
  • Vista Smalltalk

You'll want to test your pages in several browsers.

  • Firefox - All platforms, Linux, Windows, Apple. open source, highly compliant with web standards. Firefox is the top of the line in quality and reliability. W3Schools reports that Firefox currently (4/2007) constitutes about 30% of the browsers in use accessing their site and the percentage is increasing monthly. They estimate that the general population's usage of Firefox is lower, although also slowly increasing.
  • MSIE - MS Windows & Mac OSX. MSIE is not open source and has not tried to keep pace with web standards. It is susceptible to virus and worms. The W3Schools browser usage of MSIE is about 60% of all browsers and is decreasing monthly
  • Safari - Apple (W3Schools browser usage - about 3%) Safari is reported to be a robust browser
  • Opera - All platforms (W3Schools browser usage - approximately 2%) Opera is not open source, partially web standard compliant and has mixed reviews
  • Konqueror - Linux (W3Schools browser usage - about 1%) Open source, partially web standard compliant
  • ...and dozens of others, many open source with various degrees of web standard compliance
Small Begonia - click for larger view
Patio Pots - click for larger view