The status bar at the bottom of the WebEdit PRO window displays the following information:
• Cursor Position (Line:Column)
• Cursor Mode (Insert or Overwrite)
• Has the file been modified since it was last saved?
• Full path and filename
To exit the application, choose the Exit command from the File menu.
In the next chapter you will learn how to create new HTML documents; add tags to create hyperlinks and anchors; add images; view your documents with a browser; and save your documents.
Chapter 3
Creating New
Documents
In this chapter you will learn how to create new HTML documents; use the Home Page Wizard and Minimal HTML features; add tags to create hyperlinks and anchors; add images; view your documents with a browser; and save your documents.
This section explains how to start a new HTML document.
To create a new document:
1 Select New from the File menu, or click the New icon on the document toolbar.
2 Select the type of document you want to work on:
• New Blank Page — Opens a blank document window. Use this command if you want to start a new HTML document from scratch.
• Home Page Wizard — Launches the Home Page Wizard. This wizard presents you with a sequence of prompts that step you through the process of creating a basic home page. If you are new to HTML, we encourage you to use the Home Page Wizard first. The Home Page Wizard procedure is described in the next section.
• Open Existing Page — Prompts you to select an HTML document. This is equivalent to choosing the Open command from the File menu.
The best way to "get your feet wet" with HTML is to use WebEdit PRO’s Home Page Wizard. You get the instant gratification of seeing your creation immediately, and you also get the source HTML document to examine, to keep, or to modify.
The Home Page Wizard presents a series of windows with prompts for text and names of files that you want to appear in your home page. At any time you may go back to previous steps and change your entries by clicking the Previous button.
To start the Home Page Wizard:
1 Select New from the File menu, or click the New icon on the document toolbar. The New Page dialog displays.
2 Select Home Page Wizard, then click OK.
3 The initial Home Page Wizard window displays, with a brief explanation of how it works. When you have read the text, click Next.
The Select a Title window displays:
4 Enter a title for your page, and optionally, a subheading. By default, a horizontal rule is placed after the subheading, and the title and subheading are centered on the page. If you want to turn either of these options off, clear the corresponding check box. When done, click Next.
5 The Background window displays:
6 If you want your home page to have a colored background, select the Colored Background option, then click Select to choose a color in the Color dialog. (The default color is white.) If you have an image file that you want to use as the background, select the Image Background option and enter the name of the image file in the space provided. (If the image is smaller than the size of the browser window, the image will be tiled to fill the browser window.) When done, click Next.
7 The Picture window displays.
8 If you want to include an image on your page, select the Include a Picture check box and enter the name of the image file in the space provided. You may enter a caption for the picture by selecting the Include a Caption check box and entering the caption in the space provided. If you want the picture to be centered, select the Center Picture on Page check box. When done, click Next.
9 The Paragraph window displays:
To enter the text that you want on your page, select the Include a Paragraph check box and type the text you want. When done, click Next.
If you want to include a link to another Web site on your home page, select the Include Site Link check box. In the Site Location text entry box, enter the URL of the site you want to link to. In the Site Description text entry box, enter a brief description or title for the site you are linking to. When done, click Next.
11 The Page Links window displays:
If you want to include a link to another HTML document that you have created, select the Include Page Link check box and click Locate to select the HTML document to which you want to link. The document’s filename appears in the Page Filename text entry box when you return to this window. In the Highlighted Name of Link text entry box, enter the text you want to appear on your page as the underlined link to the other document. When done, click Next.
12 The Contact Information window displays:
This is where you enter your name and e-mail address, so that people can send you e-mail directly from your home page. To include your name and e-mail address, select the Include Contact Information check box and enter your name and e-mail address in the space provided. When done, click Next.
13 The Finished window displays. One more click and you are done! Click Next. WebEdit PRO generates the HTML for your home page and displays the source file in a document window. To see what your home page will look like in a browser window, click the Quick Preview toolbar button.
14 Save the new document.
Congratulations! You are on your way to becoming a Webmaster. As you learn more about HTML, you can fine-tune the wizard-generated document, add text, lists.
Tip
If you plan to be creating many pages similar to your home page, you can start with the wizard-generated document, customize it as needed, and save it with a different filename; you do not need to re-invent the wheel each time you want to create another page!
WebEdit Pro’s Minimal HTML feature instantly inserts into a new blank document the essential tags required in every HTML document. You can also change and extend what the Minimal HTML feature inserts. The Minimal HTML feature is available only if a new blank document is the current document.
To insert minimal HTML tags:
2 Click the Minimal HTML button on the document toolbar.
The default tags inserted by the Minimal HTML button are the following:
<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<BODY>
<H1>First Heading</H1>
...Add body text here...
<HR>
</BODY>
</HTML>
You can modify what the Minimal HTML button inserts simply by editing the minimal.html file in the WebEdit program directory.
It is often more efficient to enter, organize, and edit the text content of a document and then format the text and the page using HTML tags. When you want to insert HTML tags around text in a document, the general procedure is to select the text, then select the tag you want to place around the text.
To add a tag to text in the document:
1 Highlight the text you want to tag.
2 Select the tag you want to apply to the text.
You can select tags from the Insert menu, from the menu toolbar, or from the user toolbar. Many common tags also have keyboard shortcuts. In addition, many of the most frequently used tags are also included on a pop-up menu that appears when you right-click on the document window.
For example, to designate text as a Level 1 Heading, you can use any of the following methods (once the text for the heading has been highlighted):
• Choose Headings from the Insert menu, then select Heading 1.
• Click Heading on the menu toolbar, then select Heading 1.
• Use the keyboard shortcut Shift+Ctrl+1.
• Click the Level 1 heading button on the user toolbar.
• Right-click in the document window and select Heading 1.
Each of the above actions opens the Heading dialog, where you can assign various attributes to the heading.
Tip
If you find that you frequently use certain tags in combination (for example, Bold and Italic), or if you are re-using certain text in many documents, you can create a user-defined tag that will automatically insert multiple tags around the text you highlight or insert the contents of a file at the insertion point (see Chapter 8, "Special Characters and Custom Tags.")
Nearly all HTML documents contain "hyperlinks" (hypertext links), which are usually referred to simply as "links." Links are the hallmark of the World Wide Web and of intranets, enabling users to "jump" from one document to another, or from one section of a document to a different section in the same document.
When you view HTML documents in a browser, links are usually indicated by underlined text; usually the underlined text is displayed in a contrasting color.
To add a hyperlink to a different document:
1 In the document window, select or enter the text that you want to be underlined on the page (that is, the text that you want readers to click on).
Note
You can also use an image as the link instead of text. See "Using Images as Hyperlinks".
2 Click the HyperLink button in the user toolbar.
The Hyperlink dialog displays:
3 Enter the following information as desired. Only HREF is required.
|
Field |
Description |
|
HREF |
Enter the URL for the document you want the link to open. Optionally you can click the URL button to browse for the URL or file. |
|
Field |
Description |
|
Target |
"Target" is the name of the window in which you want the linked document to appear. If the window is not already open, the browser will open and name a new window for you. If you are using a window with frames and the frames are named, you can use this field to make the linked document display in a specific frame by entering the frame name here. |
|
Name |
If you are defining an anchor that other links can point to, enter the name you want to use for this anchor. |
|
Title |
For use with the <\LINK> tag. The Title describes the linked document, for information only (not displayed). |
|
Rel |
For use with the <LINK> tag. The drop-down list contains the available relationships from the current document to the linked document. |
|
Rev |
For use with the <LINK> tag. The drop-down list contains the available relationships from the linked document to the current document. |
4 Click OK.
The inserted HTML will look like this:
<A HREF="URL">Text to be underlined</A>
The Easy Links feature allows you to add a hyperlink to a specific file simply by picking the file from a list and dragging it into the HTML document.
To use Easy Links:
1 In the HTML document, place the insertion point where you want the link to be inserted.
2 Choose Easy Links from the Tools menu.
The Easy Links dialog displays:
3 Select the types of file you want to appear in the file list (HTML only, All Files, HTML and Sound files, and so on) by clicking the applicable check boxes in the lower right section of the dialog.
4 Use the drive selection drop-down list and the directory tree on the right side of the dialog to navigate to the location of the file you want to create a link to. The files in that directory that match the types of files you selected in step 3 are listed on the left side of the dialog.
5 Drag and drop the file you want into the HTML document.
For example, if you drag a file named index.html from a local directory named c:\wwwroot into the HTML document, the following HTML tags are inserted:
<A HREF="c:/wwwroot/index.html"></A>
Be sure to remove or adjust the path information, if necessary, to avoid the problem of browsers not being able to locate the file (See "Relative Addressing".).
Usually a link to another document displays the top of the target document in the browser window. However, you can also create a link to any location in a document. To jump to some location in a document other than the top requires you to define the places the reader can jump to; these are called anchors. Once anchors are defined, you can create a link to an anchor, just as you create a link to another document. Anchors can also be used to create links from one section of a document to another section of the same document.
An anchor has the following structure:
<A NAME=anchorname></A>
Note
If the anchor Name is more than one word, use double quotation marks at the beginning and end.
A link to an anchor in the same document has the following structure:
<A HREF=#anchorname>This is underlined</A>
A link to an anchor in a different document has the following structure, where URL is the URL of the document containing the anchor:
<A HREF=URL#anchorname>This is underlined</A>
1 In the document window, select the text that you want readers to see at the top of the browser window when they click on a link to this anchor. Typically you would select a section heading.
2
Click the HyperLink button in the user toolbar.
The Hyperlink dialog displays.
3 In the NAME field, enter a name for the anchor.
4 Click OK.
To create a link to an anchor:
1 Put the insertion point where you want the link to appear in the HTML document.
2
Click the HyperLink button in the user toolbar. The Hyperlink dialog displays.
3 In the HREF field, enter # and the Name of the anchor you want to link to, with no spaces. If the anchor is in a different document, enter the URL of the document followed by # and the anchor Name, with no spaces.
For example, to create a link to an anchor named #hereiam in a document named findme.html (in the same directory as the current document), you would enter findme.html#hereiam in the HREF field.
You can add image files to your document from your local drive or a Web page. The most popular formats for image files in HTML documents are GIF and JPG (or JPEG). However, TIF and ART files can also be used.
A typical image tag might look like this:
<IMG SRC="myphoto.gif">
<IMG> is actually the tag, while SRC= indicates the source file that contains the image.
If you add an image tag to a page, but the image does not appear in your browser, it is most likely because the browser cannot find the image file. The following applies to what you enter as the SRC attribute of an image. It applies as well to what you enter as the HREF attribute of a link.
Although you can use a pathname in an image tag, it is not recommended. Consider the following example:
<IMG SRC="c:\images\myimage.gif">
This will work fine as long as the page is on your local hard drive, but as soon as you move the page to your Internet server, no browser will be able to locate the image file. Similarly, the following example will work adequately on an Internet server, but not on your local hard drive:
<IMG SRC="http://www.myserver.com/
myimage.gif">
The solution to this is to always use "relative addressing" in your references to files: Whenever possible, put the image files in the same directory as the HTML file. Then you need include only the filename after such attributes as HREF= and SRC=.
If it is not acceptable to put image files in the same directory as the HTML file, put them in a subdirectory of the directory that contains your HTML file. Then the address of the image file can be relative to the address of the HTML document itself. For example, the following image tag will work fine on both your local hard drive and your Internet server, as long as the image file is in the same subdirectory in both locations:
<IMG SRC="/images/myimage.gif">
To add an image to a document:
1 Place the insertion point in the HTML document where you want the image to appear.
2
Click the Image button on the user toolbar, or choose Image from the Insert menu. The Image dialog displays.
3 Enter the following information, as applicable:
|
Field |
Description |
|
Enter the filename of the image you want to put in the document. You can use the URL button to browse for the file. |
|
|
Link To |
If you want the image to be a link to another document, enter the filename of the document here. You can use the URL button to browse for the file. |
|
LowSrc |
(Netscape) If you have a smaller (lower-resolution) image file that you want to use as a link to the larger image file, enter the filename of the smaller file here. |
|
Field |
Description |
|
X-AltSrc |
To insert an image that uses the Johnson-Grace ART image compression standard, enter the filename of the image here. |
|
Alt text |
Enter the text that you want to appear in place of a graphic whenever a user has turned off graphic imaging, or if a browser is being used that cannot display graphics. This allows users to see that a graphic exists on the page, even though the graphic itself does not display. The text you enter here is added to the ALT= attribute of the image tag. |
|
Alignment |
This option determines how the image aligns with text elements that are on the same line in the page. Select an option from the drop-down list. (See "Image" in the online Help for an explanation of each option.) |
|
Clear |
Text normally wraps around left-aligned and right-aligned images. However, with this option you can force text to start on the first empty line below an image on the left margin (LEFT), on the right margin (RIGHT), or on either margin (ALL). |
|
HSpace |
If you want to add blank space to the left and right of the image, enter the amount of space here (in pixels). |
|
VSpace |
If you want to add blank space above and below the image, enter the amount of space here (in pixels). |
|
Width |
Normally a browser calculates the dimensions of a image before displaying it. If you specify the width of the image here, (in pixels), the viewer of the document will not have to wait for the image’s size to be calculated. |
|
Height |
As with the Width attribute, you can specify the height of the image (in pixels). |
|
Field |
Description |
|
Border |
If you want to change the default size of the colored border around the image, enter the desired width (in pixels). Tip: If the image is being used as a link, do not make the border 0 units. |
|
Units |
This optional attribute specifies the units for the width and height attributes. It is either pixels (the default) or ens (half the point size). |
|
Use Mapping |
If you are inserting an image map created with WebStudio’s Web Map, select this check box. (You can also create an image map in WebEdit PRO. See Map Builder below.) |
|
Map Location |
If you selected the Use Mapping check box, enter the location of the image map. |
|
Map Builder |
You can create an image map in WebEdit PRO by clicking Map Builder. Map Builder is similar to WebStudio’s Web Map. However, Map Builder only lets you create rectangular clickable areas. Web Map lets you create different shapes as clickable areas. |
|
DynSrc |
Specifies the address of a video clip or VRML world. You can specify an image file that will display if the viewer’s browser does not support inline video. (See "AVI Videos" in the online Help for examples.) |
|
Start |
For a video clip, you can specify the action that starts the playback of the file: FILEOPEN means start playing as soon as the file is done opening (default). MOUSEOVER means start playing when the user moves the mouse cursor over the clip. (See "AVI Videos" in the online Help for examples.) |
|
Field |
Description |
|
Show Controls |
Select this option if you want playback controls (Start, Stop, etc.) to de displayed with the video. |
|
Loop |
Specifies how many times a video clip will loop when activated. (See "AVI Videos" in the online Help for examples.) |
|
Infinite Loop |
If this option is selected, the video clip will loop until stopped by the viewer. |
|
Loop Delay |
If you have selected a Loop attribute, you can specify the number of seconds to wait between loops. |
Tip
As a courtesy to your users, you should indicate the size of an image file, sound file, or video file so users are forewarned should they decide to display, play, or download it.