Webmastering: Week 1

1-1      Webmastering Secrets: CGI/JAVA
 
This 8-week class covers state-of-the-art authoring
secrets to make an AWESOME Web page on the Internet!
 
Tonight is the first class in a series of eight:
 
-> Apr 18: SSI:  Add modification date & templates <-
   Apr 25: CGI:  Create/process a form & image map
   May 2:  Perl: Create a guestbook and/or BBS
   May 9:  Perl: Analyze stats for who/what/when
   May 16: Java: Getting it and using it
   May 23: Java: Animating your page
   May 30: Java: Add a search engine to your page
   June 6: Java: Games and other fun stuff!
 
Any overview questions before we dive in?

1-2       Webmastering: TONIGHT'S PLAN
 
Most of you should already be familiar with basic
HTML authoring.  This class will push your page to
the edge of technology and make it fun for visitors:
  1) Create dynamic pages using templates & dates.
  2) Let guests add content via forms to your page.
  3) Use Java animations to spice up your page.
  4) Master the basics of the Java language.
 
Tonight, we will cover Server-side includes (SSI).
These often-overlooked commands are easier than CGI
and can solve many basic dynamic page needs:
  1) Give some good online sources of authoring help.
  2) Explain dynamic versus static pages.
  3) Use #include for headers, footers, & templates.
  4) Use #echo for automatic modification dates.
  5) Conditionally show HTML based on user's browser.
  6) Use #exec for simple CGI scripting.
 
Any questions about what we will cover tonight?

1-3         Webmastering: PREREQUISITES
 
This class teaches special topics for Webmasters.
We will cover many of the fancier ways of designing
and writing pages, including SSI, CGI, and Java.
 
For this reason, we will assume you are already 
familiar with HTML programming and have basic Unix
or DOS command-line skills for your server.  If you
are looking to create your first Web page, you should
be in our Basic Web Page Creation class, not this one. 
 
If you are adventurous, you MAY take these two classes
simulataneously.  Since most of the topics here cover
CREATION of HTML, rather than the actual HTML itself,
you should be able to keep up.
 
If you need some extra help with HTML and/or Unix or
DOS issues, I will be happy to help you after class.
 
Any questions about prerequisites?

1-4       Webmastering: ONLINE SOURCES
 
Before I dive in, let me first give you some
personal recommendations of good online sources,
all are also on http://dqsoft.com/wwwauthr.shtml:
 
1) HTML Help file - Comprehensive HTML reference
   http://hjs.geol.uib.no/news/htmlib/htmlib.htm
2) Lview Pro - Easy crop/quantize/transp/interlace
   http://world.std.com/~mmedia/lviewp.html
3) Hot Dog Pro - Best HTML editor, IMHO
   http://www.sausage.com/
4) Thalia's Advanced Authoring (tips & scripts)
   http://www.sci.kun.nl/thalia/guide
5) Carlo's Form tutorial - Gentle intro w/details
   robot0.ge.uiuc.edu/~carlosp/cs317/ft.4-5.html
6) CGI Intro - Intro, archive, and tutorial
   http://hoohoo.ncsa.uiuc.edu//cgi/overview.html
7) Matt's Perl Scripts - my scripts started here
   http://www.worldwidemart.com/scripts/
 
Any questions on online sources?

1-5       Webmastering: IMAGE ADVICE
 
Before I dive into SSI/CGI, I want to make sure
you know how to properly place images on your page.
My pet peave as a surfer are authors who always
have their personal images cached and forget to:
 
1) Quantize the colors down to reduce size and
   wasting some user's 256-color palette.  Almost
   all images look fine with 32 custom colors.
   Lview Pro makes this real easy...
2) Use JPEG whenever possible (even backgrounds!)
   For photos, try reducing JPEG quality factor.
   I am amazed how small some photos can get!
3) ALWAYS use the IMG WIDTH & HEIGHT parameters.
   This way your text will come up BEFORE the
   images are loaded since the browser knows size.
   Thalia has a script to automate this.
4) Limit the # of images.  Go for quality first.
5) Limit the size of images.  Reduced images look
   really good if done right and are much smaller.
   If you must have several large images, consider
   showing thumbnails and file size info first. 
 
Ok, I am off the soapbox now, any questions?

1-6     Webmastering: DYNAMIC VS. STATIC
 
Most personal Web pages are static HTML documents.
The user asks the server for the document and the
server simply gives it to the browser for display.
 
Semi-dynamic pages are built on-demand when the user
asks for the page from the browser.  This is needed
if we want to insert variable information using SSI,
such as "Hello user from COMPUSERVE.COM" or "Page
last modified on 4/11/96".
 
Dynamic pages are also needed when the data has too
many combinations to create static pages in advance.
An example might be Web pages that described one
product out of several hundred offered.  Typically,
this information is stored in a back-end database
and is then combined into HTML on-demand using CGI.
 
Almost all larger Web sites use authoring tools that
generate all pages dynamically from a database.
 
Any questions on dynamic pages?

