How to Create Your Web Page(s)

You can create web pages using any of the following options:

1. A web page composer application from within a web browser (e.g., Mozilla Composer—see instructions below).
   (You can download a free version of Mozilla from the UDeploy software distribution page. If you are using an outside ISP, you will first have to use the University's Web Proxy server to access this software.)

2. An application for web site creation and maintenance (e.g., Dreamweaver, etc.).
   If you prefer, you can refer to the IT staff recommendations for web site creation and maintenance.

3. Manual HTML coding (directly editing a web page file that uses HTML as its formatting protocol).
   To learn more about using HTML codes, work through User Services' Basic HTML Tutorials.

How to create your web page using Mozilla Composer

To create a web page in Mozilla Composer, you will enter or change information using Composer’s format and composition toolbars and menu options; then you will use the SSH Secure Shell File Transfer program to transfer the newly created HTML file to Copland.

You can open Composer and begin from a blank page, or you can use an existing web page. 

• To start from a blank page, from the Mozilla Navigator Window menu, choose Composer. You will see a window like the one below:

  

• To modify an existing page, open the page you will use as a template in Navigator. Then, from the Mozilla File menu, choose Edit Page.

How to enter text

When Composer opens, notice that many of the buttons look similar to those in word processing programs. When creating your web page, add or change the text in the file using the mouse and keyboard. When you start typing, that text becomes part of your web page. If you want to delete text, highlight the text and press the DELETE or BACKSPACE key. If you want to replace text, highlight the text and type the new text.

The Composer window contains

• A Menu bar
• A Composition toolbar
• A Format toolbar

The blue title bar across the top of the window displays the title of your document and the word "Composer."

The Menu bar

The Menu bar contains various options for accessing the features available in Composer.

The Composition toolbar

Most of the buttons on the Composition toolbar perform typical word-processing functions—copy, cut, paste, open a new document, print, spell.

The Format toolbar

The Format toolbar provides options for formatting text. Remember, not every browser will display fonts exactly the same as the browser you use. Using the drop-down list (Body Text, Heading 1, Heading 2, etc. as shown in the window below) and the Font, Text Style, Size and Text Color options on the Format toolbar ensures that your information is presented as close to your specifications as possible.

Additional buttons on the Format toolbar let you bold or italicize your text, create bulleted or numbered lists and change the margins of text.

How to create links

1. Select the text you wish to link.
2. Click the Link button.
3. Enter the information under Link Location:
4. Click the OK button.

To create a link that will generate a mail window addressed to your e-mail account, highlight the text and click the Link button. In the Link Location: box, type the following, replacing your_UDelNet_ID with your own information.

mailto:your_UDelNet_ID@udel.edu

How to include graphics

1. Click the mouse where you want the image to appear.
2. Click the Image icon.
3. In the Image Location box, type the URL or filename of the image.
4. Be sure to check the box for URL is relative to page location.
5. Click the Alternate Text button, then provide a description of the image for those using non-graphical browsers.
6. Click OK.

How to add features to your page

Experiment with adding a background color to your page and changing the text color. To alter the color scheme of your page, from the Format menu, choose Page Colors and Background.

1. Click the radio button next to Use Custom Colors.
2. Click one of the color buttons (Normal Text, Link Text, Active Link Text, Visited Link Text or Background)
3. Select a color.
4. Click Apply, or type a URL in the Background Image box.
5. Click Apply.

In the example below, the background color and some of the text color have been changed:

How to view the HTML source

1. From the tabs at the bottom of the Composer page, choose HTML Source.
2. The HTML Source (HTML file) appears in the window. Notice the information in the brackets (<>). These are HTML tags.



3. Click the Normal tab at the bottom of the page to return to the Composer editing window.

View your Web page

Note
The home page of your web site must be named index.html. If you do not give this page this name, it will not automatically appear in a browser as your home page.

1. From the File menu, select Save As.
2. In the blank field in the Page Title dialog box (as shown below), type a meaningful title for your page (This title will appear in the blue bar at the top of the browser and be used by search engines):

   

3. Click OK.
4. If this page is your home page, you MUST name it index.html or it will not automatically appear as your home page on a browser.
5. On the Composition Toolbar, click the Browse button.
6. Verify that all your links work and that your graphics appear correctly.

When you are satisfied with the appearance of your page, you're ready to publish!