Create Your Web Page

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

  1. A free Web page composer application (e.g., KompoZer—see instructions below). You can download a free version of KompoZer from the KompoZer Web site as well as a complete tutorial for using KompoZer.

  2. A commercial application for Web site creation and maintenance (e.g., Dreamweaver, etc.).

  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 the UD Basic HTML Tutorials.

How to create your Web page using KompoZer

You can download the KompoZer program for both PC and Macintosh computers. To create a Web page in KompoZer:

  1. Enter or change information using KompoZer’s format and composition toolbars and menu options.
  2. Use the SSH Secure Shell File Transfer program (Windows computers) or Fetch (Macintosh) to transfer the newly created HTML file to Copland.

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

  • To start from a blank page, double-click the KompoZer desktop icon. You will see a window like the one below:

    kompozer main window

    Click the New button to begin.

  • To modify an existing Web page, download the page to your computer from within KompoZer by selecting "Open Web Location" from the File menu.
  • To modify an existing file on your computer, select "Open File" from the File menu.

How to enter text

When KompoZer 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 KompoZer window contains

  • A Menu bar
  • A Composition toolbar
  • A Format toolbar
  • Tab Browser toolbar
  • Edit Mode toolbar
  • Status toolbar

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

The Menu bar

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

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.
 

format toolbar

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

To create links, you must know the URL (Uniform Resource Locator) or address for the page you wish to link to. In KompoZer:

  1. Select the text you wish to link.
  2. Click the Link button on the Composition toolbar. You will see a dialog box like the one below:

    link properties dialog box
     
  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 images

Before you include images (photos, etc), make sure that you are not violating any copyright laws and be sure to read the Policy for Student Use of Computer Resources for Home Pages.

  1. Click the mouse where you want the image to appear.
  2. Click the Image icon. You will see a dialog box like the one below:

    image properties dialog box
     
  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

KompoZer provides buttons and menu options for adding features to your Web page. For instance, you can select a background color from the "Page Colors and Background" option on the Format menu. It is important to think of the impact of the color or feature on the audience and to remember that not all browsers display colors in exactly the same way. You should include the month and date you last updated your file at the bottom of your page and be sure to keep the information in your document current.

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 OK, or type a URL in the Background Image box.
  5. Click OK.

How to view the HTML source

When you produce a Web page using Komposer, the application creates the HTML file for you; the HTML file is the file that you actually publish. It contains codes that represent the information you added in KompoZer. You can view the HTML file from the KompoZer window; this is one way to learn the HTML codes.

  1. From the tabs at the bottom of the KompoZer 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. html source

  4. Click the Normal tab at the bottom of the page to return to the KompoZer editing window.

View your Web page

Before you “publish” your document, you can check it in a browser. This is especially useful for checking special formatting, links and images you have included.

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):

    page title box

  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 in 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!