Step by Step Web Pages

Linda West
Fall 2000

Getting Started

USING NETSCAPE COMPOSER
*Start Netscape Navigator in your usual way.
To use an existing file:
Use a file from your A drive or your class disk:
Go to File
Open Page
Choose File
Use the drop down box
then select 3 1/2 Floppy (A:)
highlight your file
double click or click OK
To start a new page:
Choose: File >> New >> Blank Page

With composer on the screen, look at the tool bar:
Netscape edit bar
The toolbar has actions that you will need to make webpages.

Titles

Using Netscape Composer
When the page displays:
Type a new title at the top of the page. We'll change the way it looks later.
Save the file by clicking on the icon
Click the Netscape icon to preview your changed page in the Netscape browser.

Creating Internet Links

Go back to your page in the Netscape Editor (the pen)
Type Northeastern State University
on its own line.
With your cursor, highlight the the line you just typed
Click the button that looks like chains and links
On the Link to: line, type:
http://www.nsuok.edu
Click OK
your file and it in the Netscape browser.
Try the link that says Northeastern State University.
Does it work?
TIP: Note that some systems are case sensitive. You must enter the address correctly.
Make a Relative link another file you have made by:
/directory/filename Type only the filename of the directory and filename instead of the complete WWW address.
Email Links

Go back to your page in the Netscape Editor (the pen)
Type in your name or email address at the bottom of the screen.
Highlight what you just typed with your cursor.
Click on the button for a "Link"
On the Link to: line, type:
mailto:youremailaddress
Click OK
your file and it in the Netscape browser.
Test the link, it should bring up an email blank message.

Adding Graphics or Images

Add a graphic to the page by clicking on the triangle with dots icon.
On the Image: line, click Choose File...
Find a graphic file select it. You may only use .gif or .jpg files for webpages.

You can select where the graphic will fit on the page and other attributes.
The illustration shows the Middle Button which aligns the text at the bottom of the image.
Check the box - Leave image at the original location... Keeps composer from moving your image.
Again, your file and it in the Netscape browser. Change the alignment, if you want to see a different view.
TIPS: Images do not reside on pages, they are called up by browsers and displayed on pages. Two types of images may be displayed: gifs - usually line art, can be made transparent jpg - usually photographs, cannot be made transparent - usually square or rectangle.

TIP: Alt text. Use the alternative text to tell a user of with no graphics, like lynx or the blind, what the image is. alt="dogs and cats"
The image alignment will not center the image on the page.
To center the image, select it, then choose the center from the alignment button on the toolbar.
Another tip: To make an image a link, select the image, then use the link button and give it an address.
Always and pre your page as you edit.

Text Styles

Go back to your page in the Netscape Editor (the pen)
Try making lines of text BOLD or Italic
"A" that looks bold; or "A" leaning to the right
your file and it in the Netscape browser.

FONT SIZE AND COLOR

Go back to your page in the Netscape Editor (the pen)
To change the size or color of letters, words, or sentences,
highlight what you want to change
Click on the color button and pick a color,
or click on the Heading type or Type Face or use the drop down size box to change the size of the font. The bigger the number the bigger the size. 12 is the default size.
your file and it in the Netscape browser.

BACKGROUNDS and PAGE OR DOCUMENT PROPERTIES

Go back to your page in the Netscape Editor (the pen)
To set properties for your page (document), you need to go to:
Format -> Page Colors and Properties
You can set the background color, or use an image for a background.
You can also set the default color for normal text, links, followed links and active links.
TIPS:
text= text color -- default black
link= link color -- default blue
vlink= visited link color -- default magenta
alink= active link color (changes for a few seconds as clicked) -- default red
*You may have only one link color per page
Place a background image on the page using the Choose File.. button.
your file and it in the Netscape browser.

TABLES

To add a Table to your document, use the table button.
You can have any number of rows and columns. The outside lines may be visible or invisible. You can also set background colors.
All of your choices are in the Table properties box, including alignment and border width.
If you add a table later to your document, you can cut , copy and paste your text and images into the squares.

Getting Started
	USING NETSCAPE COMPOSER Start Netscape Navigator in your usual way. To use an existing file: Use a file from your A drive or your class disk: Go to File* Open Page Choose File Use the drop down box then select 3 1/2 Floppy (A:) highlight your file double click or click OK To start a new page: Choose: File >> New >> Blank Page With composer on the screen, look at the tool bar: The toolbar has actions that you will need to make webpages.
Titles
	Using Netscape Composer When the page displays: Type a new title at the top of the page. We'll change the way it looks later. Save the file by clicking on the icon Click the Netscape icon to preview your changed page in the Netscape browser.
Creating Internet Links
	Go back to your page in the Netscape Editor (the pen) Type Northeastern State University on its own line. With your cursor, highlight the the line you just typed Click the button that looks like chains and links On the Link to: line, type: http://www.nsuok.edu Click OK your file and it in the Netscape browser. Try the link that says Northeastern State University. *Does it work?* *TIP:* Note that some systems are case sensitive. You must enter the address correctly. Make a Relative link another file you have made by: /directory/filename Type only the filename of the directory and filename instead of the complete WWW address. Email Links Go back to your page in the Netscape Editor (the pen) Type in your name or email address at the bottom of the screen. Highlight what you just typed with your cursor. Click on the button for a "Link" On the Link to: line, type: mailto:youremailaddress Click OK your file and it in the Netscape browser. Test the link, it should bring up an email blank message.
Adding Graphics or Images
	Add a graphic to the page by clicking on the triangle with dots icon. On the Image: line, click Choose File... Find a graphic file select it. You may only use .gif or .jpg files for webpages. You can select where the graphic will fit on the page and other attributes. The illustration shows the Middle Button which aligns the text at the bottom of the image. Check the box - Leave image at the original location... Keeps composer from moving your image. Again, your file and it in the Netscape browser. Change the alignment, if you want to see a different view. *TIPS:* Images do not reside on pages, they are called up by browsers and displayed on pages. Two types of images may be displayed: gifs - usually line art, can be made transparent jpg - usually photographs, cannot be made transparent - usually square or rectangle. *TIP:* Alt text. Use the alternative text to tell a user of with no graphics, like lynx or the blind, what the image is. alt="dogs and cats" The image alignment will not center the image on the page. To center the image, select it, then choose the center from the alignment button on the toolbar. Another tip: To make an image a link, select the image, then use the link button and give it an address. Always and pre your page as you edit.
Text Styles
	Go back to your page in the Netscape Editor (the pen) Try making lines of text BOLD or Italic "A" that looks bold; or "A" leaning to the right your file and it in the Netscape browser.
FONT SIZE AND COLOR
	Go back to your page in the Netscape Editor (the pen) To change the size or color of letters, words, or sentences, highlight what you want to change Click on the color button and pick a color, or click on the Heading type or Type Face or use the drop down size box to change the size of the font. The bigger the number the bigger the size. 12 is the default size. your file and it in the Netscape browser.
BACKGROUNDS and PAGE OR DOCUMENT PROPERTIES
	Go back to your page in the Netscape Editor (the pen) To set properties for your page (document), you need to go to: Format -> Page Colors and Properties You can set the background color, or use an image for a background. You can also set the default color for normal text, links, followed links and active links. TIPS: text= text color -- default black link= link color -- default blue vlink= visited link color -- default magenta alink= active link color (changes for a few seconds as clicked) -- default red You may have only one link color per page Place a background image on the page using the Choose File.. button*. your file and it in the Netscape browser.
TABLES
	To add a Table to your document, use the table button. You can have any number of rows and columns. The outside lines may be visible or invisible. You can also set background colors. All of your choices are in the Table properties box, including alignment and border width. If you add a table later to your document, you can cut , copy and paste your text and images into the squares.

West Homepage