HTML (English) 09
LINKS
The tag creates a hyperlink, which lets you jump from one page to another, is a bit more complex than those you’ve seen so far. Here’s an example:
<A HREF=”http ://www.mcp.com/waite”>select me to see the Waite group home page </A>
The tag used here, the <A> tag, specifies the address that is the destination of the hyperlink. The HREF attribute in the tag introduces the actual URL, which is placed within quotes so that the browser won’t become confused by any special characters contained in the URL. The text between the <A> tag and the </A> tag will appear in the browser window in some way that distinguishes it to the user as a hyperlink. Several popular browsers give hyperlinks a special color and underline them so they’re very apparent to the user.
Let’s add a hyperlink to the example web page from the previous section .If you don’t have web access, it won’t do much good to add a hyperlink pointing to the home page of Waite group press. So, let’s create a second page to which you can jump. Listing 1-8 shows the change you should make to the previous listing. Than save the result as links. Html. Listing 1-9 shows the new page, which you type and save as morel inks. Html. Now, try the hyperlinks. Go to the menu page, and then go back to jumbo’s home page. Figures 1-27 and 1-28 show how you can surf your new mini web by using the hyperlinks.
Listing 1-8 Links. Html
<HTML>
<!-- Listing 1-8 jumbo gets a menu -->
<HEAD>
<TITLE> jumbo’s jungle java joint – Home page</TITLE>
<HEAD.
<BODY>
<H1>Jumbo’s Jungle Java Joint </H1><HR>
<H2>Welcome to Jumbo’s </H2>
<HR>
<A/ HREF=”MoreLinks.html”>
<H3>Our Primo Daily Specials </H3>
</A>
<HR>
<H4>Business Class Specials </H4>
<!--These are the preferred tags over <B> <I> and <U> -->
At Jumbo’s we <EM>emphasize</EM> making our customers
Happy,even if it takes a <STRONG>strong</STRONG> cup o’ joe!
<HR>
<H5>All-You-Can-Drink Specials </H5>
After a single cup, you’ll agree,
You’ve had all you can drink.
<HR>
<H6>Jumbo’s Complaint Department</H6>
if you wish to complain, go elsewhere! <BR>
Jumbo’s is a negative-free zone!
</BODY>
</HTML>
Listing 1-9 MoreLinks.html
<HTML>
<!—Listing 1.9 Jumbo gets a menu -->
<HEAD>
<TITLE> Jumbo’s Jungle Java Joint – Primo Menu Page</TITLE>
</HEAD>
<BODY>
<H1> The Place for Premium Java </H1>
<HR>
The special today is the <B>bold</B> Brazilian Roast<BR>
Or, you may prefer our <I>Italian</I> Espresso!<BR>
At least you’ll never wait <U>on line</U>
<HR>
<A HREF=”Listing1-08.html”>Go back to Jumbo’s home page </A>
</BODY>
</HTML>
RELATIVEURLS
The URLs you used in Jumbo’s pages looked a little different from the ones you’ve seen so far. What’s missing? If you look closely, you’ll see that the URL used in Listing 1-9 has no protocol or host portion. This is what’s called a relative URL. Relative URLs make it easier to build a web in two ways. First, they’re shorter than full or absolute URLs. Second, they make it possible to move a web form one directory or system to another without having to change all the URLs to point new locations.
When a browser encounters a relative URL, it simply supplies the missing portions of the URL by using the corresponding portions of the URL for the current location, even when a relative URL was used to get there.
This is why moving a page to another part of your web is less likely to disrupt relative URLs, than absolute URLs. Because relative URLs are understood relative to the location of the current page, moving the page that contains them won’t mess them up, as long as they remain in the same relative position with respect to the referencing page.
