Monday, December 10, 2007

Making Links and Editing HTML

What's in a Link?

Every link has two parts. Creating links is a simple matter of choosing a spot on the page for the link and then supplying both parts:

  • The link text— the actual text (or graphic) that appears on the page to represent the link. When a visitor activates a link, he or she clicks the link text to activate the unseen URL underneath.

  • The link location— the URL describing the page, file, or Internet service to be accessed when the link is activated.


What's Linkable?

A link can point to any resource that can be expressed in a URL or to local files (files residing on the same server as the page containing the link). That includes not only remote Web pages and other pages and files residing on the same Web server as your document, but also newsgroups and articles within them, email messages, and FTP servers. In your travels on the Web, you've already encountered links pointing to all these types of resources.

A link can point to a specific location within a Web page—even to a specific location within the same page containing the link. For example, in a long Web page, each entry in a table of contents can be a link pointing to a specific section of the page. This concept allows visitors to navigate quickly and easily within the page. The spots within pages to which a link can point are anchors.

Web Pages

Web pages are the most commonly linked resource, and for good reason: You can bet that anybody viewing your Web page can view any other Web page, so links to Web pages are a reliable way to provide information. Linking to Web pages also allows your visitors to apply a consistent set of navigation techniques.

URLs pointing to Web pages always begin with the protocol designator http://. The protocol is followed by the Web server hostname, the directory path to the page file, and the actual HTML file of the page:

http://hostname/pathname/file.HTM

In some cases, you can omit the filename. Some Web servers have default files they display automatically whenever someone accesses the server or a directory without specifying a filename. For example,

http://www.mcp.com/

accesses the default page for the server www.mcp.com, and

http://www.mcp.com/sams/

accesses the default page for the directory sams on the server www.mcp.com.

Note that the preceding directory examples end in a slash. You should always use a slash to end an HTTP URL that does not end with a filename; the slash instructs the server to access the default file (usually INDEX.HTML). Some servers can still access the default file if you leave off the slash, but some don't. In a link, use the slash, for safety's sake.

Finally, always be careful to follow the exact capitalization of the URL as it would appear in the Navigator Location box when you view the page. Many Web servers are case sensitive and don't recognize the directory or filename if it is not properly capitalized.


Anchors in Pages

Web pages can contain predefined locations to which links can point. These spots are called anchors in HTML (and are created with the tag—A for anchor).

You can add anchors to your own Web pages and then link to those anchors from elsewhere in the same page or from other pages you create. In addition, you can create links to point to any existing anchors in other pages on the Web.

When you create an anchor, give the anchor a name. You create links to anchors as you do to a Web page, with one difference: You add the name of the anchor to the URL you enter for the link.


Local Files

Just as you can link to resources on any server, you can link to resources residing on the same server as your Web document. Obviously, you would do this when linking among the pages of a multipage presentation. But you might also choose to link to anything on your local Web server that relates to the topic of your page, such as another Web document or a text file containing related information.


Creating New Links

Creating a new hyperlink is a two-part job:

  1. First, you create the link text, the text that a visitor would click to activate the link.

  2. Next, you attach the URL to the link text.

The following example shows how easy it is to create a new link to a Web page:

  1. Type and format the text that will serve as the link text




  2. Select the text.

    Although you can apply character formatting (such as fonts or italics) to the link text you create, don't do it. Just apply the paragraph style you want to use and leave it at that.

    Browsers usually display link text with unique formatting (usually underlining and a blue color) to help visitors instantly identify links on a page. You don't want your character formatting to make finding links tricky for your visitors by changing the link text formatting they're accustomed to seeing.

  3. Click the Link button on the Standard toolbar.

  4. In the box labeled Link To, type the complete URL. Be sure to include the http:// part at the beginning. Then click OK.


Reading an HTML File

"Understanding Web Authoring," that an HTML source file consists of four basic elements:

  • The text to be displayed on the page

  • The filenames of inline images

  • The URLs or filenames for links (and the text or image filenames for the link source)

  • HTML tags and attributes, which tell browsers which lines are images, links, headings, or normal paragraphs, for example


Viewing the HTML Source Code of a Document

A great way to learn more about HTML is to study the source code for Web pages. You can study the source code for pages you view on the Web or look at the underlying source code for pages you create in Composer. You can even view the source code for a page you're editing, make a small change with the Composer menus or toolbar buttons, and then view the source code again to see how the HTML code has been changed. Give it a try!

To view the HTML source for a page you're looking at:

  • In Internet Explorer, choose View, Source.

  • In Netscape, choose View, Page Source.


Using Composer to Insert an HTML Tag

When you've built a document in Composer but need to add a tag here or there for which Composer offers no button or menu, the Composer Insert HTML Tag function allows you to do so conveniently, without having to fuss with the whole HTML source file.

  1. Click in the page at the spot where you want the object or formatting applied by the tag to go.

  2. Choose Insert, HTML Tag.

  3. Type your entry, and then click OK


No comments: