Introduction __________________________ The Web and Web Programming

1
Introduction __________________________The Web
and Web Programming

2

Basic Ideas of the Web

• Certain machines on the internet have direct
  access to (usually on their disks) a large number
  of documents of varying formats but with
  content others are interested in. Call these web
  server machines. Document formats are identified
  by file name suffixes like file.doc or
  file.html
• Goal is to allow users on remote computers across
  an internet to see these documents displayed
  according to their format.
• To accomplish User program on users remote host
  becomes a client of a web server must contact
  the web server
• User program has to somehow identify which web
  server machine it wants to get to and which
  document on that machine it wants.
• Then it has to set up a connection to that
  machine, ask for the document and wait till the
  server machine sends it back a copy
• Then the users program must display the document
  according to its appropriate format.
• Users application program that does all this is
  called a web browser

3
Web Browser-Server Model
Web Server Disk Storage Document resides here
3. Web Server retrieves Web Page from disk storage
Web Server Machine
Web Server Application
Internet (WWW)
2. Client Requests Web Page from Server (GET
request)
HTTP Spoken Here
4. Server downloads web page to client as body
part of reply to GET
Client Machine
Client Browser
Web Page
5. Browser visually renders document User sees
it!
1. User on client machine inputs request to see
document (web page) with a GIVEN URL
4
Web Document Content and Formatting

• We will be interested in the creation of
  documents to be served up on the web
• We will focus on the content and formatting of
  these documents
• We will use HyperText Markup Language to
  accomplish the content structuring and formatting
  of these documents.
• We will explore the differences between content
  structure and presentation of a document.
• We will learn to use programming concepts to
  provide dynamic behaviors for these documents we
  create
• Allowing changing appearance and user interaction
• Expanding this, we will put elements into these
  documents to interact with server programs and
  databases, etc.

5
Document Format and Browsers

• There are many different formats of documents on
  the Internet
• But there is one common universal format that all
  browsers can read and render this is the
  text-based hypertext markup language
• HTML is written to an open standard specification
  so document writers know how to create
  documents in it, and browser writers know how to
  interpret and render it
• HTML written in SGML, a broader markup language
• Extensible Markup Language (XML) has come on the
  scene to allow simpler creation of markup
  languages to structure document content.
• HTML has been re-written completely in XML,
  adhering to XML rules, and it is called XHTML.
  We will write in XHTML
• HTML uses combination of markup tags and
  attributes to structure document content and lay
  it out for rendering
• Files structured with HTML have the suffix .html
  or .htm
• Example HTML http//clem.mscd.edu/evansell/WEBPR
  OG/FTPclients.html See its source

6
Ancestry
SGML
HTML
XML
XHTML
7
Separation of Content versus Presentation

• HTML originally mixed everything up together
  both stuff to structure data and information used
  for rendering appearance
• Most current HTML files reflect this mix
• But HTML and XML have been moving in the
  direction of separating these creating
• Markup tags for document content structuring
  (content)
• Style sheets for rendering layout (presentation)
• HTML 4.0 and beyond and XHTML have rich support
  for this separation with improved markup and rich
  style sheet capabilities

8
Dynamic Pages and Scripting

• HTML 4.0 added elements allowing the creation of
  dynamic web pages ability of a web page to
  change on rendered and to respond to user inputs
• XHTML supports all these
• Scripting to idea of putting programming
  elements into web pages. Browser equipped with
  an interpreter to run scripts (simple programs)
  embedded in a web page
• Scripts written in some language like JavaScript
  (or a generalization of it) or VBScript

9
Web Pages on the Web Server

• You can create HTML pages anywhere, like just as
  files on your own computer, and you can view them
  with a browser
• But for others to see your HTML pages across the
  Internet, your pages need to exist on a web
  server somewhere
• In this class, you are required to use some web
  server, to have your own web page on that server,
  and to have your class homework assignments
  accessible on that web page.
• You need to tell me the URL of your web page.
• Here at Metro we have a web server clem.mscd.edu
• Each of you should have an account on that server
  and an activated Unix login on clem.mscd.edu
• clem.mscd.edu uses the Apache web server and has
  a simple scheme where each login-user can set up
  a web page on their disk space on clem.
• Go to your login home directory and set up a
  directory public_html.
• Then when you put a file test.html in your
  public_html directory, then you can access it
  with a browser using the URL
• http//clem.mscd.edu/yourloginname/test.html

10
Getting Web Pages to the Server

• There are various tools to get documents uploaded
  to web server
• The most common is the ftp tool that exists in
  most DOS command windows
• You can use this simple command line tool to put
  files up on a server (in a given directory) or
  get a file from the server, or see the contents
  of a directory on the server
• clem.mscd.edu is a Unix machine
• Useful interactive commands
• ls (ls .html, etc.), pwd, cd
• help, put, get, quit
• An example interactive ftp session is at
  http//clem.mscd.edu/evansell/WEBPROG/commandline
  ftp.html
• To get a GUI oriented FTP client, see
  http//clem.mscd.edu/evansell/WEBPROG/FTPclients.
  html

11
Comments on File Types Image Issues

• File types usually indicated by file name suffix
  (.html, .htm, .doc, .xls, .pl, .cpp, .gif, .jpg)
• HTML files are text oriented most others have
  their own unique binary encoding.
• In this class we will work mostly with HTML
  files. But most browsers can pull in plugins to
  be able to render many different file types
• All browsers can render image files.
• Image files in binary coded format not text
  oriented like HTML.
• Common Image file binary formats all use
  compression to save in file
• Graphical Interchange Format (gif) 256 colors
  all mapped to these (dithering), loses some 3D
  richness, loses no quality in compression
• Joint Photographic Experts Group format (jpg)
  better 3D and color complexity, loses quality in
  compression
• Portable Network Graphics (PNG) combines the
  better elements of the above two. Solves
  transparency problems with alpha-value (making
  image transparent against any background).
• Interlacing or Progressive Encoding in
  rendering, image appears gradually from rough
  image preview to improved image

12
Colors in HTML

• Some colors in HTML can be referenced by name
  red, blue, etc. Your textbooks Appendix E gives
  a list of named colors, both the standard set
  (page 1330) and the extended set whose
  support varies by browser.
• The only officially supported named W3C colors
  are at http//www.w3.org/TR/REC-html40/types.htm
  lh-6.5
• Also the Microsoft-supported colors are
  graphically seen at
• http//msdn.microsoft.com/library/default.asp?url
  /workshop/author/dhtml/reference/colors/colors.asp
  
• But the most reliable way to specify colors is by
  providing a RGB number color specified as
  mix of amounts of red, green, and blue (always in
  that order). The three numbers are given as pairs
  of hex digits that can each take on any value
  from 00 up to FF. These three hex pairs are
  preceded by a sign
• Examples all red is FF0000, all blue is
  0000FF, all green 00FF00, white FFFFFF, black
  000000, a light blue BBBBFF. Try your own
  mixes!
• Some more examples at http//www.utexas.edu/learn/
  html/colors.html

13
Getting Started Activities

• Determine the web server you will use for this
  class. Determine what facility you will use to
  upload files to it.
• Set up a web page on some web server you can
  use a simple format that says your name and
  announces that it is your web page.
• Send me email telling me the URL of your web
  page.
• Your web page will have links to HTML files for
  each of our homework assignments.