Basic Of HTML & XHTML Lesson 10

Kinds of URLs

Intertwining Web pages within a site can become tedious without an understanding of Uniform Resource Locators (URLs) specifications.

After completing this lesson, you should be able to:

Define several types of commonly used URLs, such as HTTP, FTP, and mailto
Define advanced URL types such as Usenet and File




HTTP

HTTP URLs are by far the most common type because they point to other documents on the Web. HTTP is the protocol that World Wide Web servers use to transfer information to browsers. HTTP URLs follow this basic URL form:




If the URL ends in a slash, the last part of the URL is considered a directory name. The file that you get using a URL of this type is the default file for that directory as defined by the HTTP server, usually a file called index.html. (If the Web page you're designing is the top-level file for all of a directory's files, calling it index.html is a good idea.)

You also can specify the filename directly in the URL. In this case, the file at the end of the URL is the one that is loaded, as in the following examples:






Using HTTP URLs such as the following, where mycompany is a directory, is also usually acceptable. In this case, because mycompany is a directory, this URL should have a slash at the end:

Most Web servers can figure out that you meant this to be a directory and redirect to the appropriate file. Some older servers, however, might have difficulties resolving this URL, so you should always identify directories and files explicitly and make sure that a default file is available if you're indicating a directory.




Anonymous FTP

FTP URLs are used to point to files located on FTP servers. Anonymous FTP servers can log you in using anonymous as the login ID and your email address as the password. FTP URLs also follow the standard URL form, as shown in the following examples:

Because you can retrieve either a file or a directory list with FTP, the restrictions on whether you need a trailing slash at the end of the URL aren't the same as with HTTP. The first URL here retrieves a listing of all the files in the mycompany directory. The second URL retrieves and parses the file homepage.html in the mycompany directory.


NOTE




Although your browser uses FTP to fetch the file, if it's an HTML file, your browser will display it just as it would were it fetched using the HTTP protocol. Web browsers don't care how they get files. As long as they can recognize the file as HTML, either because the server explicitly says that the file is HTML or by the file's extension, browsers will parse and display that file as an HTML file.

Browsers can either display the file if they know what kind of file it is or just save the file to disk.





Non-Anonymous FTP
All the FTP URLs in the preceding section are used for anonymous FTP servers. You also can specify an FTP URL for named accounts on an FTP server. In this form of the URL, the username part is your login ID on the server, and password is that account's password:

Note that no attempt is made to hide the password in the URL. Be very careful that no one is watching you when you're using URLs of this form — and don't put them into links that someone else can find!


The URLs that you request might be cached or logged somewhere, either on your local machine or on a proxy server between you and the site you're connecting to. For that reason, it's probably wise to avoid using this type of non-anonymous FTP URL altogether.




Mailto

The mailto URL is used to send electronic mail. If the browser supports mailto URLs, when a link that contains one is selected the browser will prompt you for a subject and the body of the mail message, and send that message to the appropriate address when you're done. The mailto URL is different from the standard URL form:

Depending on how the user's browser and email client are configured, mailto links might not work for them.

If your email address includes a percent sign (%), you'll have to use the escape character %25 instead. Percent signs are special characters to URLs.




Unlike the other URLs, the mailto URL works strictly on the client side. The mailto link just tells the browser to compose an email message to the specified address. It's up to the browser to figure out how that should happen.

Most browsers will also let you add a default subject to the email by including it in the URL. When the user clicks on the link, most browsers will automatically stick Sales Report in the subject of the message.




You can also include more than one email address in a mailto URL along with cc and bcc email addresses:





Usenet Newsgroups

Usenet news URLs have one of two forms:

news:name_of_newsgroup — This is used to read an entire newsgroup. If your browser supports Usenet news URLs (either directly or through a newsreader), it'll provide you with a list of available articles in that newsgroup.

news:message-id — This enables you to retrieve a specific news article. Each news article has a unique ID called a message ID, which usually is something like



To use a message ID in a URL, remove the angle brackets and begin the URL with news:





Both forms of URL assume that you're reading news from an NNTP server, and they can be used only if you have defined an NNTP server somewhere in an environment variable or preferences file for your browser. Therefore, news URLs are most useful simply for reading specific news articles locally, not necessarily for using in links in pages.

NOTE
News URLs, like mail URLs, might not be supported by all browsers.



File

