Step by Step Web Pages

Linda West
January 2000
Getting Started
Titles
Creating Internet Links
Headings
Graphics/Images
Text Styles
Line/Page Breaks
Font Size, Color
Backgrounds/Page Properties
Lists
Tables
Spell Check
USING NETSCAPE COMPOSER
 
*Start Netscape Navigator in your usual way.

To use an existing file:
Select a file from this class list or

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 Class1.html or 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
Titles
Creating Internet Links
Headings
Graphics/Images
Text Styles
Line/Page Breaks
Font Size, Color
Backgrounds/Page Properties
Lists
Tables
Spell Check
Using Netscape Composer

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 Save icon

Click the Netscape Preview icon to preview your changed page in the Netscape browser.

Creating Internet Links
Titles
Creating Internet Links
Headings
Graphics/Images
Text Styles
Line/Page Breaks
Font Size, Color
Backgrounds/Page Properties
Lists
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

Click OK

Save the file by clicking on the Save icon

Click the Netscape Preview icon to view your changed page in the Netscape browser. 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.
Adding Graphics or Images
Titles
Creating Internet Links
Headings
Graphics/Images
Text Styles
Line/Page Breaks
Font Size, Color
Backgrounds/Page Properties
Lists
Tables
Spell Check
Add a graphic to the page by clicking on the triangle with dots icon. Image

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 the 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 prePreview your page as you edit.

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

Click OK

Save the file by clicking on the Save icon

Preview at your page in the browser.

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

INDENTED LISTS:
Titles
Creating Internet Links
Headings
Graphics/Images
Text Styles
Line/Page Breaks
Font Size, Color
Backgrounds/Page Properties
Lists
Tables
Spell Check
Ordered <ol> Number list
1. Puts a number in front of each line
Unordered <ul> Bullet list
  • Bullet in front of each line

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

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

    Try making lines of text BOLD or Italic

    "A" Bold that looks bold; or "A" Italic leaning to the right

    Save the file by clicking on the "disk" icon

    Preview at your page in the browser.

    Line Breaks and Paragraph Breaks and Decoration
    Titles
    Creating Internet Links
    Headings
    Graphics/Images
    Text Styles
    Line/Page Breaks
    Font Size, Color
    Backgrounds/Page Properties
    Lists
    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.

    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.


    Save the file by clicking on the "disk" icon

    Preview at your page in the browser.

    FONT SIZE AND COLOR
    Titles
    Creating Internet Links
    Headings
    Graphics/Images
    Text Styles
    Line/Page Breaks
    Font Size, Color
    Backgrounds/Page Properties
    Lists
    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.

    Save the file by clicking on the "disk" icon

    Preview at your page in the browser.

    BACKGROUNDS and PAGE OR DOCUMENT PROPERTIES
    Titles
    Creating Internet Links
    Headings
    Graphics/Images
    Text Styles
    Line/Page Breaks
    Font Size, Color
    Backgrounds/Page Properties
    Lists
    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

    Save the file by clicking on the Save icon

    Preview at your page in the browser.

    TABLES
    Titles
    Creating Internet Links
    Headings
    Graphics/Images
    Text Styles
    Line/Page Breaks
    Font Size, Color
    Backgrounds/Page Properties
    Lists
    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.

    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
    Titles
    Creating Internet Links
    Headings
    Graphics/Images
    Text Styles
    Line/Page Breaks
    Font Size, Color
    Backgrounds/Page Properties
    Lists
    Tables
    Spell Check
    Use Netscape's ability to Spell Check to check the spelling on your document. Spell Check

    Also pay attention to other important Do's and Don'ts.

    West Homepage