HTML, XHTML and CSS For Dummies
Book image
Explore Book Buy On Amazon

If you’re building a hypertext link to an external Web page in Notepad, you should know it’s built a bit like an iceberg: It has a visible part (the link text, which appears as blue, underlined text by default) and an invisible-but-impressive part that’s normally hidden (the specification of just which file clicking on the link will lead to). The visible part is the friendly, appealing bit; the invisible part will work for you too, but only if it’s constructed just right.

Text in an HTML document is made into the starting point of a hypertext link by surrounding it with the and tags, with a standing for anchor. The link’s two ends, the start that the user clicks on and the page that appears as a result, are both called anchors.

The destination of the link is called the hypertext reference, or href for short. So a link to another Web page in HTML looks like this:

Make your own cider with <a href="http://www.ciderspices.com">cider spices</a>.

Follow these steps to create a simple hypertext link in Notepad:

  1. Find the text that you want to make a link.

  2. Surround the text with the and tags.

    Getting the end tag in right away will prevent you from forgetting it.

  3. Enter the destination Web address, or URL, by adding href=url to the tag (where url is a full Web address).

    Enter the full Web address, including the preceding http://, and check whether the address includes www. or not; a few Web addresses don’t. Also make certain that the site ending really is .com, .org, .co.uk, or whatever it’s supposed to be.

    In up-to-date Web browsers, you can open an additional tab to check your Web address while leaving the first tab for previewing your Web page.

  4. Enter a title for the link by adding the title attribute.

    The title for the link is text that, in some browsers, appears when the user puts the mouse pointer over the link.

    If you leave this area blank, the URL will appear as the title. Often the URL is self-explanatory, as in a link to a Wikipedia entry. You may wish to enter the URL, without http://, as the link title to make it a bit more comprehensible for the user.

    If the URL is long or confusing, enter a simple title that describes the page. For instance, here’s the long-winded URL for HTML, XHTML & CSS For Dummies, 6th Edition on the For Dummies site:

    https://www.dummies.com/WileyCDA/DummiesTitle/HTML-XHTML-CSS-For-Dummies-6th-Edition.productCd-047023847X.html

    Using a tool tip — HTML, XHTML, & CSS For Dummies on dummies.com — saves your visitors some hassle and you some screen real estate.

    Being able to see the URL or title when you mouse over a link is very good for usability. However, in Internet Explorer, the URL or title appears in a strip at the bottom of the screen called the Status Bar which, in recent versions of IE, is turned off by default. There’s not much you can do about this for your users, but at least you can turn on the Status Bar yourself — choose View→Status Bar in Internet Explorer to turn it on.

  5. Save the Web page to your hard drive and open it in a Web browser to preview and test the link.

    The text will appear as link text, underlined and in blue. Clicking on it should bring up the target page.

    Your text appears as a link.
    Your text appears as a link.

About This Article

This article can be found in the category: