| Overview |
| |
In this chapter you will learn
- How to link web pages and documents
- Definition of a URL
- Different types of pathnames
|
| |
| Introduction |
| |
Linking is the next element in an XHTML document. The contents of this chapter discuss how linking of XHTML documents is done, how images are inserted in a website and how hyperlinks are created.
The links in XHTML are quite similar to the links of HTML. The differences between the two will be evident gradually.
It is imperative to know the concepts of URL, Relative Pathname and Absolute Pathname before going into details of linking XHTML documents.
|
| |
| URL |
| |
The World Wide Web uses Uniform Resource Locators (URLs) to specify the location of files on other servers. In other words, it is the address of a website in the World Wide Web. A URL includes the type of resource being accessed, address of the server, and location of the file. The syntax is:
|
| |
|
|
| |
| Paragraph Tag |
| |
Documents can be linked to other directories by specifying the relative paths to the linked document. For example, a link to a file mycode.html located in the subdirectory codes would be: |
| |
| Example |
<A href=”codes/mycodes.html”> Code of file 1 </A>
|
These are called relative links because the path to the linked file, relative to the location of the current file is specified.
Case 1
If the file to be accessed is stored on a lower level of directory than the current directory, then that file can be accessed by typing the directory name/ filename in the href attribute. In the following example, the file ‘work’ is a subdirectory of the current directory and the file myfile.html is stored in ‘work’.
| Example |
<A href=”work/myfile.html”> file </A> |
|
| |
Case 2
If the file to be accessed is stored on a higher level of directory than the current directory, then we can access that file by simply typing ../ before the name of the file. Each ../ tells the web browser to go one level up relative to the current directory. In the following example, the browser has to go two levels up to link the file to the document.
| Example |
| <A href=”../../newfile.html”> Myfiles </A> |
| |
Absolute Path
Absolute path is used to link those documents that are not directly related to the current document. Links to some other websites should be absolute, as they are not related to the current directory. So even if the current directory is moved, it will not affect the links.
Linking
XHTML, like HTML, becomes all the more powerful from the fact that different documents can be linked together. With the help of this tool, a text or an image can be linked to any part of the document or section of a document. A browser highlights the identified text or image with color or underlines to indicate that it is a hyperlink. A new document opens on clicking that hyperlink.
Linking is done with the help of the following tags:
Anchor Tag
The anchor tag is indicated by <a>. An anchor is a piece of text or some other object (like image) to mark the beginning and/or end of a hypertext link. It is used to create a link to some other document by using the “href” attribute.
The anchor tag of XHTML is similar to the anchor tag of HTML. All the attributes of the anchor tag in HTML are also applicable in XHTML. An anchor tag by itself doesn’t do anything. It has to be enhanced with attributes like:
Href
Href stands for Hypertext Reference. The address of the file or the address of the website is typed in the href attribute. The address is of that document which the web page links to.
| Example |
| <A href= "http://expertrating.com/" > Mylink </A> |
| Output |
| This hyperlink will take you to the site www.expertrating.com. |
| |
Target
The target attribute specifies where the target URL should open. It takes up various values which are:
The target file will open in a new window.
| Example |
| <A href= "http://expertrating.com/" target=”_blank”> Mylink </A> |
| Output |
| This hyperlink will take you to the site www.expertrating.com. It will open in a new window. |
|