Web Page Authorship and Some (Macintosh-related) Odds and Ends

George Gollin
University of Illinois
Department of Physics
g-gollin@uiuc.edu

 

A presentation to the Dr. Howard Elementary School faculty technology group (Champaign, IL Unit 4 school district), January 21, 1997.

The URL for this document is http://web.hep.uiuc.edu/home/g-gollin/dr_howard/dr_howard.html

Outline

• Introduction
• Some useful Macintosh tricks
  • Making a "screen shot"
  • The clipboard
  • Using aliases
  • Using the Launcher
  • Macintosh maintenance
• Structure of a Worldwide Web page
  • Some WWW preliminaries
    • Browsers vs. Servers
    • formats for graphics files
    • HTML
  • Organization of a web page
• Using Claris Home Page to create web pages
  • Overview and menus
  • Setting preferences and document options for a new document
  • Entering text into the document
  • Inserting graphics made by someone else
  • Inserting all, or part of, a Kid Pix drawing or screen shot
  • Including lists in the web page
  • adding links to other (local or remote) documents
  • "Mailto" links
  • Tables

Introduction

I'll assume:

• You are comfortable using a Macintosh
• You have used Netscape and have done a few worldwide web searches
• A lot of this web stuff feels murky to you

Software tools we'll use:

• Claris Home Page to create and edit web pages (I used Home Page to prepare this presentation)
• Kid Pix to make some pictures and select/paste parts of them into web pages
• SimpleText to open large pictures (such as screen shots) and select/paste parts of them into web pages

Go back to the top

Some useful Macintosh tricks

Making a "screen shot":

• A screen shot is a picture of the entire Macintosh screen, stored on the hard disk as a "pict" format file. It can be viewed with SimpleText and many other applications.
• Record a screen shot by typing a 3 while holding down the command and shift keys:
• Files are automatically named "Picture 1," Picture 2," and so on.

Go back to the top

The clipboard:

• Use the clipboard as a parking place for pieces of text and graphics while you transfer them from one place to another.
• Steps are:
  1. Select desired text or image
  2. Copy to clipboard (Edit menu)
  3. Switch to the other application if necessary
  4. Paste into desired location

Go back to the top

Using aliases:

• An alias is a "pointer" to a file. It's not the file itself, but only a "roadmap" (actually, a very short file) that the Macintosh can use to find the original file. When you double-click on an alias, the Mac finds the original file and performs the same action it would have if you had double-clicked on the original file. You can move, copy, discard, rename,... an alias just like you would any ordinary file. Renaming, moving, discarding,... an alias does not affect the original file in any way. In addition, the alias' name does not have to be the same as the name for the original file. The icon for the alias will be the same as the original file's icon.
• Create an alias by selecting the original file in the Finder, then choosing the Make Alias menu item in the File menu. In the example below, I have just made an alias for the Launcher, a file inside the Control Panels folder (which, in turn, is inside the System Folder).

  

• If you should lose track of the location of the original file, select the alias in the Finder and then choose the Get Info item in the File menu. The Find Original button in the Info window will locate the original file for you.

Go back to the top

Using the Launcher:

The Launcher is a control panel which presents palettes of icons. By clicking on icons for (aliases to) applications, you can launch the applications without having to find them on your hard disk.

Use it this way:

1. Open the General Controls control panel and make sure the "Show Launcher at system startup" feature is selected.

   

2. Double-click on the Launcher control panel inside the Control Panels folder.
3. Find the Launcher Items folder inside the System Folder.

   

   Double-click on the Launcher Items folder to open it, then create new folders, one for each separate group of icons. Note that the names must begin with a bullet (option-8) in order to be recognized as icon-grouping folders.

4. Place aliases to applications and/or documents inside the appropriate folders as desired:

   

5. You can add a new alias to the Launcher Items folders by dragging the alias' icon onto the Launcher window. Icons can be removed by holding down the option key and dragging them from the Launcher window into the trash.
6. Clicking once on an icon in the Launcher palette will launch/open the original application/file.

Go back to the top

Macintosh maintenance:

• You should rebuild the Mac's desktop files once every few weeks. Do this by holding down the option and command keys while restarting the computer. Keep holding the keys down until the Mac asks if you're sure you want to rebuild the desktop file. Mysterious crashes and freezes are some of the symptoms of tangled desktop files.
• You should run a disk checking (and defragmenting) utility every few weeks to fix minor problems on your hard disk before they become too sever to repair. I use Symantec's "Norton Disk Doctor" to do this.

Go back to the top

Structure of a Worldwide Web page

• Some WWW preliminaries
  • Browsers vs. Servers
  • formats for graphics files
  • HTML
• Organization of a web page

   

Go back to the top

Some WWW preliminaries

• Browsers vs. Servers. A web browser program, like Netscape, allows you to view web documents stored on other computers. A server program, like Web for One, allows your computer to send web documents to other computers. Probably, none of the Dr. Howard classroom machines are running web servers.

  ---

