Step by Step Web Pages

Linda West
Fall 2000
Getting Started

Getting Started
Titles
Creating Internet Links
Email Links
Graphics/Images
Lists
Line/Page Breaks
Text Styles
Font Size, Color
Backgrounds/Page Properties
Tables
Spell Check
USING NETSCAPE COMPOSER          

*Start Netscape Navigator in your usual way.

To use an existing file:
Select this class file or

Use a file from your A drive:
Go to File
Open Page

Choose File
Use the drop down box
then select 3 1/2 Floppy (A:)
highlight Class1.html or your file
double click or click OK

Example of opening an existing page:

To start a new 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

Getting Started
Titles
Creating Internet Links
Email Links
Graphics/Images
Lists
Line/Page Breaks
Text Styles
Font Size, Color
Backgrounds/Page Properties
Tables
Spell Check
When the page displays:

With your cursor, highlight the Title on the top of the page 

Type a new title

Save the file by clicking on the Saveicon
Click the Preview to preview your changed page in the Netscape browser.

Creating Internet Links

Getting Started
Titles
Creating Internet Links
Email Links
Graphics/Images
Lists
Line/Page Breaks
Text Styles
Font Size, Color
Backgrounds/Page Properties
Tables
Spell Check
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

Enter


 

Always Save and Preview your page as you edit. 
Try the link that says Northeastern State University.

Does it work?

There are three types of Links:
external (normal links)
internal (a link to another place on the page) - i.e. Target
relational (a link to a related document on the same web)

External:
http://www.nsuok.edu = Northeastern State University
Internal:
Target name="xxxxxxxx" Creates the target for the link to find

Tip:Internal links work better if they are short and one word only.

 

 

Use #xxxxxxx (Name of the Internal link) to link to a target

Target

TIP: Note that some systems are case sensitive. You must enter the address correctly.
Relational:
/directory/filename This is a link to another document related to your first document.
Email Links

Getting Started
Titles
Creating Internet Links
Email Links
Graphics/Images
Lists
Line/Page Breaks
Text Styles
Font Size, Color
Backgrounds/Page Properties
Tables
Spell Check
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" Link

On the Link to: line, type:

mailto:youremailaddress

Enter

Link
 

Always Save and Preview your page as you edit. 

Test the link, it should bring up a blank email message.

Adding Graphics or Images

Getting Started
Titles
Creating Internet Links
Email Links
Graphics/Images
Lists
Line/Page Breaks
Text Styles
Font Size, Color
Backgrounds/Page Properties
Tables
Spell Check
Add a graphic to the page by clicking on the triangle with dots iconImage

On the Image: line, click Choose File...
Find the file named howdy.gif and select it. Or use any graphic you have available.

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, Save your file and Preview 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.
You may need to make sure your directories are listed correctly for your image. /gifs/dogcats2.gif ... gifs/dogcats2.gif ...
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 "center" from the alignment button on the toolbar. Alignment

Another tip: To make an image a link, select the image, then use the link Link button and give it an address.

Always Save and Preview your page as you edit. 

INDENTED LISTS:

Getting Started
Titles
Creating Internet Links
Email Links
Graphics/Images
Lists
Line/Page Breaks
Text Styles
Font Size, Color
Backgrounds/Page Properties
Tables
Spell Check
Highlight more than one line of text (a list).

 Ordered Number list
Puts a number in front of each line
Unordered Bullet list
Puts a bullet in front of each line

TAB to indent a line without leaving spaces above and below it.

Line Breaks and Paragraph Breaks and Decoration

Getting Started
Titles
Creating Internet Links
Email Links
Graphics/Images
Lists
Line/Page Breaks
Text Styles
Font Size, Color
Backgrounds/Page Properties
Tables
Spell Check
Go back to your page in the Netscape Editor (the pen

To make line breaks and paragraph breaks, you just need to space between lines or remove spaces between lines.
There is also an "insert new line" under edit on the top tool bar. 

Decorations for pages include Horizontal Rules

Click on the button with the line to place a horizontal rule on your page. Horizontal Line

-- This creates a visual page break by putting a line on the page.

 You can edit the ATTRIBUTES of the HR by making it different sizes, widths and shades. Right click on a line to set it properties.
The one below is 25% width. You can also center a line by selecting it and adjusting the alignment button.


Always Save and Preview your page as you edit. 

Text Styles

Getting Started
Titles
Creating Internet Links
Email Links
Graphics/Images
Lists
Line/Page Breaks
Text Styles
Font Size, Color
Backgrounds/Page Properties
Tables
Spell Check
Go back to your page in the Netscape Editor (the pen

Try making letters, words, lines or paragraphs of text BOLD or Italic

"ABold that looks bold; or "AItalic leaning to the right

Always Save and Preview your page as you edit. 

FONT SIZE AND COLOR

Getting Started
Titles
Creating Internet Links
Email Links
Graphics/Images
Lists
Line/Page Breaks
Text Styles
Font Size, Color
Backgrounds/Page Properties
Tables
Spell Check
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, Color

or click on the Heading type Heading or Type Face Face or use the drop down size box to change the size of the font.Font size The bigger the number the bigger the size. 12 is the default size. 

Always Save and Preview your page as you edit. 

BACKGROUNDS and PAGE OR DOCUMENT PROPERTIES

Getting Started
Titles
Creating Internet Links
Email Links
Graphics/Images
Lists
Line/Page Breaks
Text Styles
Font Size, Color
Backgrounds/Page Properties
Tables
Spell Check
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
 

Always Save and Preview your page as you edit. 

TABLES

Getting Started
Titles
Creating Internet Links
Email Links
Graphics/Images
Lists
Line/Page Breaks
Text Styles
Font Size, Color
Backgrounds/Page Properties
Tables
Spell Check
To add a Table to your document, use the table button. Tables

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.

Table properties

If you add a table later to your document, you can cut Cut , copy Copy and paste Paste your text and images into the squares. 

SPELL CHECK

Getting Started
Titles
Creating Internet Links
Email Links
Graphics/Images
Lists
Line/Page Breaks
Text Styles
Font Size, Color
Backgrounds/Page Properties
Tables
Spell Check
Use Netscape's ability to Spell Check to check the spelling on your document.Spell Check
 

Always Save and Preview your page as you edit. 

West Homepage -- Course Outline -- Top of page
June 16, 2000