4.560 Guide to setting up your class web page
write requests to: takehiko@mit.edu

original : 95.10.21
last revised : 05.10.28 by TN (student project path changed)


This tutorial explains the basics of HTML scripts. You may use any text editor and directly make an HTML file for your web page, or you may use software such as DreamWeaver, Netscape Composer, or Flash to design a page through graphics interface and let software build a corresponding HTML file.

How Can I Get Started?

How Does a Simple HTML File Look?

Where can I find more information?

What are my classmates doing? What did 4560/4203 students in the past do?


1. What file should I make first?

Make an HTML file for your home page.
In your account, this file should be made in your "www" directory in your Athena account 
(www directory is a default space that the public can see).
If you are using PC's in the studios and the PC classroom, here is the file you need to make to start with. For the link from our class home page to work properly,
the file should be named index.html and must be placed in a subdirectory named 4560. H:www\4560\index.html If you are using an Athena UNIX workstation, $home/www/4560/index.html Since HTML file is just a text file, you may use any text editor program to make and change it. I list some programs below. Try typing some text in a text editor, save the file to the above location, and look at your page in a browser such as Internet Explorer or Netscape. (Read the next section for how.) When you change the contents of the HTML file, make sure you save the HTML file and then reload the page to make it updated. Use the "reload" button in a browser to do so. (If the content still does not get updated correctly, try holding the shift or control key while clicking the "reload" button.) 1) Text editors on studio PC's You can use any text editor, but make sure to save your file as H:www\4560\index.html and save it in plain text format. A simplest text editor you can find on any studio PC is NOTEPAD, which can read and write a text file. Start>All Programs>Accessories>Notepad You can also use Microsoft Word, but when you save a file, choose plain text format, not Word format. After saving your HTML document in a file named "index.html", check the filename in the Windows desktop. When you use these PC applications (such as Notepad and Word) and save a text file, it may automatically add .txt suffix to the filename. If this happens, change the suffix to .html in the desktop. Once you got the idea of this html file, URL, and browser, it is usually a good idea to use a web design software such as DreamWeaver on studio PC's to design HTML pages through graphic interfaces rather than directly typing up an HTML document. Its tutorial is found in the on-line help of the software itself. For advanced users, there are software such as Flash. In any program, make sure to save your HTML file into the appropriate directory. 2) Text editors on Athena UNIX machine To make a HTML file on a Athena Unix machine, do this in xterm window. mkdir $home/www/4560 cd $home/www/4560 Then you can use any text editor program such as jot, xedit, emacs, vi, etc. to make your home page in HTML format. I recommend either jot (SGI only) or xedit (any Athena machine) for beginners. jot index.html & (recommended for SGI workstations) xedit index.html & (recommended for Sparc5 workstations)

2. How can I look at my home page in Internet Explorer or Netscape? What about file's permission?
All studio PC's and Macs have one of these browsers.
To start Netscape navigator in a Athena UNIX machine, type below in xterm

  add infoagents
  netscape &

or use the dashmenu under Communications.

In short, to see your home page in a browser, specify the following URL
in the "Address" or "Location"  box.
 
  http://web.mit.edu/your_account_name/www/4560/index.html 

There is also links set up from  this 4.560 home page. 

In this "List of Current Projects" page, your name is linked to your home page. 
(Try clicking your name there.)

If you get an error message like this:

  "Your client does not have permission to get URL/yonca/index.html from this server..", 

it means that you need to change your file permissions.

For your web page to be read by WWW browser like Netscape, the file
permission for your HTML text file should be set to "world-readable",
not just yourself.

1. Windows PC
If you are using studio PC's, this setting is the default, so you
would not have this problem unless you have accidentally changed the setting.