• Formats for graphics files. Many Macintosh applications (Kid Pix, for example) store graphics files in pict format. Web page graphics must be in GIF (Graphics Interchange Format) or JPEG format. Names of GIF files should end in ".gif" while JPEG files' names should end in ".jpg". Programs (like Claris Home Page) will automtaically convert graphics files from pict to GIF format as necessary.

  ---

• HTML. "HTML" stands for "Hypertext Markup Language." It's the language which a web browser expects to find in a web page. A web page is really just a file containing HTML instructions which the browser uses to create the page shown on your screen. Claris Home Page creates HTML instructions for you while allowing you to work in a "What You See is What You Get" editing environment. (You won't have to make learn HTML this way.) In case you're curious, here are some (self explanatory) HTML instructions, followed by the same instructions stored in this presentation's HTML file so you can see how they are handled by your browser.

  

  When I insert the HTML directly into this file, what appears is the following:

   

This text will blink while this text will not. This text will be boldface, while this text will not.

• "Bullet lists" ("unnumbered lists")
• begin with "ul" inside angle brackets and end with "/ul".
• Individual list elements begin with "li" inside angle brackets.

You can display an "inline image" like this: . The align attribute is optional, and describes vertical alignment of the image with respect to the text.

Go back to "Structure of a Worldwide Web page"

Go back to the top

Organization of a web page

• Parts of a web page. A web page usually contains a header section, which contains the page's title and some descriptive information, and a main body which contains everything else. This is done for you automatically by Claris Home Page.

  ---

• Some of the neat stuff you might want in the page. Let's stay away from advanced things like forms, counters, and clickable image maps.
  
  • Text in different formats and styles.
  • Textual material arranged into lists. (Unnumbered, like this one, or numbered.)
  • Links to other web pages, either local (on your computer) or remote (on another computer which is running a web server program).
  • Inline graphics: pictures which are mixed in with text.
  • A link allowing someone to send you email (a mailto link)
  • Tables

   

Go back to "Structure of a Worldwide Web page"

Go back to the top

Using Claris Home Page to create web pages

• Overview and menus
• Setting preferences and document options for a new document
• Entering text into the document
• Inserting graphics made by someone else
• Inserting all, or part of, a Kid Pix drawing or screen shot
• Including lists in the web page
• adding links to other (local or remote) documents
• "Mailto" links
• Tables

• Overview and menus. Claris Home Page allows you to create and edit web pages without having to learn about HTML. In keeping with the general style of Macintosh applications, it provides you with a reasonably intuitive "What You See Is What You Get" presentation of the page under construction. I'll create a few web pages for Miss Viola Swamp's class in order to demonstrate the use of Home Page.

  Home Page offers three different editing modes: Edit Page, Preview Page, and Edit HTML Source. You will mostly use the Edit Page mode, with occasional sidetrips into Preview Page mode.

  The menu bar looks like this:

  .

  For reference, here is the File menu:

  

  ...and the Edit menu:

  

  ...and the Insert menu:

  

  ...and the Format menu:

  

  ...and the Style menu:

  

  ...and the Window menu:

  .

Go back to "Using Claris Home Page..."

Go back to the top

---

• Setting preferences and document options for a new document.

  Do the following when you intend to create a new set of web pages.

  • 1. Create a folder to hold all the new html and graphics files:

    

  • 2. Launch Claris Home Page and select Document Options... from the Edit menu:

• 3. Enter a title for the document. Don't bother with the other entries. Shift from the "General" options window to the "Colors and Background" options window:

• 4. If you'd like to change the default colors, for example, for the page's background, do so here. If you click on a color selection box you'll get a "color picker wheel" to play with:

.

• 5. Next select the Preferences... menu item in the Edit menu, and move to the "Images" option window:

• 6. Make sure all three boxes are checked, then set the default folder for converted images to the folder you created before launching Home Page.

   

• 7. At this point, you should save your work: select Save from the File menu. The filename you select should end with ".html"

Go back to "Using Claris Home Page..."

Go back to the top

• Entering text into the document.

  At this point, Viola Swamp's home page is blank. Note that Claris Home Page is in "Edit Page" mode (look for the checked mode in the Window menu).

You can enter text into the window just like you would into a word processor's window. The Format and Style menus can be used to change selected text. In addition, the buttons in the toolbar can be used as shortcuts. They are:



Edit Page, Preview Page, Edit HTML Source

Preview in Browser, Object Editor, Link Editor, Document Options

Insert Anchor, Insert Link to File

Insert Image, Insert Horizontal Rule, Insert Table

Align Text Left, Align Text Center, Align Text Right

Insert List Entry

Indent, Outdent

Smaller Text, Larger Text

Bold, Italic, Teletype

Text Color

 

After typing away, but not changing any of the text formats or styles, we have the following:



