Making Web Pages Using Netscape Composer

Creating Web Pages using Netscape Composer
David Bowen - 5/20/01

Background: What is a web page?

A web page is a file in the HyperText Markup Language (HTML) that resides within the reach of a web server, that can be requested by a web browser or web client (these two terms have the same meaning - examples are Netscape Communicator and Microsoft Internet Explorer), that is returned by the server to the client when requested, and that is displayed or rendered on the client's screen following the HTML specification.

A URL for a web page identifies a specific file on a specific web server. When a web client (Browser) sends that URL, the web server gets that file and sends it back to the client. The client displays or "renders" the file for the user, using the HTML markup. Therefore, a web page is a file placed on a web server computer, within "reach" of the web server.
Example of a URL: http://www.cll.wayne.edu/isp/drbowen/HavingAGoodCollegeExperience.htm

http://	The protocol to be used in transporting the file. Here, the HTTP or HyperText Transport Protocol.
www.cll.wayne.edu	The "domain name" of the web server, uniquely specifying a specific computer. Here, the CLL web server.
isp/drbowen/	The Path on the web server computer to the folder in which the requested file resides.
HavingAGoodCollegeExperience.htm	The name of the file at the end of the Path. This is the file that the web server sends back to the client.

Web pages contain text, or content, and markup, or formatting instructions, also called "tags." It is the client or web browser that carries out the formatting in the tags. The web page uses HTML, the HyperText Markup Language. In HTML, the markup or formatting instructions or tags, are enclosed within angle brackets <>. Formatting starts with a tag, say for boldface, and ends with that some tag preceded by a slash within the angle brackets, say

EXAMPLE:

This is an example of some markup that makes the letters red.
The text is the content; the tags are inside angle brackets <>.

<big>This is an example of some markup that makes the letters red.</big
The text is the content; the tags are inside angle brackets <>.

So, a web page is an HTML file placed within the reach of a web server.

Public Vs proprietary standards

The HTTP protocol and the HTML markup language are maintained as public specifications by the World Wide Web Consortium (W3C). As is typical for the Internet, the W3C was never authorized by any governmental authority to do this - it's just the way things get done. Since HTTP and HTML are public specifications (anyone can read them), anyone that wants to create a web server, a web browser or an HTML editor can do so. Users have many choices, competition leads to excellence, and prices are low (many of the best servers, browsers and editors are free, in fact). This covers text.

There are two graphics standards: JPEG, which is public and works well for photo-style graphics, and GIF, which is partially copyrighted but publicly available, works well for graphics which have solid fields of different colors, as is the case with many posters. GIF also affords some simple animation features. Since these are public specifications, there are many GIF and JPEG editors for creating graphics, although not quite as much competition as with HTML.

There are many other proprietary graphics and audio formats. Usually here there is a free "player" or plug-in for web browsers, but a developer must pay for the editing software, which is only available from the manufacturer of the standard, and often pay for the server in addition, although paying for the server is becoming rarer.

Here, we will stick to creating and editing HTML, and including GIF and JPEG files into HTML pages.

HTML Editors
HTML files are created by HTML editors. There are many HTML editors, falling within three general categories. Since the HTML specification is public, all HTML editors are interoperable; files created in one can be edited in another, with no or minimal problems. This makes the web developer's choice can be based on preference and budget, rather than by specification of a company.

Categories of HTML editors:

Text editors	These are general-purpose editors, used for the purpose of writing HTML files, The tags are entered by hand. Example: NotePad. The actual appearance must be checked with a web browser.
Tag editors	Tag editors have buttons for entering tags, generally ensuring that tags are spelled correctly, have all necessary additional information, and that the start and end tags are properly matched. These may have a web view. EXAMPLE: HotMetal
WYSIWYG HTML editors	With a WYSIWYG (What You See Is What You Get) HTML editor, the editing is like word processing. EXAMPLES: MS FrontPage (my personal favorite), Netscape Composer (installs with Netscape browser, almost universally available), MS Word (has trouble with graphics file names, may be better in Word 2000)

Here we will use Netscape Composer. This is widely available. It comes along with Netscape Navigator and Netscape Communicator, the Netscape web browser (the browser is often called just plain "Netscape" by users, butit actually comes with several other sections, including "Composer").

