Creating A Homepage

Software you will need (on the Macintosh):

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 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

Netscape Navigator is a web-browser client. It lets you access pages on the

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.

Graphics program of your choice, such as: Canvas, Painter, Photoshop, etc.

GIF Builder is graphics conversion software that lets you do sequence animations.

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:

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 others pages (in green below), drawing an actual picture may help to organize it.

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:

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. Thats one reason to use the Pagespinner software.

Many times, you will browse the 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.

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:

If you are in the Computer Science Department, you must read the information at: beforeyou 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.

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 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 wont 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:

Whereas, if I name my homepage index.html, then people wishing to find it on the web dont need to remember (or copy and paste), a filename in addition to the directory, they merely need to type in this URL:

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 thebrackets 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:

HTMLopens the document as HTML format (as opposed to other web formats).HEADopens the header of the document, which in this case also happens to be theTITLEThis title will appear along the border of the browser window./TITLEcloses the title command./HEADcloses the header.BODYbegins 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.

/BODYcloses the body command, and/HTMLcloses 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 theTITLEtag and the/TITLEtag. 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 theBODYand/BODYtags. 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. Thats a good size for a title. Heres what that looks like:

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! Hes 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

With HTML, you can do a bunch of things with text formatting, but probably not everything you will want to do. The

To make words bold, you can highlight the words then use the button. This will place thetags 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.

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 thetags around your text (or picture).

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 in HTML are a bit complex. Thats 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. Heres the Pagespinner example for a two row and two column 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.

Once you have some body to your page, you will want to see what its 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.

button in Pagespinner. This button will start up Netscape -if it isnt already running- and display your file.

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.

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

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:

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 Netscapes Background Color Index at:

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 thebackground coloruse this:BODY bgcolor=FFFFFFThis produces a page with a white background because the color code FFFFFF is the code for white.

2. To change thetext color, use this:BODY text=000000This produces a page with black text because the color code 000000 is the code for black.

3. To change theunvisited links color, use this:BODY link=00FF00This produces a page with blue links because the color code 00FF00 is the code for blue.

4. To change theactive link color, use this:BODY alink=DB70DBThis produces a page with purple links while the link is active because the color code DB70DB is the code for purple.

5. To change thevisited active link color, use this:BODY vlink=FF0000This 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 (dont forget to substitute your own filename!):

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.

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 theIMGtag, similar to the modifications of theBODYtag 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.

Which will include this picture on your page:

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.

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 lorado.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.