Basic Text Formatting

Type a line of text on the screen.  Select the text by clicking your mouse in front of the text, then holding down the left mouse button and dragging the mouse to the right until all the text is high lighted.   Some formatting options are given below.

Bold Text

Italics

Underlined Text

Removing All Formatting

Changing Text Color

Select some text by holding and dragging the left mouse button over the text.  Click the down arrow in the Toolbar to bring up the color selection box. Select one of the colors below, or click the Other... button to select a different color.

Changing Default Text Color

Select Format from the menu bar, then select Page Colors and Properties.

The Page Properties box will appear.  Page Properties allows you to change many properties, not just colors, but we will talk about colors here. 

There are two radio buttons that control the default color of normal text and link text on the page.  If you choose the Use viewer's browser colors, then colors that students have chosen as defaults for their web pages will be applied to your course material.  This may or may not be a good idea.  Instructors usually want to have some control about the appearance of course pages. 

To select for yourself the default text and link colors, click the Use custom colors button and then select the colors as described below.

To change the default color of the text, click the black Normal Text button.  Select a new color.  You can select color for link text by clicking the Link Text button and selecting a new color.

The default text color you selected can be overridden by selecting some text and then applying color as described at the top of this page.  That way, you can choose a default color, and use different colors for emphasis or for headings.

Changing the Background Color or the Background Image

To use a background color (the default is white) click the Background button and select a color.  Remember that a dark background color requires a light text color.  Usually, a light background and dark text is easier to read.

To select a background image, in the Background Image frame, click the Use Image checkbox.  You can type a filename if you know it, or click the Choose File.... button to find the image you want to use as a background. 

If you check the Leave image at the original location box, Netscape will not copy the background image to the same location as your web page.  Instead, Netscape will load the file from its current location.  In general, it is best to leave this box unchecked.  It is much better if Netscape copies the file from its current location to the location of the web page.

Netscape Color Schemes

Changing the text size in HTML pages has traditionally been done using Heading tags.  The largest text is created with the Heading 1 tag, and the smallest text is created with Heading 6 tag.

 Creating Headers and Aligning Text

Type some new text at the top of a page.  Use some words that you might use as a page header.  Select the text by clicking and dragging your mouse.  Then, click the Header format down arrow.

Select Heading 1, the largest Heading.  Try some of the other Heading sizes to see how they look.

You can also control how text is aligned.  For Headings, you can center the heading in the middle of the page by selecting the alignments down arrow, and then selecting Center alignment.

Lists

• dates
• oranges
• figs
• apples
• pears

Lists have small black dots to the left of each list item called bullets.  Lists are also indented to the right of the left margin.  You can see that creating a list draws attention to the list items.

Creating Lists

The kind of list that has bullets to the left of the list items is called an Unordered List.  We can also create an ordered list that has numbers in place of bullets.  Lists with numbers are called Ordered Lists.  The list below is an Ordered List.

1. dates
2. oranges
3. figs
4. apples
5. pears

Horizontal Lines

It is very effective to separate topics with a horizontal line.  Humans tend to perceive that material that is separated from other material as different.  So, it is possible to discuss different topics on one page and separate them with a horizontal line.  To insert a line, place the cursor where the line is desired and click the H. Line icon.

You have some control over the appearance of the horizontal line.  Move your mouse pointer over the line until the pointer turns into a double headed arrow.  Then, click the right mouse button to bring up a menu box.  Select Horizontal Line properties.  The options you can adjust are shown in the image below.

The Height box adjusts the thickness of the line.  The default value is 2 pixels.  The width box adjusts how far accross the screen the line extends.  Line width can be expressed either a percent (a relative length) or as an absolute number of pixels.  The Extra HTML button allows you to type other attributes to the <hr> tag.  For example, I added some extra HTML to the line below to color it red.  However, the red color will only show with Microsoft Internet Explorer.  Netscape Communicator doesn't support the extra HTML for colored lines.  If the line below is red, you are using Microsoft IE.

Images are an important part of using the World Wide Web for instruction.  They add interest, provide information and help focus attention.  To insert an image, move the cursor to the place where you would like to insert an image.  Click Image on the Toolbar.

The Image Properties box opens as seen below.   The functions of some of the common options are given below.  The Choose File... button allows you to use a Windows file browser to pick a graphic file located on your computer.  Remember that the kinds of files that can be displayed on the Web are .GIF files and .JPG files.

Text alignment and wrapping around images controls where the text appears in relation to the image itself.  Text can align at the top, middle, or bottom of the image.  In addition, text can wrap around an image, either to the left or to the right. 

Dimensions is the size of an image.  When you insert an image, Page Composer determines the correct size and inserts the Height and Width in your HTML.  When the page containing this image loads, space is allocated for it and even if the image takes a little while to load, the remainder of the page can load around the image.  If the image size is not specified, the HTML page cannot continue loading until the image has finished loading, because the amount of space required to display the image is not known.

Space around image is the empty space surrounding an image.  The default settings are zero (0) pixels of white space, which means that text is right next to the image.  Your page will look much better if there is some (5-10 pixels)  space around the top, bottom and sides.  The images below show some examples of how text can be aligned, and how white space makes text more readable when it occurs next to an image.

The Alt.Text / LowRes... button allows you to type in a text description of an image for students whose browsers don't support images.  Move your mouse pointer over the three images below.  The text that appears when you move your move over one of these images was inserted using the Alt. Text/Low Res  button.

 
 
An image with text aligned at the top and no empty space around the image.

An image with text aligned at the bottom and no empty space around the image.
An image with ten pixels of white space around the image, and text aligned in the middle.

Tables are useful for displaying data and information in an orderly fashion.  Insert a table by clicking the Table icon as in the diagram below.

The New Table Properties dialogue box appears:

Table Rows and Columns

 The New Table Properties box allows you to configure tables.  We will examine some of those options below.

The Number of rows and Number of columns options are the most basic.  The number of rows and columns you specify will depend on the data you wish to present.  Remember to allow an extra row for column headings.   The table below has four rows and three columns.  

Table Caption and Border lines

Page Composer will create a place you can put a caption for your table should you want one. 

Check the Include caption box if you want a caption. 

Your table can have border lines that mark the boxes where items are entered.  If you want border lines, check the Border lines box, and then type a number for the width of the lines. 

Cell spacing and cell padding can make your tables look more professional.  Cell spacing controls the space between cells and cell padding controls the space between text and the border lines.  Using cell padding makes the text stand away from the border lines. 

The yellow-background table below has four pixels of cell padding.  Notice that cell padding is right and left, and above and below the text in the cell.  The table above has one pixel of cell padding.
 
 

By unchecking the Border line width box, you can remove all border lines.  The table below has no border lines visible in a browser.

You can change the properties of a table you have already created by right mouse clicking inside the table, and selecting Table Properties.

Table Width and Height

Students may view your web pages with all sorts of computers.  The monitors may be of various widths.  Web browsers are designed to wrap long lines of text if the monitor is narrower, and to expand a line of text on a large monitor.  Tables should be designed to accommodate various monitor sizes.  There are several methods for controlling the width of a table. 

The default setting has the Table width box checked, and the size of the table is 100% of the browser window width. 

Most tables look better if they are smaller than the entire width of a browser. 

You can change the width of the table by changing the percent of the window width that the table should consume, or by specifying an absolute number of pixels that the table should consume.  The percent is relative, that is, on small monitors the table shrinks and on larger monitors the table grows in width.  If you specify the width in pixels, the table assumes the same width on all size monitors. 

The three tables above consume 50% of the width of the browser window.

You can control the table height in the same way, by specifying either a relative percent of the screen height, or an absolute pixel value.  If the Table Height is left unchecked, text wraps in a cell to accommodate the table width.  

Table Color and Background

There are options for selecting a background color and image for the table different from the page background color and image.  Keep in mind that too many images can make an instructional web page difficult to read.

Extra HTML

Once you have created some web pages you need to put them on the server.  There are several ways of doing that.  On this page we will discuss Page Composer's Publish feature.  From the File menu, select Publish...  The publish options box appears.

Page Title will appear in the Title bar at the top of a web page.  Because this title is found when web search engines look at your college's web site, you should have a descriptive title for each of your pages.  If you didn't create one when you first saved your web page, you can create one now, or change it to something that is more meaningful.

HTML Filename is the name of the file you are transferring to the server.

HTTP of FTP Location is the name of the server to which you wish to publish the file.  This will usually be the name of your College web server.  The name of the server in the example above is pentane.chem.uiuc.edu.  Note that you need the entire name, separated by dots.  You will need a User name and a Password assigned to you by your System Administrator.

Other files to include offers you the opportunity to transfer images that the page may contain at the same time.  This is a good idea since the page will not look as you intended if the images are not present.

Note that there are more sophisticated methods for transferring files to a server.  Please click on the WS_FTP link from the main index for more information.