File URLs are intended to reference files contained on the local disk. In other words, they refer to files located on the same system as the browser. For local files, file URLs take one of these two forms: an empty hostname (three slashes rather than two) or with the hostname as localhost. Depending on your browser, one or the other will usually work:





File URLs are similar to FTP URLs. In fact, if the host part of a file URL is not empty or localhost, your browser will try to find the given file by using FTP. Both of the following URLs result in the same file being loaded the same way:

Probably the best use of file URLs is in startup pages for your browser (which are also called home pages). In this instance, because you'll almost always be referring to a local file, using a file URL makes sense.




The problem with file URLs is that they reference local files, where local means on the same system as the browser pointing to the file — not the same system from which the page was retrieved!

If you use file URLs as links in your page, and someone from elsewhere on the Internet encounters your page and tries to follow those links, that person's browser will attempt to find the file on their local disk (and generally will fail).

Also, because file URLs use the absolute pathname to the file, if you use file URLs in your page you can't move that page elsewhere on the system or to any other system.




If your intention is to refer to files that are on the same file system or directory as the current page, use relative pathnames rather than file URLs.

With relative pathnames for local files and other URLs for remote files, you shouldn't need to use a file URL at all.

Basic Of HTML & XHTML Lesson 9

Parts of URLs

Whenever you venture out to the Web, it's inevitable that you'll encounter URLs. They are the street addresses of the Internet.

After completing this lesson, you should be able to:

Dissect a basic URL into three main sections
Create URLs that employ special characters




Most Uniform Resource Locators (URLs) contain three parts: the protocol, the hostname, and the directory and filename. The protocol is the way in which the page is accessed; that is, the means of communication your browser uses to get the file. If the browser uses HTTP to get to the file, the protocol part is http.

If the browser uses FTP, the protocol is ftp. The protocol matches an information server that must be installed on the system for it to work. You can't use an FTP URL on a machine that does not have an FTP server installed, for example.




The hostname is the Internet system on which the information is stored. You can have the same hostname but have different URLs with different protocols, such as http://mysystem.com or ftp://mysystem.com.




Finally, the directory is the location of the file or other form of information on the host. The directory can be an actual directory and filename, or it can be another indicator that the protocol uses to refer to the location of that information. Gopher directories, for example, aren't explicit directories.




Special Characters in URLs

A special character in a URL is anything that is not an upper- or lowercase letter, a number (0–9), or one of the following symbols: dollar sign ($), dash (-), underscore (_), period (.), or plus sign (+). You might need to specify any other characters by using special URL escape codes to keep them from being interpreted as parts of the URL itself.

URL escape codes are indicated by a percent sign (%) and a two-character hexadecimal symbol from the ISO-Latin-1 character set (a superset of standard ASCII). For example, %20 is a space, %3f is a question mark, and %2f is a slash.





Suppose that you have a directory named All My Files. The first URL you write to link to this directory is:

Because the spaces are considered special characters to the URL some browsers might have problems with them and not recognize the pathname correctly.





For full compatibility with all browsers, use %20 to replace spaces in file names.

Most of the time, if you make sure that your file and directory names are short and use only alphanumeric characters, you won't need to include special characters in URLs. Keep this point in mind as you write your own pages.

Basic Of HTML & XHTML Lesson 8

Links to Other Documents on the Web

An abundance of content for your Web site can lead to page and site overcrowding. Determining a way to navigate between pages, or just within a single page, is imperative.

After completing this lesson, you should be able to:

Describe the purpose of a link menu
Explain the functions of anchor tags in Web pages



Creating a Link Menu

Link menus are links on your Web page that are arranged in list form or in some other short, easy-to-read, and easy-to-understand format. Link menus are terrific for pages that are organized in a hierarchy, for tables of contents, or for navigation among several pages.

Web pages that consist of nothing but links often organize the links in menu form.




The idea of a link menu is that you use short descriptive terms as the links, with either no text following the link or with a further description following the link itself. Link menus look best in a bulleted or unordered list format, but you also can use glossary lists or just plain paragraphs.

Link menus enable your readers to scan the list of links quickly and easily, a task that might be difficult if you bury your links in body text.




Linking to Specific Places within Documents


It is also possible to link to a specific place from one page to another with HTML by creating an anchor within the second page. The anchor creates a special element that you can link to inside the page. The link you create in the first page will contain both the name of the file to which you're linking and the name of that anchor. Then, when you follow the link with your browser, the browser will load the second page and then scroll down to the location of the anchor.