To reset the permission to be world-readable, right-click the www directory
in your H: drive, go to AFS/AccessControlList menu, click Add button, specify
Name as system:anyuser, and set Permissions on for r-Read and l-lookup.
(This is different from the regular Windows method for setting a file's permission.)
You need to do this for your www directory and all your 4560 subdirectories in it 
that your web pages use.


2. UNIX
If you are using an Athena UNIX machine and have a permission problem, set the 
file permission as below. First, list your www directory by "fs" command.
   cd $home
   fs la www 

This list should tell your current permission setting for www directory such as 
   Access list for www is
   Normal rights:
      system:4.560 rl
      system:expunge ld
      system:anyuser rl
      takehiko rlidwka

If it includes the line which says
      system:anyuser rl

your www directory is all set (but you still may need to fix 4560 directory
and its subdirectories as well). It is world-readable. Otherwise, set it by
   fs sa www system:anyuser rl

Check the result by            
   fs la www

Finally, repeat this process for all your 4560 and its subdirectories inside www.


3. What is the relations between URL and Athena directory?


Well, at MIT, our web server is set up so that its name is web.mit.edu, and
your athena directory
   H:www\            (in PC's)
   $home/www         (in Athena UNIX machines)

corresponds to the internet URL,
   http://web.mit.edu/your_account_name/www

Thus, your file
   H:www\myfile      (in PC's) 
   $home/www/myfile  (in Athena UNIX machines)

corresponds to
   http://web.mit.edu/your_account_name/www/myfile

In PC's, if you have a subdirectory and a file in H:www such as
   H:www\myproject\plan.jpg

its URL is
   http://www.mit.edu/your_account_name/www/myproject/plan.jpg

This means that basically the drivename and entry point directory
   H:www

is simply replaced in URL as
   http://www.mit.edu/your_account_name/www

and for specifying directories, URL uses Unix-style delimiter / , not \.

Got that?


4. I want to make links from my home page. Where should I keep the linked pages and images?
I recommend that you keep all your 4.560 project pages and images in your 

   H:www\4560                       (PC's)
   $home/your_account_name/www/4560 (Athena UNIX machines)

directory for now. Then, when you make a link from your home page,
you just have to specify the name of the file. You do not need
to specify the lengthy full URL, "http://web.mit.edu/...."
For instance, suppose you have an image named image_1.jpg. To include
this image in your 4560 home page, just put the following line in your
index.html.

  <IMG SRC="image_1.jpg">

It does not have to be (although it works),

  <IMG SRC="http://web.mit.edu/your_account_name/www/4560/image_1.jpg">

You can also make a directory to put all your image files together. An easy
organization is to make this image directory at the same level as your
HTML file. For instance, you can make a directory "4560images" in
"H:www" and put your image file "image_1.jpg" in there.
Then the link from your index.html to this image will simply be

  <IMG SRC="images/image_1.jpg">


5. For my images, should I use TIF format, JPEG format or GIF format?
Here is the differenct between these format that you would care.

format    capable colors     file size   loading time     quality
 GIF     256 colors (8bit)    small        fast            low
 TIF     millions  (24bit)    large        slow            high
 JPG     millions  (24bit)    up-to-you    up-to-you       up-to-you 

In general, GIF is smaller but low-quality than TIF. In JPG, you can
choose quality over file size, or file size over quality, but some
color information of the image gets lost.

If you have lots of images to show, you would usually like to set up
as below. 
Check out our gallery pages for examples of how to do this.

   1. Use small thumnail previews in your page in GIF or low-quality JPG
      format. This will load fast even if you have many in-line images 
      in a page. The quality of each image suffers but it is used just 
      for previews.

   2. Use a few full-size full-color images in TIF format or high-quality JPG
      linked from your thumnail previews in separate pages. This will take a
      bit more time to load but gives you a much better image quality. 

When you make these images, remember that you can go from TIF to GIF/JPG, but
you should not go from JPG/GIF to TIF. For, some information in your original
24 bit color TIF image are lost in JPG/GIF format. In other words,
once the image is converted from 24bit TIF image to 8 bit GIF image, you can 
never recover the quality even if you switch the format back to TIF.

6. Is there any software on Athena to edit an image and save it in .gif format?

Photoshop on Athena is somewhat unstable and use of studio PC's is
recommended for Photoshop.
If you absolutely need to do some image processing on a Athena machine,
you can use "xv" software for quick job.
"XV" let you edit an image simply by crop, scale, etc. and save it in various
formats as in .gif file.
   
    add graphics
    xv filename

In SGI, you may also use "imgworks" for quick image processing.
(It does not let you save in .gif file, though.)

    imgworks filename


7. My links do not work. Any restriction on filenames, etc.?
If you use the correct URL/path to specify a link to another HTML/image
file and the browser says that the file is not found, the filename could be a problem.
For the names of your HTML files and images (tif,jpg,gif,etc), 
  1) it is always safe just to use alphabet characters and numbers
  2) also it is safe just to use lowercase only
  3) it is safer not to include space 
  4) do not use special characters such as * / \ < etc.

Another possible problem for broken link is the read permission of
your file. Refer to  What about file's permission?  above for this.


8. How can I include AutoCAD drawings in my web page?
There are different ways of including AutoCAD drawings in your webpage:
  1 make a bitmap image (JPEG/GIF)
      This is the safest (meaning any browser can see it), but 
      resolution of the image limits the details you can get for 
      your drawings.
  2 create a DWF file (formated 2D view)
      This can show a formated drawing just like a printed layout sheet.
      You can also pan/zoom the image in the browser.
      Requires a newer version of Internet Explorer.
  3 simply use AutoCAD DWG file (3D model interactively viewable) 
      This posts your 3D model and allows browser to orbit, zoom, etc.
      A drawback is that the file tends to be large and thus takes
      potentially lots of time to download.
      Requires a newer version of Internet Explorer.

