Creating A Homepage

Index & Quick Reference

Software you will need...
Getting Started
HTML
Creating a Homepage on the Web
File Permissions & Indexability
Using Pagespinner...
Spinning the Web - Links
Adding Graphics to your Page
Using Fetch to Move Files
For MORE Information

Software you will need (on the Macintosh):
PageSpinner
PageSpinner is an HTML editor for the Macintosh. It supports the latest HTML variations, and limited Java Scripting. It allows you to format your html pages without having to remember all the HTML tags, and gives you a few nice preview options to see how things are going while you are building your page.
GIF Converter
GIF Converter is graphics format conversion software. This allows you to create graphics in ANY format (practically), and convert them to GIF or JPEG, both of which can be used on the WWW.
NetScape Navigator, version 2.0 or higher
Netscape Navigator is a web-browser client. It lets you access pages on the WWW.
Fetch, version 3.0
Fetch is FTP software that will let you move the files that you create on the Macintosh to a UNIX server and back for editing.
Other Software you may want:
Graphics program of your choice, such as: Canvas, Painter, Photoshop, etc.
MS Word
GIF Builder
GIF Builder is graphics conversion software that lets you do sequence animations.

Getting Started

1. Browse a few sites. Get ideas about what you would like to do, how you would like to present information, what you do and do not like about various websites.
Here are a few of our sites to browse:
http://l3d.cs.colorado.edu/
http://l3d.cs.colorado.edu/systems/agentsheets/
http://www.cs.colorado.edu/~ambach/
http://www.cs.colorado.edu/~corrina/ http://ucsu.colorado.edu/~spencers/
2. Determine what sort of information you would like to include on your website. If there is a lot of unrelated information (in blue below) or links to other¼s pages (in green below), drawing an actual picture may help to organize it.

Organizational Note:
The WWW is organized as a "hypermedia". This means that you start from one document (a HOMEPAGE), and by mouse-clicking on hyperlinks, you navigate through information. The Homepage is a place to present information, as well as an index to other information at your site. As you can see by browsing, many pages get interconnected - like a web.

HTML

HTML is an acronym for HyperText Markup Language. This is the format that WWW documents must have in order to be understood by web clients (i.e. Netscape Navigtor.) Web Servers do not parse documents, they merely serve them to your client browser. In this way, all web clients can read documents formated by any type of machine.
HTML works through the use of HTML Tags. These are commands that tell the client browser how to format and display your document. For example, if you would like the title of a paragraph to be displayed in bold text, the html will look like this:
<b>Paragraph Title</b>
As you can see, there is a tag to mark the beginning of a command, and a tag to mark the end of one as well. ALL tags that demark the end of a command are preceded by a slash. Additionally, ALL tags are enclosed in these sorts of brackets:
There are all sorts of tags for all types of formatting. That's one reason to use the Pagespinner software.
How to "Cheat" on the Web:
Many times, you will browse the WWW, and you will find pages that make you think, "WOW! How did they do that? How can I do it?". In Netscape, you can use the Document Source command under the View menu to get the HTML source for a particularly cool page. Then you can copy the tags to create the same formatting in your document.

Creating a Homepage on the Web

If you know (or can find) the proper HTML tags to format your homepage, you can use any text editor to write a homepage. You can even use MS Word, or other word processors that can save your file in ASCII (text only) format. However, in order for the homepage to be accessible to others on the WWW, it needs to be in a place where a Web Server can find and access/read it.
For those of us using the Macintosh to design Web pages for Unix Web Servers (the majority of web page designers!), the Fetch software is indispensible. This way, we can use all sort of editors on the macintosh, and use the Fetch FTP software to upload files to the Unix machines.
At CU, all students have accounts on one of several University machines, and you are allowed to make personal homepages. The WWW data is served via a distributed file system and is available on the CNS hosts spot, ucsu, ucsub,and rintintin as the directory /htdocs. Individual home pages reside in: /htdocs/People/name, where "name" is the name chosen for the URL by the user. For example, /htdocs/People/JanDoe would correspond to the URL: http://www.colorado.edu/People/JanDoe.
If you are in the Computer Science Department, you must read the information at: http://www.cs.colorado.edu/csops/FAQ/public_html.html before you put up a homepage.
For this class, we will set up a Macintosh WebServer. This means that you can develop and display Macintosh Homepages from this machine (Snowmass Mountain). However, keep in mind that if you would like your homepage to be permanent, you will need to keep it on your university account.

File Permissions & Indexability

In order for a Web Server to "serve" the document to your Web Client Browser (i.e. Netscape), the document must, on a UNIX machine, be WORLD READABLE. Additionally, the directory that contains the document must ALSO be world readable. The command to change the permissions to world readable in your UNIX directory and for the file is:
```
chmod 755 mydirectory/public_html/
```
```
chmod 744 mydirectory/public_html/myfile.html
```
Each directory has an index, which, if the directory is world readable, will be able to be accessed by anyone from anywhere on the web. If the file permissions are set correctly, people won't be able to snoop around very much, but if you wish to safeguard your directory structure from this readability, create a file (it can be blank, or it can be your homepage itself) called: index.html
Many people use the index.html filename for their actual homepage, because it simplifies the URL of their homepage to merely their directory name. For example, if I name my homepage Homepage.html, then anyone who would like to access it must use this URL:
```
http://www.cs.colorado.edu/~corrina/Homepage.html
```
Whereas, if I name my homepage index.html, then people wishing to find it on the web don't need to remember (or copy and paste), a filename in addition to the directory, they merely need to type in this URL:
http://www.cs.colorado.edu/~corrina/
This convention comes in handy when you have lots of information up on the WWW, or are developing a WebSite for an organization. The subdirectory indeces can then be the homepages for main topic areas, and the directories themselves can contain related html files and graphics.

Using Pagespinner to Make a Homepage

Start up Pagespinner, and you will get a blank document that looks a bit like this:

Along the top of the page, there are many small buttons that are graphical representations of HTML tags, a help button (the guy with the hat on), a preview button (the blue one), a "check" button, a toggle for balloon help, and an auto-paragraph button.
On the page itself, you already have a few HTML tags to get you started. You will notice these are in the < > brackets and are in all-caps. Tags in all-caps is a generic style guideline for HTML documents - it makes them more readable when you go back and edit them. You will also notice that in PageSpinner, all the tags are grey. This is a feature of the software. Here are the meanings of the existing HTML tags in your new document:
```
<HTML> 
```
opens the document as HTML format (as opposed to other web formats).
```
<HEAD> 
```
opens the header of the document, which in this case also happens to be the
```
<TITLE> 
```
This title will appear along the border of the browser window.
```
</TITLE>
```
closes the title command.
```
</HEAD>
```
closes the header.
```
<BODY>
```
begins the body of the document.
As you can see, this document has no contents yet. You will want to type all of your homepage text and include your links and graphics in this portion of the document.
```
</BODY>
```
closes the body command, and
```
</HTML>
```
closes the HTML document.
First, replace the word "Untitled" with your own document title. To do this, highlight the word "Untitled", and simply type in your replacement. Make sure it is between the
```
<TITLE>
```
tag and the
```
</TITLE>
```
tag. Remember, this will go along the border of the browser window, and will not show up on your page.
Next, you can try a few things out. You probably want to put in a title that will be legible ON the page. Click the mouse in the space between the
```
<BODY>
```
and
```
</BODY>
```
tags. Type in, say: MY HOMEPAGE. Highlight these two words, and then you can decide how you would like them to look. To make them bigger, you have a couple of options.
You can make it a "header". This option is under the SIZE menu along the top menu bar. As you can see, there are several sizes of header. Try Header 1. That's a good size for a title. Here's what that looks like:
```
<H1>MY HOMEPAGE</H1>
```
Three Important Things to Remember about PageSpinner:
1. When you are editing a document, make sure the tags are "unlocked" by selecting the Tags Unlocked option from the Edit menu.
2. When you want to change the appearance of something, either type it in, highlight it, then select your command, OR select your tag, place the cursor between the open and close tags for the command and then type your text.
3. The guy with the hat on really is your friend! He¼s called the HTML Assistant, and he can show you how to do all sorts of things - Tables, Lists, Links, Graphics. When you are confused about the proper format commands, click on him! He can show you examples, tell you which buttons to select, etc. Access the HTML assistant with the button.

FUN Things to Do with TEXT

With HTML, you can do a bunch of things with text formatting, but probably not everything you will want to do. The WWW is definitely NOT a WYSIWYG environment! However, you have some flexibility to make your text look nice on a page:
BOLD and ITALIC FORMATTING
To make words bold, you can highlight the words then use the button. This will place the
```
<B> </B>
```
tags around your text. For italics, use the button after highlighting. There are also shortcuts: under the Text menu, you can select either Bold or Italic, and you can also use the command B and command I keystroke combinations.
CENTERING TEXT
To center text, highlight the text (or picture) that you would like to be centered on the page, and use the button in Pagespinner. It will place the
```
<CENTER></CENTER>
```
tags around your text (or picture).
LISTS
In HTML, you can put items in various types of lists. This is done with the LIST menu, and the button. First, you need to select the type of list that you want from the LIST menu, and then you can use the button every time you wish to insert another list item. However, be sure to remember to have the curson between the open and close tags for the list command when you insert a new list item.
There are Ordered Lists, which are numbered; Unordered Lists, which are bulleted; and Menu Lists, which are bulleted by default, but can be used with any graphic as their bullets.
TABLES
Tables in HTML are a bit complex. That's because you have to keep straight where you are and what you are including while you are doing it. I recommend writing the table out first or typing it in first, and then formatting it in HTML. Here's the Pagespinner example for a two row and two column table:
```
<TABLE>

<TR>

	<TD>Chico
	<TD>Groucho

<TR>

	<TD>Harpo
	<TD>Zeppo

</TABLE>
```
There are a few options to the
```
 <TABLE>
```
tag that you will want to use to make your tables more attractive, for example: cellpadding, cellspacing, etc. The HTML Assistant in Pagespinner, accessed with the button, can provide help with tables.

Previewing your Page

Once you have some "body" to your page, you will want to see what it¼s going to look like out there on the web! To do this directly from Pagespinner, first make sure that Pagespinner is configured to work with Netscape as the browser:
1. From the FILE menu, select Preferences, and hold it down to get a list of which preferences you wish to edit. Select Browser from this list. Pagespinner will ask if you really wish to select the browser to work with the Preview option. Click on the OK button.
2. In the file dialog that comes up next, find and select the Netscape Navigator on your hard drive. Now you are all set to preview your documents in Netscape.
3. Save your file.
4. Next, click on the button in Pagespinner. This button will start up Netscape -if it isn't already running- and display your file.

Spinning the Web - Adding HyperLinks to other Pages

Links in HTML have a special tag - the
```
<A HREF> </A> 
```
tag. In order to create a link to another page, you must know the URL, or Web address, for that page. Then you can complete your command by typing the URL into the HREF part of the tag, like so:
```
<A HREF="http://www.unitedmedia.com/comics/dilbert/">The Dilbert Page</A>
```
This will link the Dilbert page to your homepage, and the text "The Dilbert Page" is what the link will look like on your homepage. In other words, that is what others will have to click on to get to the Dilbert page from your homepage. Notice that the URL in the HREF part of the tag is in double quotes! Be sure to close your quotes.
How to make sure your links work:
Links can be of two sorts - to a local page that you, or someone you know has authored, or to an outside page of related or interesting information. In either case, the key to making your links work properly is to have the CORRECT URL address for the page you wish to connect to. All links to pages begin with http:// and are followed, if an outside page, with the full URL: Hostname/directory/filename. Links to "inside" pages in the same, or related directories only need to have the filename or related directory and filename to work. When in doubt, use the full URL address.

Adding Graphics to your Page

