Programming the Web

• "static" means the web page is stored as a file on the web server and that file is delivered to your browser
• HTML = HyperText Markup Language
• you literally "mark up" plain text to tell the browser how to display it
• you mark up the text using tags
• most tags come in pairs: one to mark the start of the markup the other to mark the end
• To mark text as bold, use <b> to mark the beginning of the bolded text and </b> to mark the end
• For example, to produce "that is a very funny joke" you'd write
  that is a <b>very funny</b> joke
• From the browser, you can look at the current web page in its HTML form by selecting View -> Source

Static web pages are very boring! Web content is very dynamic!

• A web page can include a JavaScript program. The browser will run this program to do dynamic things like animation or interaction.

  JavaScript program to print factorials goes into web page	Output of that program
  <SCRIPT LANGUAGE="JavaScript"> document.write("<h5>Table of Factorials</h5>"); i = 1; factorial = 1; while (i < 6) {    document.write(i + "! = " + factorial + "<br>");    i = i + 1;    factorial = factorial * i; } </SCRIPT>
  <!-- This example is from the book "JavaScript: The Definitive Guide",      by David Flanagan. Copyright (c) 1996 O'Reilly & Associates. -->

• A web page can include a Java applet. Applets are more powerful than JavaScript.
• The applet is stored in compiled (binary) form on the server, then the browser runs it using the JVM (Java Virtual Machine).

  Java source program for a simple applet (compiled on server)
  import java.applet.Applet; import java.awt.*; import java.awt.event.*; public class FirstApplet extends Applet implements ActionListener {    Label lblMessage = new Label("Hello World");    Label btnGo = new Button("Click me");    public void init() {       add(lblMessage);       add(btnGo);       btnGo.addActionListener(this);    }    public void actionPerformed(ActionEvent event) {       lblMessage.setText("OUCH!");    } }
  HTML code that you put in your web page, to run the applet
  <APPLET code="FirstApplet.class" width=150 height=50> </APPLET>
  Output of the applet itself

• JavaScript and applets are called client-side because they are run by the browser after it receives the web page from the server
• There are other languages like ASP, JSP, PHP and Perl used to create dynamic web pages
• ASP, JSP, PHP, and Perl are called server-side because although the program is contained in a web page, the web server runs the program when the page is requested, before sending it to the browser!
• The Otterbein Mathematical Sciences web site is programmed using a combination of HTML and PHP.
• server-side languages are important, because they can generate a web page "on the fly" using information read from a database at the time of the request.
• The Otterbein Mathematical Sciences Alumni Directory page is an example of this. It includes a PHP program that generates the alumni table from a database when the page is requested.
• Other languages for dynamic web programming include DHTML (Dynamic HTML) and XML (eXtensible Markup Language). It is an extension of HTML.
• standards for HTML and other WWW languages and protocols are established and maintained by W3C, the World Wide Web Consortium (see www.w3c.org)

Publishing on the Web

• a software tool to produce the HTML files
• disk space on a web server to store your files with URL for Web access

Tools come in many flavors

• a simple text editor like Notepad (available in Accessories menu of Windows), where you type in the HTML
• web authoring tool like Macromedia Dreamweaver (installed in our lab) or Microsoft FrontPage, where you have the choice of typing HTML or using WYSIWYG editor
• any productivity tool that can save or export files in HTML format -- in Word or Excel or PowerPoint, do Save As, then look at the Save As Type list of formats.
• authoring tool may be provided as part of a free or paid service, or through your ISP. See blogger.com, for instance, a service where you can create and maintain a blog (weblog) without knowing HTML

There are many ways to get server disk space

• as an Otterbein student, you get the URL http://students.otterbein.edu/your-login-name
  where your-login-name is your Otterbein login name (firstname.lastname).
• you can get free server space from a number of vendors, in return for displaying their ads on your pages.
• Register with a "social networking" service such as Facebook or MySpace. (see About Facebook).
• You can purchase server space from a vendor or ISP. A URL is part of the deal. You may get a folder with access through their URL, or purchase your own domain name
• I have one of the latter, www.ushs1972.com, that I bought through GoDaddy.com.

The HTTP protocol is stateless

• stateless means that every request from browser to server is independent of every other.
• in other words, the server does not retain client information from one request to the next!
• If the server had to do this, it could not "scale up" to handle large numbers of clients at once
• Given this, how can you click through a sequence of web pages to buy something?
• the server can use cookies.
  • A cookie is a small file stored on your hard drive that is read and written by the server.
  • This is how Amazon knows who you are when you go to their website!
  • If you use someone else's computer, the server may not know who you are because it has not previously stored its cookie on the hard drive
  • You can disable cookies or be alerted of them, using browser settings (in Internet Explorer, select Tools -> Internet Options then click the Privacy tab)
• browser can append data to the end of the URL when making a request to the server
• You can see this sometimes by watching the URL for appended text that resembles "?data=value"
• Here's an example: http://eil.com/shop/artistlist.asp?artistname=norman-wisdom
• The browser then can carry information over from one request to the next and append it to every request if needed.