Now I'll monkey with heading sizes, text alignment, boldface, and text color using the toolbar buttons and items in the Format and Style menus:

Go back to "Using Claris Home Page..."

Go back to the top

• Inserting graphics made by someone else

  Let's find some icons and so forth to insert in the web page. I'll launch Netscape, and search for an icon archive using the AltaVista search utility. Your Macintosh may not, have enough memory to run Claris Home Page and Netscape simultaneously (mine doesn't). The URL (Universal Record Locator) for Alta Vista is http://www.altavista.digital.com/ with a sample search shown below.

The "+" signs before words in the search list indicate that all links returned by AltaVista are required to contain the words.

Clicking on a link (this one was in Germany-- the files were slow to download) gave me a page of icons, with additional links to other icon archives. By holding the mouse button down for several seconds in Netscape, you will cause a popup menu to appear which will allow you to save the image under the mouse pointer, as shown.. Store the file in the same folder as the one you are using for your html files.

After saving as many icons, lines, pictures,... it is time to insert them into the web page. Use "Insert Image" from the Insert menu to insert them at the location of the cursor. Notice how the vertical alignment of the icon near the word "Here" appears:

You can double-click on the icon to open the "Object Editor." This tool can be used to change the vertical alignment, and other attributes, of the image:

Go back to "Using Claris Home Page..."

Go back to the top

• Inserting all, or part of, a Kid Pix drawing or screen shot

  Let's deal with inserting part of a screen shot first. Pressing the command-shift-3 keys simultaneously will create a SimpleText image file called Picture 1 (or Picture 2 or...) on you hard disk. Double click on the file to open it, then select the region you'd like to copy with the mouse:

  

  Copy the selection to the clipboard (Copy in the Edit menu), switch back to Claris Home Page, and paste it (Paste in the Edit menu) into the web page:

  

  Home Page will ask for a a file name for the (now converted to GIF) file. Put it in the same folder as everything else.

  You can insert an entire Kid Pix drawing into the web page by specifying it with the Image... item in the Insert menu. You'll need to put the converted-to-GIF file in the folder you've been using, though the original Kid Pix drawing can stay where it is.

  To insert part of a Kid Pix drawing, open the drawing with Kid Pix, select the moving van button () in the tool palette at the left, and click on the magnet tool () near the bottom of the screen. This activates Kid Pix's Cut/Copy/Paste features in its Edit menu. You can select a section of the drawing, copy it to the clipboard, then paste it into the web page. Home Page will convert the file format from pict to GIF and request a name/location for the new file.

   

Go back to "Using Claris Home Page..."

Go back to the top

• Including lists in the web page.

  It is easy to create lists. Two ways:

  • Type in several lines of text, select them with the mouse, then choose "Bullet List" (or "Numbered List") from the Format menu OR
  • Click the (Insert List Item) button in the toolbar, then type the text for the list item. Click the button again to enter the next list item.

  Use the indent/outdent buttons () to create sublists (which are indented further) or leave sublists. I'll add some lists for various links I'd like the Viola Swamp page to contain:

Notice that I haven't installed the links yet: nothing is underlined.

 

Go back to "Using Claris Home Page..."

Go back to the top

• Adding links to other (local or remote) documents

  I will create three other html files (in the same folder) to be linked to Viola Swamp's home page:

  1. swamp_class_writing.html
  2. swamp_class_pix.html
  3. swamp_class_career.html

  Let's assume that they have already been made.

  By hunting around with AltaVista, I have discovered a number of web pages I'd like to link to Miss Swamp's page. Some of their URL's are:

  • http://www.uiuc.edu/ph/www/ups (University Primary School)
  • http://squire.cmi.k12.il.us/Champaign/unit4/Champaign.htm (Champaign Unit 4)
  • http://www.uiuc.edu/ (University of Illinois)

  Select the text you'd like to underline for a link, then open the Link Editor (either use the button or the appropriate entry in the Window menu):

After installing all the links, we end up with this:

Go back to "Using Claris Home Page..."

Go back to the top

• "Mailto" links

  You can install a link which will allow someone viewing a web page to send you email from their browser program. To do this, you create a "mailto" link using the Link Editor. It works just like you'd think: select the text to be underlined, then enter your email address in the Link Editor window after "mailto:"

  

   

Go back to "Using Claris Home Page..."

Go back to the top

• Tables

  Use the table button () or the Table item in the Insert menu to create tables.

You can adjust the number of rows and columns using the Object Editor (shown in the illustration above), and change the sizes of individual cells by dragging them. Note that I've clicked on the arrowhead on the lower left side of the Table edit window to expose more options. I've used one of them (Width) to narrow the table from 100% of the window width to 60%. Click in a cell, then type (or insert images, other tables,...) to enter data.

That's that! To see the finished web page for Viola Swamp's class, click here.

Go back to "Using Claris Home Page..."

Go back to the top