Computer Science 1300
    Essential Computer Skills

    Class Notes
    October 27, 1998

     

        Announcements:

      1.  Tour of Computing Center next time:  Stephen Curry, of the Computing Center, will give us a tour during our class period on Thursday.  Meet in the Halsell (instead of the classroom) at 8:30.

      2.  Exam coming up:  The second examination will be next Thursday. We'll use Tuesday as a review session.  I will also make some review materials available on the web, as I did for the first exam.

        Class Summary:

      Making your web page functional:

      People are encountering various problems getting their web pages to work!  Here's a list of some common problems and solutions.

      1.  Page won't load.  Make sure that the page is called "default.htm" (minus the quotation marks, of course!).  Make sure that it is located in the top level of your HTML folder (i.e. not in a subfolder inside the HTML folder, and not in your general folder outside the HTML folder).  Make sure that it only has one .htm extension -- if you have Windows set up to hide extensions of registered filetypes, you can accidentally end up with a filename "default.htm.htm".  (See #11 on the Lab 10 page.)

      2.  Links don't work.  There are several common problems here.  (i) Trying to link to images or files that are not on a web server -- e.g. images or files on your own hard drive, floppy drive, or network folder; or files elsewhere on the network, e.g on the class folder.  These may work from your own machine, but won't from other machines, especially those off-campus.  Make sure that any of your own files that you link to are located in your HTML folder, and make sure that pages elsewhere that you link to are on web servers and are linked by their URL.  (Your links should either begin "http://", in the case of absolute links to pages elsewhere, or simply give the path to the file from your own HTML folder with no prefix, e.g. "image.jpg".  They shouldn't begin with "file://".)  (ii) Filenames with spaces.  Any image or web page you link to should have a name that contains no spaces:  e.g. "MyImage.jpg", but not:  "My Image.jpg".  Of course, when you change your filenames to get rid of spaces, you'll have to change the addresses in your links accordingly.  (iii) Putting files in subdirectories that are not indicated in the link.  If your image files are in a subfolder of your HTML folder labeled "Images", then a relative link to "MyImage.jpg" must read:  "Images/MyImage.jpg".  A relative address tells the users browser how to get from the web page it is currently browsing to the page you are linking.  If no subdirectory is indicated, it will search the same directory that the current page is in; if the file is not there, the browser will give up.  (iv) Changing filenames, or moving files, without changing the corresponding links.  Any time you change anything, double-check all links to make sure they work!

      Note that fixing these problems with broken links requires you to look at the actual address the link uses.  It's a good idea to type these addresses in yourself in the first place; you have more control over the precise text of the address this way.  (Also, if you use the "Choose File" option instead, Netscape wants to link the file in the format appropriate to a local file rather than to a web link -- i.e. it gives the address as "file:// . . .", which is not what you want.)  But in any case, fixing broken links will often require you to look at the text of the address and repair it.  You can do this in Netscape Composer by right-clicking the link, selecting "Link Properties," and examining the box labeled "Link to a page location or local file:".  (Of course, you can also edit the html directly using Notepad or something similar.)

      Making your web page attractive and easy to use:

      3.  Page looks good in one browser but not in another, or on one computer but not another.  There are lots of possible reasons for this.  In general try to give the user's browser as much flexibility as possible in displaying your page.  For example, specifying a particular font may give a result that looks terrific on machines or in browsers that support that font, but may not look the way you intend to folks who don't have the font available.  Also, all the considerations we discussed in connection with formatting word processing documents apply here as well, with even more force.  We discussed the importance of not formatting word processing files with spaces and tabs, because this can lead to unattractive results when you change the margins, offsets, etc.  The same point is even more germane in working on web pages.  Because different monitors will be set to different resolutions, and also because different users may be viewing the page in different-sized windows, using spaces or tabs to control where images appear or how text is formatted can lead to unexpected and unpleasant results in windows or on monitors different from those you designed the page on.

      You should always try to check this out!  View the page in whatever browsers you have available -- probably Internet Explorer and Netscape Navigator.  Also try resizing the window you are viewing the page in to see what effect this has on the page's appearance.

      What alternatives are there to using spaces and tabs for formatting, especially with respect to images?  First of all, you can align images at the left, center, or right of the page.  This way, the image will show up in the appropriate region of the page regardless of the window size.  There are different ways to do this; in Netscape Composer the simplest thing to do is to right click the image to bring up the "Image Properties" dialog box, then click the "Paragraph" tab at the top of the box.  You'll see buttons for Left, Center, and Right.  (Unfortunately, this aligns all the images in a given paragraph; if you want two images on the same level, one at the left of the window and one at the right, you may want to use a table; see below.)  Notice that the Image Properties box also gives you the option of determining how much space should be at the left and right (and top and bottom) of your image; this will enable you to have images in the same paragraph that are not right next to each other.

      Another technique, especially if you want to position labels near the images, is to place the images in a table.  For example, you could have label for an images in the cell underneath the image itself.  If you don't want it to look as though you're using a table, right-click on the table, select "Table Properties," and uncheck the box for "border line width."  You'll get the formatting possibilities introduced by tables, but the borders will not be visible in the user's browser.  (Tables can also be a very effective way to format text.)

      (4) Page is too demanding on user.  Try to make your page as easy on the user as possible.  This one covers a lot of ground!  Here are a few suggestions in this general area.  (i) Be sparing with images on your homepage, and keep those you do use small to reduce download time.  Remember that you can use a graphics program such as Paint Shop Pro, which is available on the lab machines, to resize images and also, if necessary and if it won't detract too much from image quality, to reduce the size of the palette used by the image.  Give users the option of accessing larger images if they wish, but don't force them to download large images in order to view your page.  (ii) Make sure all text on your page is readable -- that it is not, for example, obscured by loud backgrounds, or in a color that does not sufficiently contrast with the background.  (iii) Make the layout of your site clear, and provide good navigational aids for your user.  This becomes more important the larger your site becomes, but even with only two or three pages it is important that each page identifies you as its author and, if it is not your default page, that it provides a link back to the default page.  (iv) Provide users with the information they need to use your site effectively.  This includes who the author of the page is (namely, you); how to contact you; and when the page was last updated.


      Last update:  October 27, 1998

      Trinity University  |  Curtis Brown  |  CSCI 1300:  Essential Computing Skills