Designing a Personal Home Page

This webpage gives you some basic information to help you get started and assumes use of a PC, since all students in the course are PC users. This is an expanded version of the webpage used in class in Week 2, in that it addresses some questions that came up later in the quarter. Note that most of the links given in the examples are hypothetical and are given here purely for illustration purposes.

1. DOWNLOADING OF GRAPHICS FILES (AND OTHER FILES) FROM THE WEB

   To download an image from the Web, place your cursor over the image and right-click on your mouse, and save to your hard disk. While you use graphics files for practice purposes, be aware of copyright issues when you use materials from other websites for your own webpages.

   
   

2. FILE ARCHIVAL: What is a Zip File, Anyhow? (and other archived file types; from Winzip)

   Learn how to unzip files (if you don't yet know, for installing programs that are downloaded as .zip files) as well as how to zip files for archival purposes, or to bundle up several files for easy, convenient file transfer.

3. STRUCTURE OF THE SERVER / HARD DISK FOR FILES (HTML, graphics, audio, etc.)

   Produce the hierarchical structure in your web server subdirectory *identical* to that in your hard disk. This will enable you to use relative links and to preview from your hard disk with confidence that you will not have "broken links".

   Note: Do take time to think carefully about how you want to structure your web subdirectory. This includes both subdirectory names and filenames. For instance, the longer are these names, the longer will be the URL's. Once in place and with multiple webpages that are interlinked, restructuring can be quite time-consuming and can easily lead to "broken links" in not revising all relevant links. So, plan carefully and wisely to minimize the need to restructure later.

4. FTP: Definition of "FTP" (from TechWeb)

   Be sure that your FTP software is 32-bit (for Win95 and up) so that it can support long file names and file extensions exceeding three characters (e.g., WS_FTP LE).

   An FTP session (from TechWeb's FTP definition webpage):

   

   
   

5. LINKS: TYPES
   1. Absolute Links: Links with full URLs
      e.g., HTML encoding for linking to our DEALL Homepage:

        <a href="http://deall.ohio-state.edu/default.htm">DEALL Home Page</a>

      Note: For links to others' webpages on the Web, the full URL is needed.

   2. Relative Links: Links in relation to the current webpage
      1. Link to another webpage within the *same* subdirectory:
         e.g., from "week1.htm" to "week2.htm":

           <a href="week2.htm">Week 2</a>

         where both webpages are in /c999/ (i.e., /c999/week1.htm and /c999/week2.htm)

         Note: Relative links are used for linking to webpages in your own web subdirectory (and optionally for other files in the same web server). Web access is faster using relative links than absolute links in the same web server. It is like going from one room to another room in the house: it's faster to go straight to the other room than to go out the front door and come back in to go to the other room. Nowadays, with faster computers and connection time, the difference may be negligible. The main advantage is that from your local hard disk, you can check for correct links within your web subdirectory *before* ftp'ing your new or revised webpages, and then making that final check on the Web to make sure that all links are working properly.

      2. Link to a webpage in a lower subdirectory:
         e.g., from the homepage (default.htm) in the root directory, /chan.9/ (i.e., /chan.9/default.htm), to the webpage "week1.htm" in the lower/offspring subdirectory, /c999/ (i.e., /chan.9/c999/week1.htm):

           <a href="c999/week1.htm">Week 1</a>

         Note: The above is for linking to a file in a subdirectory that is *one* level lower than the subdirectory containing the relevant webpage. Linking to a file in a subdirectory that *two* levels lower simply involves further embedding, as in the example below:

           <a href="c999/assignments/assignment1.htm">Assignment 1</a>

         The same principle holds for further embedding of hierarchical structures.

      3. Link to a webpage in an upper/parent subdirectory:
         e.g., the reverse of (ii) above, from the webpage "week1.htm" in a lower subdirectory (e.g., /chan.9/c999/week1.htm) to the homepage "default.htm" in the higher/parent subdirectory -- that is, in the directory *one* level up -- (e.g., /chan.9/default.htm):

           <a href="../default.htm">My Home Page</a>

         Note: The above is for linking to a file in a subdirectory that is *one* level higher than the subdirectory containing the relevant webpage. Linking to a file in a subdirectory that is *two* levels higher simply involves adding an extra "../"; e.g., to link "assignment1.htm" (at /chan.9/c999/assignments/assignment1.htm) to the main page two levels up (at /chan.9/default.htm):

           <a href="../../default.htm">My Home Page</a>

         The same principle holds for linking from levels more deeply embedded. Personally, I tend to keep fairly flat structures; that is, I try not to embed too deeply. That way, URLs don't get too long, and I'm better able to see and keep track of files in different structures. Also, with flatter structures, one is less likely to make errors in creating relative links.

      4. Link to a webpage in a sister subdirectory:
         e.g., from the webpage "homework1.htm" in the /chan.9/c555/ subdirectory to the webpage "homework1.htm" in the /chan.9/c666/ sister subdirectory (i.e., /c555/ and /c666/ are sister subdirectories dominated by the root directory, /chan.9/:

           <a href="../c666/homework1.htm">Homework 1</a>

         And linking in reverse gives:

           <a href="../c555/homework1.htm">Homework 1</a>

   3. Page-Internal Links
      Link directs the surfer to a specific part of a webpage:
      e.g., to the General Information ("#gen") part of the webpage:

            <a href="#gen">General Info</a>

      directs the websurfer to that part of the webpage containing the following tag:

            <a name="gen">

      From a *different* webpage, linking to General Information requires giving the full filename, as below from a webpage in the same subdirectory:

            <a href="default.htm#gen">General Info</a>

   
   

6. FONTS:
   1. Absolute Font Sizes

      Font sizes do not need to be encoded in a webpage. One's web browser has a default font size that is pre-selected. Absolute font sizes are often created by programs that convert files from some other format such as MS Word DOC files to HTML format, as well as by various HTML-authoring software. For those using a basic web editor, one can also choose to encode absolute font sizes in one's webpage. These can be placed anywhere on the webpage:

      <FONT SIZE=2> Put in here whatever text you want between this pair of HTML tags. </FONT>

      <FONT SIZE=3> Put in here whatever text you want between this pair of HTML tags. </FONT>

   2. Base Font Sizes & Relative Font Sizes
      1. Start with Base Font Size

         e.g., Insert under the <BODY> portion of your webpage:

         <BASEFONT SIZE=3>

         Note: I usually set my webpages to a base font size of "3". The font size for the lettering on this particular webpage was set to "4", since this page was intended for classroom viewing purposes. (Check for yourself by going to VIEW -> PAGE SOURCE in Netscape, for example.) With the base font size set, there is *no* need for any font size tags to be embedded on the page *unless* and *until* you want to change the font size in some portion of that webpage (as shown below).

      2. Relative Font Sizes within your webpage

         With base font size set, you can use relative font sizes elsewhere on the webpage. For example:

         <FONT SIZE=-1> Put in here whatever text you want between this pair of HTML tags. </FONT>

         <FONT SIZE=+1> Put in here whatever text you want between this pair of HTML tags. </FONT>

         Note: Any change of the base font size will then affect the size of the lettering elsewhere on the page containing font tags giving relative font sizes. This is handy if one wants to adjust the *overall* size by increasing or decreasing the size of the lettering on a page simply by making just one change on that page, namely, adjusting the base font size. (For absolute font sizes, the adjustment needs to be made for each font tag.)

         Another way to adjust the overall size of the lettering on a webpage is using web browsers' own capability for enabling websurfers to adjust viewing size of the lettering on a webpage:

         Netscape: VIEW -> Increase Font or VIEW -> Decrease Font

         (p.s. Control over font size for viewing is one advantage that I personally find in using HTML files vs. PowerPoint files in creating presentations for classroom use and for conferences.)

   3. Font Faces

      Font face tags are for selecting specific font styles such as Arial, Times New Roman, etc., and can be combined with font sizes (as well as font colors) in one HTML font tag. Alternatively, a font style and font size (and color) are each encoded as separate tags, so that each has its own pair of beginning and closing tags. For example:

      <FONT FACE="ARIAL">
      Put in here whatever text you want between this pair of HTML tags.
      </FONT>

      <FONT FACE="ARIAL" SIZE=+1>
      Put in here whatever text you want between this pair of HTML tags.
      </FONT>

      <FONT FACE="ARIAL"> <FONT SIZE=-1>
      Put in here whatever text you want between these two pairs of HTML tags.
      </FONT> </FONT>

      You may also give more than one option for font faces, with first choice, second choice for web browsers should first choice not be available, or next choice, etc.

      <FONT FACE="MATURA MT SCRIPT CAPITALS, FLAT BRUSH, ARIAL" COLOR="#99004D">
      Put in here whatever text you want between this pair of HTML tags.
      </FONT>

      Note: Some older web browsers may not be able to read font face tags; that is, there is still need to select viewing of Traditional Chinese as the character set or use an external decoder.

   
   

7. A SHORT HTML-EDITING SESSION USING A BASIC WEB EDITOR (e.g., WebEdit 2.0)

   During the course of the quarter, take time to learn some basic HTML-authoring so that you can interpret frequently-used HTML tags, make various changes easily on your own webpages, know how to keep your webpages from being cluttered with superfluous formatting and tags, and be able to fine-tune formatting on your webpages.

   
   

8. OTHER TOPICS / TROUBLE-SHOOTING

   
   

9. ASSIGNMENT 1: REVIEW OF SOFTWARE FOR CHINESE

   Due next Monday, April 10. As everyone now has a user account (or at least access to web server space within /deall/), be prepared to give a short class presentation using an online webpage from your web subdirectory.

   Please always bring along a floppy/zip disk of your web subdirectory files (and retaining all hierarchical structures) to class, just in case we cannot make internet connection to access your webpages.

[ C694 Home Page ]