1-7    Webmastering: SERVER-SIDE INCLUDES
 
One of the lesser-known tricks in building Web pages
is the use of server-side includes.  These special
commands tell the Web server using a defined syntax
to insert other files or variable information before
serving the requested document back to the browser.
 
Although the exact implementation of these commands
is done by each server, the syntax is standardized
and all decent Web servers should support them.  For
syntax help, use the Windows help file I suggested
earlier, as most servers document this poorly...
 
All SSI commands look like Note that the 

1-8       Webmastering: #INCLUDE
 
One of the most useful SSI commands is the #include
statement.  It works just like it does in other 
programming languages in that it will include the
contents of one file in another.  It IS recursive.
 
Here is an example that includes a text file:
 
This little command has been tremendously useful
for me in combining my INN classes on my Web page.
Here are the actual contents of one class page:
 

Mastering Spades: Week 1

 
The 

is an undocumented, but useful, command
that tells the browser to render the text file using
a code listing font and to ignore any possible tags.
 
Warning: Some servers may require absolute names.
 
Any questions about #include before we talk about
how we can now use the #include to setup templates?

1-9       Webmastering: PAGE TEMPLATES
 
The #include statement allows us to create page 
templates without CGI.  If we want to be able to 
change the backgrounds on all of our pages quickly,
as I did when I had my pages black in protest,
we can use the #include to load a shared background
statement in a file.  All your pages could look like:
 
  

1-10          Webmastering: #echo
 
The #echo statement allows us to add user and system
specific information to our page.  There is a long
list of possibilities in the Windows Help file, but
some of the more useful are:
 
      Local date/time
   File mod date
   Local URL path
     Browser's domain
         Link of origin
            E-mail of user
 Name of browser
 
So, now you know how some pages say "Welcome user
from COMPUSERVE.COM!".  I find the LAST_MOD very
useful in a shared footer to always show the date
the page was last modified.
 
If you update your pages often, putting the date
in the footer will help browsers realize how much
effort you put in and how current your material is.
 
#echo can also be used directly after a POST from
a previous form.  In this case, the name entry for
each field now contains the user-entered value:
   
Any questions on #echo?

1-11  Webmastering: #if, #goto, #label, #break
 
The #if, #goto, and #label statements allow basic
control flow within an HTML document.  Let us say
we want to show a background unless the user has
Mosaic.  We could do this using something like:
 

1-12         Webmastering: #email
 
The #email is a virtually unknown but terribly
useful SSI statement.  It will allow you send the
results of a form somewhere using SMTP mail. Many
times this will save you some CGI scripting.
 
I highly suggest allowing users to send you email
via a form from your page.  Some users do not have
their SMTP mail setup properly in Netscape or are
operating through a firewall that hampers mail.
 
This is easy to do, just create a simple form page
with From (which you could default using the #echo
we learned earlier), Subject and Body fields.
 
Then post that form to an HTML document containing:
 
We also be implementing this using CGI next week.
Any questions on #email?

1-13         Webmastering: #exec
 
The #exec is also virtually unknown but terribly
useful SSI statement.  You can execute a shell
command and then have the results displayed in 
the HTML document.  This is also necessary if the
script requires command-line arguments which
CGI does not allow (talk about this next week).
 
For many uses this can be a quick and dirty way
of doing CGI-type stuff without the hassle.  For
example, say you wanted to make a generic page
that could be used by several users:
 
Welcome to 's page.
 
You could also write a shell-script that parsed
the Web server logs for hits and then output the
total count.  However, the user would have to 
wait, so a better solution would be to have the
script run every night using the Unix crontab
command and then #include a file with the count.
 
I am sure you can come up with some creative 
uses for #exec.  Perhaps write a real program
that did something and then display its output?
 
Any questions on #exec?

1-14    Webmastering: Other #commands
 
There are a few more SSI commands I did not cover,
and I will summarize them below:
 
<--#fsize file="test.html"-->     Show filesize
<--#flastmod file="test.html"-->  Show mod date
<--#config ... -->  Set date and cmd formats
 
There also may be non-standard ones implemented by
your server (such as #odbc to access a database).
Good luck figuring them out as they are usually not
well documented...

Keep in mind I did cover all the options allowed
for these commands.  See the Windows Help file
for details on options for each command.
 
Any questions on any of the SSI commands?

1-15        Webmastering: CONCLUSION
 
This concludes tonight's class.
 
Next week's class will start promptly at the same time.
You can mail me here at box 952 or via chrisw@dqsoft.com
for questions or help with your pages.  You will find
my page w/links and samples at http://dqsoft.com/
 
Next week, we will cover dynamic CGI programming:
  1) How CGI works on the server and client side
  2) Overview of languages you can write CGI with
  3) Introduction to Perl (portable, fast, & no compile)
  4) Defining a form in HTML
  5) Processing results of form using a Perl script
  6) Creating image maps using CGI
 
HOMEWORK: Implement at least a last modified date and
#included footer for one or all of your home pages.
 
Now we have an open question and answer session where
you can get me to debug your scripts for you...