As you can see from browsing the web, the presentation quality varies greatly from private homepages to professional homepages for corporations. One thing is clear however -> the web is moving away from textbased communication and more toward graphical presentation. There are various sorts of graphics you might want to put into your homepage:

BACKGROUNDS & TEXT COLORS

The default background color for HTML pages with no background specified is a rather tedious grey, with black text upon it. There are several ways to change this, but they are all done in the <BODY> tag.
If you wish, you can choose a background color from Netscape's Background Color Index at:
```
http://www.infi.net/wwwimages/colorindex.html
```
On this page you will find the RGB values that you need to set any background color you could wish to use. You can even tweak the RGB numbers to invent your own background color.
1. For the background color use this:
```
<BODY bgcolor="#FFFFFF">
```
This produces a page with a white background because the color code #FFFFFF is the code for white.
2. To change the text color, use this:
```
<BODY text="#000000">
```
This produces a page with black text because the color code #000000 is the code for black.
3. To change the unvisited links color, use this:
```
<BODY link="#00FF00">
```
This produces a page with blue links because the color code #00FF00 is the code for blue.
4. To change the active link color, use this:
```
<BODY alink="#DB70DB">
```
This produces a page with purple links while the link is active because the color code #DB70DB is the code for purple.
5. To change the visited active link color, use this:
```
<BODY vlink="#FF0000"
```
This produces a page with red visted links because the color code #FF0000 is the code for red.
To use your own illustration as a background, first create it, and then convert it to GIF format, and then use the example below to create your tag (don't forget to substitute your own filename!):
```
<body background="http://www.cs.colorado.edu/~corrina/mud/mudband.gif">
```
Design Note:
Take a hard look at the color combinations you are using! If your background color is too close to black, then it will be EXTREMELY hard for readers to read black text from it! Likewise, it is hard to read white text from light colored backgrounds. Keep this in mind and go for high contrast levels.

ILLUSTRATIONS & GRAPHICS

You can create any sort of picture in any graphics system (including scanning photos, etc), and place it on your homepage for illustrative purposes. This is done with the
```
<IMG>
```
tag, similar to the modifications of the
```
<BODY>
```
tag that can be done for backgrounds.
First, make sure that your graphics file is in the proper format. If your graphics program can not save to GIF format, then you can use the GIF Converter software to change it. Save it into PICT format, and then start up Gif Converter. Open the PICT file in GIF Converter, and then do a SAVE AS command from the File menu. In the File Type option underneath the filename, be sure to choose the GIF filetype. Then click on SAVE.
Here is an example tag:
```
<IMG SRC="http://www.cs.colorado.edu/~corrina/mud/knight.gif">
```
Which will include this picture on your page:

NOTE: the <IMG> command has NO closing tag!
Check out the modifiers for the <IMG> tag in the Pagespinner HTML Assistant. These include: Height & Width to modify picture size, Border to determine how to outline the picture, Vspace & Hspace to set vertical and horizontal space around the picture.
IMAGES AS LINKS
To make an image also link to another html page, simply wrap it in an <A HREF> tag.
```
<A HREF="http://the URL to link to"> <IMG SRC="http://the graphics file to use"></A>
```
Using Fetch to Move Files

Fetch is FTP software which can help you move files from the Macintosh to the Unix Machine and vice versa. Once you have everything up and going locally (tested with PageSpinner), you may wish to move things to the Unix machine. Start up Fetch.
You will be asked to startup a new connection. Type in the Unix machine that houses your home directory, such as ucsub.colorado.edu; then your user ID and your password (it will be hidden, then the pathname of your home/public_html directory. Click on OK.
Fetch will attempt to make an FTP connection to the machine, and if it is successful, it will open a window and show you a listing of the directory you are connected to. Using the PUT and GET file buttons, you can transfer files back and forth. Be sure to check the permissions of files that you upload before trying to access them on the web.
More Information
1. PageSpinner Help. Use the HTML Assistant.
2. The Netscape Navigator Handbook:
http://home.netscape.com/eng/mozilla/2.0/handbook/