How to make a webpage in Netscape Composer

Welcome to Illinois Trails' Instructions for Using Netscape 7.2

Our goal is to teach you how to make simple webpages using Netscape - "simple" being the operative word. We want you up and online as soon as you feel comfortable - if you want to have fancy pages (frames, etc.), you'll have to look elsewhere for instructions.

Here's your "Need to Know" Terminology:

Website A collection of webpages, linked together from a main Index page

Webpage
(aka HTML files, aka FILE) A page within a website, accessed from a Main Index Page or other link.

Index Page The Main Page of your website. This is the page you will spend the most time on and make the most updates to. It provides the entry into all your individual webpages.   It should ALWAYS be named INDEX.HTML (or index.htm) If you don't have an index page, visitors will not be able to view your webpages.

Source Code This is what makes up the webpage behind-the-scenes of your software. It's the html language and is where all the tags and other formatting "stuff" goes on. Learn some basic html tags and you'll be able to do fun stuff like change the colors of the table lines, change the color of horizontal lines, etc. That's beyond the scope of these instructions.

URL The web address for your website. Our DOMAIN name is genealogytrails.com
The domain name is part of the URL

If you are on our server, the main url to your website's index page will be http://genealogytrails.com/STATEABBREVIATION/NAMEOFCOUNTY
(You don't need to attach the index.html to the url)

Interior webpages within your website will have the following general URL: http://genealogytrails.com/NAMEOFCOUNTY/NAMEOFFILE.HTML

If you are not on our server, good luck!

Link How to get from one webpage to another within a website. If a page is not linked up SOMEWHERE, be it from an index.html page or another interior webpage, folks WILL NOT be able to view it.

LINKS MUST BE EXACT! They're very picky about spelling... one wrong word, one extra space, one wrong slash, one one capitalized letter, and the page will not show up.

Anchor (aka Bookmark) A way to "hop down" to an exact location on a webpage

Table Terms Cell, Row, Column . A cell is an individual box, a row is a horizontal collection of cells, a column is a vertical collection of cells.

Upload Transferring your files from your computer's hard drive onto our server so that researchers can view your webpages.

Download Transferring your files from our server's hard drive (ftp space) to your computer's hard drive. Useful if your computer crashes and you didn't back up your files (SHAME!) and you need to recover your website.

FTP Space (aka Server Space) The area where Genie Trails files are kept. It's someplace in Utah. We transfer files via phone lines. If the phone lines are down in Utah, the "server is down" and you won't be able to upload or download.

By placing html files on a server, viewers can see the website. If it's not on the server, viewers don't see it.

FTP Software This is the software that does the actual work of transferring files from your computer to the server. It also can transfer files from our server to your computer. FTP Commander is what we're recommending since it's free and easy. Other softwares are available for a price, including WS-FTP.

How do Webpages and Websites Work? (The Short Version)

You sit at your computer and make a Webpage with a software such as Netscape. There are other softwares to use, but this is simple and free.
Your website will consist of individual webpages.
Your Index.html webpage is the main entry page into your website. It will have links to your interior webpages. No link, no viewing the page.
You transfer your webpage files and the graphics you used to create the webpages from your computer's hard drive onto our server with an FTP Software, such as FTP Commander. You can transfer one file at a time or all of them, it doesn't matter.
A viewer comes along and views your website's Index.html page. They see a page that interests them, they click on the link and they visit it.
Success!

Starting a New Webpage --- Setting Up Your Webpage --- Typing and Formatting Your Webpage ---

Saving Your File and File Naming Rules

Everything You Want to Know About Tables --- Link and Anchor How-To's --- Inserting an Image ---

PREVIEWING Your Webpage After It's Done

To start a new webpage:

From the FILE Menu on the tool bar, Choose New, Composer Page

[Alternate Method: click the NEW picture (pencil and page icon) on the Tool bar.]

A Composer window opens containing a blank page. The original browse window remains open behind the Composer window.

Back to the top

How did I insert this line?

Click on INSERT on the Tool Bar, then HORIZONTAL LINE. Yes you can make it different colors, but you need to go into the html source code to do it and that's beyond the scope of this little lesson.

Setting up your Webpage:
Put a title on the Webpage	From the Tool Bar, Select FORMAT, then PAGE TITLE & PROPERTIES. Type in a Page Title, the author of the page and a short description of the page
Set your background	The first thing you need to do is 1) decide what background graphic you want to use and then 2) copy the file into the county's directory if it's not already there. Once the file has been moved into the county's directory, you can select the background.. You do this on the FORMAT, PAGE COLORS & BACKGROUNDS menu from the tool bar. Under "BACKGROUND IMAGE" in the white box, you can either type a graphic file name if you know it, or you can BROWSE the directory to find the file name. Click OK when you're done. The background should show up when you close the window. Important: Make sure you know which background you want to use before-hand. It's a little difficult to change the background once it's been set. It's doable, but not super easy.
Set your Font Colors	From the Tool Bar, Select FORMAT, then PAGE COLORS AND BACKGROUNDS. Set your text and link colors to whatever you want them to be by selecting "USE CUSTOM COLORS". Click on the little box containing a color and a color grid will pop up. Choose any color that works. Important: Make sure the font colors are visible on the background you've chosen. :-) Back to the top
This is a good time to SAVE YOUR FILE! It's recommended that you save your file often while you're working on it. You would hate to type hundreds of names, then have your computer crash on you. All your work will be lost. Save yourself heartache and frustration by saving your file often!!! VERY IMPORTANT FILE NAMING RULES: Name your file using all LOWERCASE letters. Make the name descriptive so you know what it is by looking at the file name. (i.e. 1830cookcensus.html) Do NOT leave spaces between the words in the filename. Do NOT use special characters [@#!$%^&*()_+=] in the filename You_CAN_use_underscores_ (no spaces between them!) Back to the top

Typing and Formatting your Webpage
Now you're ready to type up your webpage. You type it as you would in any other word processing software. The same commands are used to format text (highlight the text and hit CTRL and the B key to bold, CTRL and the I key to italicize, CTRL and the U key to underline, CTRL and the Z key to undo the last action] [Alternate Method: Highlight the text and select any of these options from the tool bar] Select a Font - this can be found under the FORMAT Menu. Stick with Arial, Verdana, Helvetica, Times Roman... all the plain boring ones. The way webpages work, if you set up a webpage with a funky font you downloaded specially, the webpage will not show up the same for viewers unless they have that same funky font on THEIR computers. EVERYONE has Arial, Verdana, Helvetica, etc. Stick to one type of font per page to keep downloading times reasonable. Quick Tip: If you get to the end of a document and decide you want to switch fonts, hit CTRL and the A key to highlight everything on the page, then select a new font. It'll change everything highlighted to the new font. This trick will work for changing font size and other formatting issues too. Select a Text Size - this can be found under the FORMAT Menu. Most webpages should have SMALL or MEDIUM text for their main pieces of data. LARGE AND EXTRA-LARGE can be used for Titles. HOW TO UNBOLD, UNITALICIZE, UN-UNDERLINE All the tool bar icons are like toggle switches. Click them once, and they're on. Click them twice, and they go off. How to Get Out of a Format like Bulletted Lists: A little tricky. Hit enter to move your cursor to the next line. From the toolbar, Select FORMAT, DISCONTINUE TEXT STYLES. Hit enter again and hopefully it worked. Play around with the left indent and right indent options to make the rest of the list behave. Back to the top
How to Make Links	Here's what makes a word processing document different from an html document (webpage) ... Links! They take the viewer to another webpage, whether it's within your own website or to another website. To make a link: Highlight the text you want to associate the link to: For example: We want to put this on the bottom of every webpage so viewers have a way back to the Index Page: Return to the Main Index Page HIGHLIGHT YOUR TEXT. Once it is highlighted, there are 4 ways in which to make a link (choose the easiest for you): Method #1: Right Click the mouse. Select "Create Link" Type the webpage name in the LINK LOCATION box that pops up in the url. If you don't know the exact name of the webpage (and it MUST be exact - the slightest typo will render the link useless), select CHOOSE FILE. Navigate to the proper directory where the file is located. Select the file and hit OPEN. Click OK. Method #2 Click Insert on the Tool Bar Type the webpage name in the LINK LOCATION box that pops up in the url. If you don't know the exact name of the webpage (and it MUST be exact - the slightest typo will render the link useless), select CHOOSE FILE. Navigate to the proper directory where the file is located. Select the file and hit OPEN. Click OK. Method #3 Hit CTRL and the L key Type the webpage name in the LINK LOCATION box that pops up in the url. If you don't know the exact name of the webpage (and it MUST be exact - the slightest typo will render the link useless), select CHOOSE FILE. Navigate to the proper directory where the file is located. Select the file and hit OPEN. Click OK. Method #4 Click the LINK ICON on the tool bar Type the webpage name in the LINK LOCATION box that pops up in the url. If you don't know the exact name of the webpage (and it MUST be exact - the slightest typo will render the link useless), select CHOOSE FILE. Navigate to the proper directory where the file is located. Select the file and hit OPEN. Click OK. Back to the top
Insert an Anchor (aka Bookmark) within a webpage	What is an Anchor? A regular link is usually to another webpage, while an anchor is a link to another place within the same webpage. This is useful when you have a lot of information on a page and you want viewers to be able to hop down to one section of the information without having to read and scroll through everything. (i.e. a list of alphabetical names.... put an anchor at each new letter of the alphabet, then have a summary table at the top of the page with the link) This is a two-step process - you have to make the anchor and then make the link to the anchor. How to make the Anchor.. Position your cursor where you want the anchor to go. Click Insert on the Tool Bar Click NAMED ANCHOR Type a name for the anchor. It can be just a letter or a whole word. Keep it all lower case. Click OK. Now, to make the link to the anchor: You can follow any of the methods for making a link Select Create Link Put cursor in the LINK LOCATION box Click the little black down arrow in the LINK LOCATION box. A pop up list pops up with all the available named anchors. Select the appropriate anchor. Click OK If the pop up list is empty, go back to the "making the anchor steps" and try again.
How to Remove a Link or Edit a Link	How to Remove a Link: Highlight the TEXT that is linked. Right click your mouse Select REMOVE LINK It's gone.... How to Edit a Link: Select FORMAT on the tool bar Hit LINK PROPERTIES Make any changes you need to the url Hit Ok Back to the top
Most Illinois Genealogy Trails hosts find that tables are useful in presenting a lot of information. Instructions for simple tables are:
How to Insert a Table	Position your cursor where you want the table to be. Click on INSERT, then TABLE. [Alternate Method: Select the TABLE icon in the tool bar.] Decide how many rows and columns you want. Start small - you can always add to it later. In the New Table Properties dialog, set the properties you want (For a more detailed review of all these settings and what they do, read here). Click OK to accept the settings and close the dialog box. Click Apply to preview the settings you've specified and then click Close to accept them and exit the dialog box.
How to Add a Row when there are no rows underneath.	Position your cursor at the end of the last row. Hit TAB key. [Note: If you have used a numbered list or have indented lists or you're trying to insert an empty row between rows, this won't work. Skip to directions below]
How to Insert an empty row between rows OR if you have a numbered list or indents at the end of the last row	Position your cursor at the end of the row where you want to insert a row. Right click your mouse Hover your cursor so the menu pops up. Select TABLE INSERT Choose ROW ABOVE or ROW BELOW Made a mistake? Hit CTRL and the Z key to "undo" the last action.
How to Insert Columns	Position your cursor at the end of the column where you want to insert a new column. Right click your mouse Hover your cursor so the menu pops up. Select TABLE INSERT Select either COLUMN BEFORE or COLUMN AFTER Made a mistake? Hit CTRL and the Z key to "undo" the last action.
How to Delete Columns OR Rows	Position your cursor at the end of the column where you want to insert a new column. Right click your mouse Hover your cursor so the menu pops up. Select TABLE DELETE Select either COLUMN or ROW Made a mistake? Hit CTRL and the Z key to "undo" the last action.
How to Span (join) cells	I find it's easier to type my text first. But you can span empty cells too. Don't know what I'm talking about? The first row of this table is a section of "Joined" cells.... they span across the whole table and act as a Title bar Position your cursor in the first table cell that you want to span across the other table rows and columns Now left click your mouse in the cell that you want to span across the others With the left mouse button down, click and drag the mouse across the table columns to highlight them (Only the outside lines will be highlighted, not the text). Right click your mouse Select "Join Selected Cells" - that should do it. If you made a mistake in which cell should be the dominant one, hit CTRL Z and do over.
How to Add Color to a Cell within a Table	Careful here - if you have a nice numbered list like below and you follow these directions for changing the cell color, AND your cursor is on one of the numbered rows, it will turn only the numbered row your cursor is on a different color. To avoid this, position your cursor at the top of the table cell that you want to add color to. Now right click your mouse. Select Table or Cell Background Color Select either background for TABLE or CELL (what's the difference? Do you want to color the whole table one color or just do one cell with one color? Your choice) Pick a color - any color.
How to Select a Table and then Delete it, Copy it or Move It	To select a table: place the insertion point inside the table and then right click. Choose TABLE SELECT. Choose TABLE The whole table is now selected. You can copy it (CTRL and the C key) You can delete it (delete key) You can Cut it (CTRL and the X key) The difference between cutting and deleting, is that by Cutting, it goes to the clipboard and stays in memory. You can then PASTE it (CTRL and the V key) somewhere else in the document. Deleting means gone for good. You can move it (Click and drag) [Alternate Method: Any of the above functions can be accessed via the EDIT menu on the tool bar.]
Formatting Text within a table	With the tool bar you can BOLD, ITALICIZE, UNDERLINE, PUT INTO A BULLET LIST or a NUMBERED LIST, INDENT LEFT or INDENT RIGHT, LEFT ALIGN your text, CENTER your text, RIGHT ALIGN your text, or ALIGN JUSTIFIED Feel free to play around with what each button does. CTRL and the Z key will "undo" any action.
Sizing Columns	Select FORMAT on the tool bar Select TABLE CELL PROPERTIES Under SIZE, select WIDTH Change it from PIXELS to PERCENT by clicking on the down arrow and selecting PERCENT Choose how wide you want the cell to be in relation to the whole table. A table's width spanning across one webpage is 100%. If you want the cell to be 20% of that, type in 20. Or maybe you want it to be exactly half of the whole table - type in 50. Click APPLY. Play with it till it looks like what you want, then click OK Back to the top

Inserting an Image

To insert an image into a Webpage:

Make sure the image has been copied into the county directory already.
Place the insertion point where you want the image to appear in your document.
Select INSERT on the tool bar, then IMAGE [Alternate Method: Click the Image button on the Character Properties toolbar.]
<> The Image Properties dialog appears, allowing you to specify the source location of the image, its alignment relative to text, and the amount of space you want around it.
Type the name and path of the image file you want to insert in your document. If you're not sure of the file name or its location, click Browse to select an image file from the directory list.
Important: If you move an image file from the specified location, it will no longer appear on your Web page.
Type the text that you want to have appear in place of the specified image file. You should always specify alternative text for readers who use text-only Web browsers, or who have graphics turned off. If you don't include this alternative, your readers might see placeholder images instead of informative text.
Select any other options you want

Back to the top

ALL DONE? Now to see how the page is going to look.

First - SAVE YOUR FILE!!!!

On the VIEW menu, Select PREVIEW.

Important: Change it back to NORMAL EDIT MODE after you've looked at it.

See how the page is going to look in an actual browser:

Select the BROWSE icon on the tool bar. This will open the page up in Netscape Navigator.

VERY IMPORTANT NOTE: Remember that webpages will look different in different browsers (i.e. Internet Explorer vs. Netscape.) You should also view the page in Internet Explorer to make sure everything works right.

Back to the top

Learn about each item on the New Table Properties dialog box.

About the New Table Properties dialog

Lets you create a table and specify attributes such as number of rows and columns, border line width, cell spacing and padding, table width and height, color, and captioning. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

Number of rows - The number of rows in the table. Type a number in the box.
Number of columns -The number of columns in the table. Type a number in the box.
Border line width - The size (in pixels) of the border lines around cells. Type a number in the box. Type 0 to make the border invisible.
Cell spacing - The space (in pixels) between cells in the selected table. Type a number in the box.
Cell padding - The padding (in pixels) within each cell. This sets the top, bottom, right, and left margins of each cell in the selected table. Type a number in the box.
Table width - The width of the selected table. You can specify table width as a percent of the window width or as a number of pixels. If you specify the width as a percent of the window, the table width changes whenever the window changes. Type a number in the box and select "pixels" or "% of window."
Table min. height - The minimum height of the selected table. This is the smallest height the table can have. If you type more text in the table, the table automatically resizes to fit the text you enter. You can specify table height as a percent of the total window height or as a number of pixels. If you specify the height as a percent of the window, the table height changes whenever the window height changes. Type a number in the box and select "pixels" or "% of window."
Table color - The background color of cells in the selected table. You can use the document's default background color as specified in Page Properties|Appearance, or define a custom color.
Include caption - Lets you inserts space for a centered line of text above or below the selected table.
Table alignment - - Lets you select a left-justified, centered, or right-justified alignment for the table within the document.

Advanced Note: If you are inserting a table within a table (called nesting tables), you can also set the minimum height and width of the nested table as a percentage of the parent cell (the cell of the table in which the nested table resides). The nested tables height and width changes whenever the parent tables height and width changes. Type a number in the box and then select "% of parent cell."

Back to the top

Here's your "Need to Know" Terminology:
Website	A collection of webpages, linked together from a main Index page
Webpage (aka HTML files, aka FILE)	A page within a website, accessed from a Main Index Page or other link.
Index Page	The Main Page of your website. This is the page you will spend the most time on and make the most updates to. It provides the entry into all your individual webpages. It should ALWAYS be named INDEX.HTML (or index.htm) If you don't have an index page, visitors will not be able to view your webpages.
Source Code	This is what makes up the webpage behind-the-scenes of your software. It's the html language and is where all the tags and other formatting "stuff" goes on. Learn some basic html tags and you'll be able to do fun stuff like change the colors of the table lines, change the color of horizontal lines, etc. That's beyond the scope of these instructions.
URL	The web address for your website. Our DOMAIN name is genealogytrails.com The domain name is part of the URL If you are on our server, the main url to your website's index page will be http://genealogytrails.com/STATEABBREVIATION/NAMEOFCOUNTY (You don't need to attach the index.html to the url) Interior webpages within your website will have the following general URL: http://genealogytrails.com/NAMEOFCOUNTY/NAMEOFFILE.HTML If you are not on our server, good luck!
Link	How to get from one webpage to another within a website. If a page is not linked up SOMEWHERE, be it from an index.html page or another interior webpage, folks WILL NOT be able to view it. LINKS MUST BE EXACT! They're very picky about spelling... one wrong word, one extra space, one wrong slash, one one capitalized letter, and the page will not show up.
Anchor (aka Bookmark)	A way to "hop down" to an exact location on a webpage
Table Terms	Cell, Row, Column . A cell is an individual box, a row is a horizontal collection of cells, a column is a vertical collection of cells.
Upload	Transferring your files from your computer's hard drive onto our server so that researchers can view your webpages.
Download	Transferring your files from our server's hard drive (ftp space) to your computer's hard drive. Useful if your computer crashes and you didn't back up your files (SHAME!) and you need to recover your website.
FTP Space (aka Server Space)	The area where Genie Trails files are kept. It's someplace in Utah. We transfer files via phone lines. If the phone lines are down in Utah, the "server is down" and you won't be able to upload or download. By placing html files on a server, viewers can see the website. If it's not on the server, viewers don't see it.
FTP Software	This is the software that does the actual work of transferring files from your computer to the server. It also can transfer files from our server to your computer. FTP Commander is what we're recommending since it's free and easy. Other softwares are available for a price, including WS-FTP.