Create Your Web Page
You can create Web pages using any of the following options:
-
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.
-
A commercial application for Web site creation and maintenance (e.g., Dreamweaver, etc.).
- 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:
- Enter or change information using KompoZer’s format and composition toolbars and menu options.
- 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:
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.
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:
- Select the text you wish to link.
- Click the Link button on the
Composition toolbar. You will see a
dialog box like the one below:
- Enter the information under Link Location:
- 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.eduHow 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.
- Click the mouse where you want the image to appear.
- Click the Image icon. You
will see a dialog box like the one
below:
- In the Image Location box, type the URL or filename of the image.
- Be sure to check the box for URL is relative to page location.
- Click the Alternate Text button, then provide a description of the image for those using non-graphical browsers.
- 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.
- Click the radio button next to Use Custom Colors.
- Click one of the color buttons (Normal Text, Link Text, Active Link Text, Visited Link Text or Background)
- Select a color.
- Click OK, or type a URL in the Background Image box.
- 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.
- From the tabs at the bottom of the KompoZer page, choose HTML Source.
- The HTML Source (HTML file) appears in the window. Notice the information in the brackets (<>). These are HTML tags.
-
- 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.
- From the File menu, select Save As.
- 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):
- Click OK.
- 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.
- On the Composition Toolbar, click the Browse button.
- 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!