Another word of advice. Beginning web page developers often get frustrated at the lack of formatting control available on the web. Be aware that, while more formatting control is being added, content has been more important than formatting, from the beginning. There are several levels of difficulty with formatting:

Limited choices in the tags. Indents for the first lines of paragraphs are not available, for example. Horizontal positioning is particularly difficult. The best choice here is often to use a table with invisible borders.
Web browsers limit choices further. Most browsers, for example simply ignore the tab key, and treat multiple spaces as a single space. While the web developer can specify a favorite font, if that font is not available on the user's computer, another font will be arbitrarily substituted.
Multiple HTML and browser versions limit choices, at least for those on limited budgets. Later versions of HTML and browsers offer more formatting control However, many users have not upgraded. The choice is to either limit yourself to the lowest common denominator, or lose control altogether for some users. Even if different browsers support the same version of HTML, they will often display it differently. Those with very large budgets can develop individual versions of pages for each browser.
Users. Web browsers give their users the ultimate control over fonts, colors, backgrounds, etc. They can choose to override your choices.

There are two parts to creating a web site: (a) creating web pages, and (b) getting them to a web server.

Creating a Web Page

Start Netscape Composer (did not exist before Netscape 3, and then only with Netscape 3 Gold, but exists with all later versions:

Start Netscape Navigator (version 3) or Netscape Communicator (version 4 and later) - the web browser.
Click on the menu choice just to the left of "Help". This is "Communicator" for Communicator, and "Window" for Netscape 3 Gold.
Choose the "Composer" window. Notice that both the web browser (Communicator/Navigator) and the HTML editor (Composer) are running - both have icons on the taskbar at the bottom of the Windows screen.

Once you have opened the Composer HTML editor, you can close the Navigator/Communicator browser.

A personal web page is a good place to start. Your name, what you are studying, your hobbies, likes and dislikes, pets, children, jokes - all are good raw material, but don't put anything on the page that you don't want to be public.

You can create, edit and format as follows:

Enter and edit text just the way you would in a word processor. You can type and use the normal keyboard and mouse editing - backspace, delete, cut/copy and paste, arrow keys, and so forth.
The <Enter> key starts a new line.
Font. Using fonts other than the default font can be dangerous, because the same font, by name, has to be installed on the user's computer.
Font Size.
Font color. If you are used to print, where color is very expensive, get use to the Web, where it is free.
Bold, italics, underline and combinations.
Alignment - left, right, center but no fully justified on both the left and right margins (on the bottom tool bar at the far right - click for a drop-down list)
Numbered and bulleted lists are good for holding the attention of readers in a hurry (and that includes most web users!). These have separate icons on the bottom tool bar.
Try a table for horizontal positioning. Images can be put into HTML tables along with text and links. The table tool is on the upper toolbar near the right. To hide the table lines from your users, click off "Border line width:" If you want the border lines, you can also control color, width and style. Cell spacing is the space between adjacent cell borders, while cell padding is the padding between the borders and the text or other content inside the cell. The units are pixels. Table cells can expand and conract to accomodate the contents.
You can add pictures. Pictures do not become part of the web file, they way they do with word processors. Only two file formats are reliably available - gif and jpg. The choice of format is important. The jpeg format is good at compressing photographs with color gradients (smooth transitions from one shade to another), while the gif format is good at compressing solid colors, such as occur in many posters. You can insert either type of graphics file on your web page. Use the menu item Insert / Image... The resulting tag is <img src="filename"> (filename includes extension). Recall that each image remains in a separate file, and must be uploaded to the web server separately.
Spell check is available.

Snagging graphics from the web

Your web browser allows you to save any graphic that you can view by right-clicking on it and then choosing the "Save Image As..." item on the pop-up menu. All web graphics are automatically copyrighted, and the are circumstances under which this would constitute theft of intellectual property and subject you to prosecution, but many web graphics are freely exchanged.

There is also a link to a small gallery of web graphics on my personal home page at http://www.cll.wayne.edu/isp/drbowen

Saving your web page:

Use File / Save As..., the way you would normally. Since you will be sharing a folder with others here, put your two initials at the start of the file name, so that duplicate file names do not overwrite each other. If this web page is for a course, I have already made links for you from the course web site, so name your files to work with the links I have made: call your central file "home.htm", preceded by the first four letters of you last name (e.g., for me bowehome.htm). If you use other web pages for this web site, they should have filenames that start with the same four letters. Graphics files, also, unless it is your picture from the class photo album.

Links

If you have more than one web page, you will need to link between them. A link is from somewhere and to somewhere else, and so has two parts:

In the document that you link from, the text that is underlined and blue, that you click on to execute the link. We will call this the link text.
The document that you link to, that opens up when you click on the link in the from document.

To make a link, make sure that both files are saved, and saved in the same drive/folder. Make a link from the first file to the second file by:

Create and then select the link text - the text that you want to be blue and underlined
Click on the chain or link tool button
Use the "Choose" button to navigate and choose the file that you want to link to.
Click OK.
Make sure that the link tag (starts with <a href= and ends with </a> does NOT have "file" in it. That would tell browsers to find the file on the computer you are using when you composed the web page, which they would not have access to. Result: a failed or broken link, and you look foolish in public.

You should always check your web pages and especially the links before putting them on the web server. That is, make your mistakes in private, not in public. You can open view files stored on your local computer using a web browser using "File / Open..." or "File / Open Page..." In Navigator/Communicator, be sure to open the files in the browser, not the editor (Composer). In the editor, clicking on a link does not activate it, but instead leads to editing the link text. In the browser, you cannot edit but the links will work. Some aspects of web pages require that they be on a web server, but not these. To double-check your links, hold the mouse icon over the link, without clicking. The file that will be linked to is shown on the status bar at the bottom of the window, on the left-hand side. Again, make sure that the link does not have the word "file" in it.

You can also link to another web site by inserting the full URL, starting with "http://..."

Converting a document in another format to HTML

Netscape Composer can convert files in the Text format (*.txt) to HTML, but not word processing formats such as Word, WordPerfect or Works. You can use your word processor to convert files to the text format, and then use them in Composer, but converting to the text format causes all formatting information (fonts, font sizes, paragraph indents, pictures, etc.) to be lost. You are probably better off using your word processor to convert to HTML directly.

Microsoft FrontPage is a good general-purpose tool to use for converting word processing formats to HTML.

Uploading to a web server.

Normal web use with a browser only involves reading files from the server, not writing or saving files. The web server itself grants everyone read access, but it has not write methods to save files on the server. In order to prevent hacking, you need to be given "write" or "save" access rights to a web server, by the server administrator, before you can put your web pages on it and make them public. This requires an account with a User name and Password. The web server administrator, or WebMaster creates accounts. For the CLL Web Server, the WebMaster is David Bowen; contact him at d.r.bowen@wayne.edu. If you are printing these directions, you can record your User Name and Password below.

User Name: ____________
Password: ____________

Each web server will have its own method(s) for uploading. You also need to be given this information in order to use the web server.

CLL Web Server
On the CLL web server there is a web page uploader at at http://www.cll.wayne.edu/isp/copy - a web page that you can use to upload your own web pages.

NOTE: We are not sure why, but this uploader does NOT work unless you use this link to it. Linking from another page or typing in the URL directly will cause it to fail.

You will need to enter the User Name and Password above. Leave "Destination Web Site" at "all". Use the browse button to locate and select a file that you want to upload. You will need to upload all files, one at a time. This includes all web pages, and any picture files.

Be sure to test your web pages before you upload them, and again once they are on the web server!

Items not covered:

This document does not cover the following aspects of web pages:

Frames. Frames can divide the screen up into sections that can be loaded and scrolled independently of each other. Netscape Composer at this point does not do frames. (Microsoft FrontPage does frames. You could use Composer for everything except frames, and then FrontPage on the same file to add frames.)
Multimedia. As of now, there are no public standards for multimedia, and there may never be. There are several (ten or so) proprietary standards. This means that you can never be sure what each user has available. Also, many computers, especially corporate computers, do not have multimedia of any kind.
Interactivity. By this we mean the ability to fill out a web form and click a submit button, and perhaps to get an individualized response. This at present requires extensions to a web server. (I do teach a course on this - eCommerce.)