If you’re creating a page for the Web, chances are you’ll want it to point to other web pages and resources, whether on your own site or someone else. Linking, after all, is what the Web is all about. In this chapter, we’ll look at the markup that makes links work: to other sites, to your own site, and within a page. There is one element that makes linking possible: the anchor (a).
<a>...</a>
Anchor element (hypertext link)
To make a selection of text a link, simply wrap it in opening and closing <a>...</a> tags and use the href attribute to provide the URL of the target page. The content of the anchor element becomes the hypertext link. Here is
an example that creates a link to the O’Reilly Media website
<a href="http://www.oreilly.com">Go to the O'Reilly Media site</a>
To make an image a link, simply put the img element in the anchor element:
<a href="http://www.oreilly.com"><img src="orm.gif" alt="O'Reilly
tarsier logo"></a>
Nearly all graphical browsers display linked text as blue and underlined by default. Some older browsers put a blue border around linked images, but most current ones do not. Visited links generally display in purple. User scan change these colors in their browser preferences, and, of course, you can change the appearance of links for your sites using style sheets
warning: One word of caution: if you choose to change your link colors, keep them consistent
throughout your site so as not to confuse your users.
When a user clicks or taps on the linked text or image, the page you specifyin the anchor element loads in the browser window.
The simplified structure of the anchor element is:
<a href="url">linked textor element</a>
Starting in HTML5, you can put any element in an a element—even block elements! In the HTML 4.01 spec and earlier, the anchor element could be used for inline content only.
The href Attribute in a link element
You’ll need to tell the browser which document to link to, right? The href
(hypertext reference) attribute provides the address of the page or resource
(its URL) to the browser. The URL must always appear in quotation marks.
Most of the time you’ll point to other HTML documents; however, you can
also point to other web resources, such as images, audio, and video files.
Because there’s not much to slapping anchor tags around some content, the
real trick to linking comes in getting the URL correct.
There are two ways to specify the URL:
Absolute URLs provide the full URL for the document, including the
protocol (http://), the domain name, and the pathname as necessary.
You need to use an absolute URL when pointing to a document out on
the Web (i.e., not on your own server).
Example: href="http://www.oreilly.com/"
Sometimes, when the page you’re linking to has a long URL pathname,
the link can end up looking pretty confusing (Figure 6-2). Just keep in
mind that the structure is still a simple container element with one attribute.
Don’t let the pathname intimidate you.
Relative URLs describe the pathname to a file relative to the current
document. Relative URLs can be used when you are linking to another
document on your own site (i.e., on the same server). It doesn’t require
the protocol or domain name—just the pathname.
Example: href="recipes/index.html"
Linking to Pages on the Web
Many times, you’ll want to create a link to a page that you’ve found onthe Web. This is known as an “external” link because it is going to a pageoutside of your own server or site. To make an external link, you need toprovide the absolute URL, beginning with http:// (the protocol). This tells
the browser, “Go out on the Web and get the following document.”
I want to add some external links to the Jen’s Kitchen home page (Figure 6-3).
First, I’ll link the list item “The Food Network” to the site www.foodtv.com. I
marked up the link text in an anchor element by adding opening and closing
anchor tags. Notice that I’ve added the anchor tags inside the list item (li)
element. That’s because only li elements are permitted to be children of a ul
element; placing an a element directly inside the ul would be invalid HTML.
<li><a>The Food Network</a></li>
Next, I add the href attribute with the complete URL for the site.
<li><a href="http://www.foodnetwork.com">The Food Network</a></li>
And voila! That’s all there is to it. Now “The Food Network” will appear as
a link and will take my visitors to that site when they click or tap it.
Linking Within Your Own Site
A large portion of the linking you’ll do will be between pages of your own
site: from the home page to section pages, from section pages to content
pages, and so on. In these cases, you can use a relative URL—one that calls
for a page on your own server.
Without “http://”, the browser looks on the current server for the linked
document. A pathname, the notation used to point to a particular file or
directory, tells the browser where to find the file. Web pathnames follow the
Unix convention of separating directory and filenames with forward slashes
(/). A relative pathname describes how to get to the linked document starting
from the location of the current document.
Linking within a directory
The most straightforward relative URL points to another file within the same
directory. When link to a file in the same directory, you only need to provide
the name of the file (its filename). When the URL is a single filename, the
server looks in the current directory (that is, the directory that contains the
document with the link) for the file.
In this example, I want to make a link from my home page (index.html) to
a general information page (about.html). Both files are in the same directory
(jenskitchen). So from my home page, I can make a link to the information
page by simply providing its filename in the URL (Figure 6-5):
<a href="about.html">About the site...</a>
note: A link to just the filename indicates the linked file is in the same directory as the current document.
Linking to a lower directory
But what if the files aren’t in the same directory? You have to give the
browser directions by including the pathname in the URL. Let’s see how
this works.
Getting back to our example, my recipe files are stored in a subdirectory
called recipes. I want to make a link from index.html to a file in the recipes
directory called salmon.html. The pathname in the URL tells the browser to
look in the current directory for a directory called recipes, and then look for
the file salmon.html :
<li><a href="recipes/salmon.html">Garlic Salmon</a></li>
Directories are separated by forward slashes. The resulting anchor tag tells
the browser, “Look in the current directory for a directory called recipes.
Note: When linking to a file in a lower directory, the path-name must contain the
names of the sub-directories you go through to get to the file.
Site root relative path names
All websites have a root directory, which is the directory that contains all the directories and files for the site. So far, all of the path-names we’ve looked at are relative to the document with the link. Another way to write a relative path-name is to start at the root directory and list the sub-directory names until you get to the file you want to link to. This kind of path-name is known
as site root relative.
It’s the same for images
The src attribute in the img element works the same as the href attribute in
anchors when it comes to specifying URLs. Since you’ll most likely be using
images from your own server, the src attributes within your image elements
will be set to relative URLs.
Let’s look at a few examples from the Jen’s Kitchen site. First, to add an
image to the index.html page, the markup would be:
<img src="images/jenskitchen.gif" alt="">
The URL says, “Look in the current directory (jenskitchen) for the images
directory; in there you will find jenskitchen.gif.”
<a>...</a>
Anchor element (hypertext link)
To make a selection of text a link, simply wrap it in opening and closing <a>...</a> tags and use the href attribute to provide the URL of the target page. The content of the anchor element becomes the hypertext link. Here is
an example that creates a link to the O’Reilly Media website
<a href="http://www.oreilly.com">Go to the O'Reilly Media site</a>
To make an image a link, simply put the img element in the anchor element:
<a href="http://www.oreilly.com"><img src="orm.gif" alt="O'Reilly
tarsier logo"></a>
Nearly all graphical browsers display linked text as blue and underlined by default. Some older browsers put a blue border around linked images, but most current ones do not. Visited links generally display in purple. User scan change these colors in their browser preferences, and, of course, you can change the appearance of links for your sites using style sheets
warning: One word of caution: if you choose to change your link colors, keep them consistent
throughout your site so as not to confuse your users.
When a user clicks or taps on the linked text or image, the page you specifyin the anchor element loads in the browser window.
The simplified structure of the anchor element is:
<a href="url">linked textor element</a>
Starting in HTML5, you can put any element in an a element—even block elements! In the HTML 4.01 spec and earlier, the anchor element could be used for inline content only.
The href Attribute in a link element
You’ll need to tell the browser which document to link to, right? The href
(hypertext reference) attribute provides the address of the page or resource
(its URL) to the browser. The URL must always appear in quotation marks.
Most of the time you’ll point to other HTML documents; however, you can
also point to other web resources, such as images, audio, and video files.
Because there’s not much to slapping anchor tags around some content, the
real trick to linking comes in getting the URL correct.
There are two ways to specify the URL:
Absolute URLs provide the full URL for the document, including the
protocol (http://), the domain name, and the pathname as necessary.
You need to use an absolute URL when pointing to a document out on
the Web (i.e., not on your own server).
Example: href="http://www.oreilly.com/"
Sometimes, when the page you’re linking to has a long URL pathname,
the link can end up looking pretty confusing (Figure 6-2). Just keep in
mind that the structure is still a simple container element with one attribute.
Don’t let the pathname intimidate you.
Relative URLs describe the pathname to a file relative to the current
document. Relative URLs can be used when you are linking to another
document on your own site (i.e., on the same server). It doesn’t require
the protocol or domain name—just the pathname.
Example: href="recipes/index.html"
Linking to Pages on the Web
Many times, you’ll want to create a link to a page that you’ve found onthe Web. This is known as an “external” link because it is going to a pageoutside of your own server or site. To make an external link, you need toprovide the absolute URL, beginning with http:// (the protocol). This tells
the browser, “Go out on the Web and get the following document.”
I want to add some external links to the Jen’s Kitchen home page (Figure 6-3).
First, I’ll link the list item “The Food Network” to the site www.foodtv.com. I
marked up the link text in an anchor element by adding opening and closing
anchor tags. Notice that I’ve added the anchor tags inside the list item (li)
element. That’s because only li elements are permitted to be children of a ul
element; placing an a element directly inside the ul would be invalid HTML.
<li><a>The Food Network</a></li>
Next, I add the href attribute with the complete URL for the site.
<li><a href="http://www.foodnetwork.com">The Food Network</a></li>
And voila! That’s all there is to it. Now “The Food Network” will appear as
a link and will take my visitors to that site when they click or tap it.
Linking Within Your Own Site
A large portion of the linking you’ll do will be between pages of your own
site: from the home page to section pages, from section pages to content
pages, and so on. In these cases, you can use a relative URL—one that calls
for a page on your own server.
Without “http://”, the browser looks on the current server for the linked
document. A pathname, the notation used to point to a particular file or
directory, tells the browser where to find the file. Web pathnames follow the
Unix convention of separating directory and filenames with forward slashes
(/). A relative pathname describes how to get to the linked document starting
from the location of the current document.
Linking within a directory
The most straightforward relative URL points to another file within the same
directory. When link to a file in the same directory, you only need to provide
the name of the file (its filename). When the URL is a single filename, the
server looks in the current directory (that is, the directory that contains the
document with the link) for the file.
In this example, I want to make a link from my home page (index.html) to
a general information page (about.html). Both files are in the same directory
(jenskitchen). So from my home page, I can make a link to the information
page by simply providing its filename in the URL (Figure 6-5):
<a href="about.html">About the site...</a>
note: A link to just the filename indicates the linked file is in the same directory as the current document.
Linking to a lower directory
But what if the files aren’t in the same directory? You have to give the
browser directions by including the pathname in the URL. Let’s see how
this works.
Getting back to our example, my recipe files are stored in a subdirectory
called recipes. I want to make a link from index.html to a file in the recipes
directory called salmon.html. The pathname in the URL tells the browser to
look in the current directory for a directory called recipes, and then look for
the file salmon.html :
<li><a href="recipes/salmon.html">Garlic Salmon</a></li>
Directories are separated by forward slashes. The resulting anchor tag tells
the browser, “Look in the current directory for a directory called recipes.
Note: When linking to a file in a lower directory, the path-name must contain the
names of the sub-directories you go through to get to the file.
Site root relative path names
All websites have a root directory, which is the directory that contains all the directories and files for the site. So far, all of the path-names we’ve looked at are relative to the document with the link. Another way to write a relative path-name is to start at the root directory and list the sub-directory names until you get to the file you want to link to. This kind of path-name is known
as site root relative.
It’s the same for images
The src attribute in the img element works the same as the href attribute in
anchors when it comes to specifying URLs. Since you’ll most likely be using
images from your own server, the src attributes within your image elements
will be set to relative URLs.
Let’s look at a few examples from the Jen’s Kitchen site. First, to add an
image to the index.html page, the markup would be:
<img src="images/jenskitchen.gif" alt="">
The URL says, “Look in the current directory (jenskitchen) for the images
directory; in there you will find jenskitchen.gif.”
0 comments:
Post a Comment