Software you will need (on the Macintosh):
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.
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.
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 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.
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.
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.
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>
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.
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
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>There are a few options to the
<TR>
<TD>Chico <TD>Groucho
<TR>
<TD>Harpo <TD>Zeppo
</TABLE>
<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
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.
<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.
If you wish, you can choose a background color from Netscape's Background Color Index at:
http://www.infi.net/wwwimages/colorindex.htmlOn 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">
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.
<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">
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>
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/