Anchors are special places that you can link to inside documents. Links can then jump to those special places inside the page as opposed to jumping just to the top of the page.

You can use links and anchors within the same page so that if you select one of those links, you jump to a different anchor within the page.







Creating Links and Anchors

You create an anchor in nearly the same way that you create a link: by using the tag. If you wondered why the link tag uses an rather than an , now you know: a actually stands for anchor.

When you specify links by using , the link has two parts: the href attribute in the opening tag and the text between the opening and closing tags that serve as a hot spot for the link.













Linking to Anchors in the Same Document

What if you have only one large page, and you want to link to sections within that page? You can use anchors for that link, too. For larger pages, using anchors can be an easy way to jump around within sections.

To link to sections, you just need to set up your anchors at each section the way you usually do. Then, when you link to those anchors, leave off the name of the page itself, but include the hash sign and the name of the anchor. If you're linking to an anchor name called section5 in the same page as the link, href only has to specify section5.

Basic Of HTML & XHTML Lesson 7

Relative and Absolute Links

A Web site framework can become quite complex with multiple directories, folders, and subfolders. Creating a harmonious existence between the three can be a cumbersome task without the knowledge of relative and absolute links.

After completing this lesson, you should be able to:

Specify relative and absolute links to other Web pages
Determine the situations which would require relative or absolute links
Create active links to remote Web pages



Linking Local Pages

You can link pages that are on the local disk but contained in different directories or folders on that disk. When you specify just the filename of a linked file within quotation marks, the browser looks for that file in the same directory as the current file.

This is true even if both the current file and the file being linked to are on a server somewhere else on the Internet; both files are contained in the same directory on that server. It is the simplest form of a relative pathname.


Relative pathnames point to files based on their locations relative to the current file. They can include directory names, or they can point to the path you would take to navigate to that file if you started at the current directory or folder.

A pathname might, for example, include directions to go up two directory levels and then go down two other directories to get to the file.








Absolute Pathnames

You can also specify the link to another page on your local system by using an absolute pathname. Absolute pathnames point to files based on their absolute locations on the file system.

While relative pathnames point to a page by describing its location relative to the current page, absolute pathnames point to the page by starting at the top level of your directory hierarchy and working downward through all the intervening directories to reach the file.




Absolute pathnames always begin with a slash, which is the way they're differentiated from relative pathnames. Following the slash are all directories in the path from the top level to the file you are linking.





Relative or Absolute Pathnames?

If you have a set of files that link only to other files within that set, using relative pathnames makes sense. On the other hand, if the links in your files point to files that aren't within the same hierarchy, you probably want to use absolute links.

Generally, a mix of the two types of links makes the most sense for complex sites. A good rule of thumb is that if pages are part of the same collection, use relative links, and if they're part of different collections, use absolute links.





Create a link



Remote pages are contained somewhere on the Web other than the system on which you're currently working. The HTML code you use to link to remote pages on the Web looks exactly the same as the code you use for links between local pages.

You still use the tag with an href attribute, and you include some text to serve as the link on your Web page. Rather than a filename or a path in the href, however, you use the URL of that page on the Web:

Basic Of HTML & XHTML Lesson 6

Creating Links

Creating standalone Web pages may seem simple until you attempt to link them together in a logical order. The link structure has to make sense to both the user and the developer.

After completing this lesson, you should be able to:

Describe the fundamentals of the link tag
Construct HTML pages that have the ability to link back and forth
Determine where and how possible errors can occur in your link code


To create a link in HTML, you need two things:

The name of the file (or the URL of the file) to which you want to link
The text that will serve as the hot spot — that is, the text that will be highlighted in the browser, which your readers can then select to follow the link

Only the text that serves as the link is actually visible on your page. When your readers click on the link, the browser loads the URL associated with the link.



The Link Tag

To create a link in an HTML page, you use the HTML link tag .... The tag often is called an anchor tag because it also can be used to create anchors for links. The most common use of the link tag, however, is to create links to other pages.






























If your browser can't find the file when you click on the link, make sure that your upper- and lowercase names match, and both files are in the same directory. Remember to close your link, using the tag, at the end of the text that serves as the link. Also, make sure that you have quotation marks at the end of the filename and both quotation marks are ordinary straight quotes.

All these things can confuse the browser and prevent it from finding the file or displaying the link properly.