DWF and DWG files can only be viewed in the latest versions of Intenet Explorer (version 5
or above). To view a DWG file, you also have to have a DWG viewer plug-in software installed
on your machine. There are a number of such DWG viewer plug-ins avaliable (you can google 
them) but a recommended one is Volo View which comes with AutoCAD installation disc.

Here is an example for each. Try clicking on the links below.

JPEG bitmap version 

example of dwf file (after jumping to the page, right click on the image for manipulation)
example of dwg file (after jumping to the page, right click on the image for manipulation. This may take a while to download.)

8.1. Bitmap images from AutoCAD
The best way to make JPEG images for the web from a 2D drawing in AutoCAD is
very much like the procedure to plot images. JPEG images created like that
can preserve lineweights and colors.
In fact, you have to use the PLOT command to generate these images.

  File > Plot

Instead of selecting a regular printer, in the Plot Device tab, select

  PublishToWeb JPG.pc3

You need to specify a file name, and a folder in which to save the image.
Then you need to indicate the image size (in pixels) of the resulting file (in
the Plot Settings tab), and you need to set "Scaled to fit" instead of a
regular architectural scale.
A good suggestion is to make a large image size and scale it down in
Photoshop. If your image size is small, or if you scale the image down
by specifying an image size in HTML, you will likely to loose the
details of line drawings and quality suffers. 
Also I suggest you to adjust line colors before you make an image of
line drawings from AutoCAD. While you are modeling, your layers have
colors such as red, blue, cyan, etc for your convenience. These are
not usually the kind of colors you want for your drawings in web presentation.
Right?

You can also make a "screen capture", and copy the literal image that you are
seeing on the screen. This is process might not work very well in 2D drawings
because resolution is very limited, but it can be very helpful for 3D objects
in shaded mode.

In AutoCAD, use the following commands.

  tools>Image>Save (on a Athena machine)
  tools>Display Image>Save (on a studio PC)

Or just type saveimg in the AutoCAD command line.
When you save an image file of your line drawing or shaded view in AutoCAD, you
can just use GIF format (name the file with .gif suffix) since AutoCAD only
include 256 colors for this view.
When you save an image file of your rendered image, use of TIF format
(name the file with .tif suffix) with lzw compression option is recommended.

Other useful AutoCAD commands for your quick coperations are

  shademode : makes simple shading, hidden line elimination, etc.
  render: does cosine shading with multiple lights (This does not work too well.)
8.2. DWF (Drawing Web Format)
DWF is a highly compressed format for AutoCAD files, intended for delivery of AutoCAD 
drawings over the Web. It can contain the view layout information that you usually set up in 
AutoCAD paper space for printing.

DWF files can be viewed only in Internet Explorer 5.0 or above (IE 5.5 or above recommended).

The advantage of DWF files is that you can Zoom and pan, turn on/off layers, 
retain line weights and characters, and it can
be printed exactly the same way as you set. 

To create DWF files, you also use the Plot command.

  File > Plot

Instead of selecting a regular printer, in the Plot Device tab, select

  PublishToWeb DWF.pc3

You need to specify a file name, and a folder in which to save the image.
You don not have to specify image size in pixels, because DWF are vector-based
drawings. Instead, you need to set a paper size and an appropriate scale so it
can be printed correctly.
The rest of the procedure is exactly the same as when you plot: make a window,
set the scale, select the pen settings, and so on...

DWF are stand-alone objects that can be seen in IE 5.01 or later. 
You cannot
embed them into a webpage unless you use frames.

Links to DWF files work exactly the same way as regular links to HTML pages.
8.3. DWG
DWG allows interactive viewing of 3D model despite a limited viewing options
(for instance, lighting cannot be changed). However, it does not allow multi-view
layout that DWF file can do.  So, use this as a way of distributing models.
For presenting a 3D view in a carefully formated layout, use DWF instead.
Also, I suggest you to do the followings if you are using DWG format for the web. 

  1. clean up the model 
    (erase unnecessary objects, delete unused layers, adjust color)
  2. move the model to center around 0,0,0 (for ease of orbiting) 

DWG file can only be viewed in the latest versions of Internet Explorer and DWG
viewer plug-in such as Volo View that comes free with AutoCAD installation disk.


9. How can I examine the HTML files of other people's pages?
You can see other people's page's HTML file by selecting "Page Source",
"Document Source" or "Source" under "view" menu in your browser.
   

Education | Research | Who we are | Gallery | Bookmarks

Copyright 1995 Massachusetts Institute of Technology