![6
Linking to a higher directory
To a link from salmon.html back to the home page (index. html), because
salmon.html is in the recipes subdirectory, we need to back up a level to jenskitchen to find
index.html. This pathname tells the browser to “go up one level,” then look in that directory for
index.html.
<a href="/index.html">[Back to home page]</a>
Note that we don’t need to write out the name of the higher directory (jenskitchen) in the
pathname. The ../ stands in for it.](https://image.slidesharecdn.com/linksincss-240919172239-61354bf8/85/Links-in-HTML-AND-CSS-COMPREHENSIVE-STUDY-6-320.jpg)
Ad
More Related Content
Similar to Links in HTML AND CSS COMPREHENSIVE STUDY (20)
Recently uploaded (20)
Ad
Links in HTML AND CSS COMPREHENSIVE STUDY
- 1. 1 Links 1. Linking A webpage can contain various links that take the user directly to other pages and even specific parts of a given page. These links are known as hyperlinks. The Web is based on hyperlinks. Hyperlinks can connect to other places on a Web page, to other pages within same Web site, to pages outside the site, and to many types of Web and non-Web content. 2. HTML Link Tag The anchor (a) is the element markup that makes links connect to other sites, to the same site, and within a page. The HTML for an anchor, or link is defined with the <a> tag: <a href="URL"> link text </a> <a>...</a> is a tag used to make a selection of text a link, simply wrap it in opening and closing. The href (hyper reference) attribute specifies the destination address of the link by providing the URL of the target page. The link text is the visible part that will be clicked. By default, it appears on the screen as blue underlined text. Alternative formatting can be specified for hyperlinks by using styles. HTML can use an image as a link. For example <a href="httpe://www.google.com"> <img src="my image path"> </a> 3. Relative and Absolute Path There are two ways to specify the destination address: •Absolute Path 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. HTML&CSS
- 2. 2 <a href="http://www.oreilly.com">Go to the Reilly Media site</a> This example that creates a link to the O’Reilly Media website • Relative Paths describe the pathname to a file relative to the current document. Relative paths can be used when you are linking to another document on your own site, it doesn’t require the protocol or domain name. For example, if the index.htm and tutorial.htm pages in the same Web site and in the same folder, in the index.htm file, you could refer to totorial.htm like this: <a href="Tutorial.html">Tutorial Link</a> 4. The Target Attribute A hyperlink opens the referenced page in the same browser window by default. That means the new page replaces the previous page in the browser. In some cases the user might want the hyperlink to open in a new window (check out a page on another site without leave the current site) or open in the same frame. Target attribute is used to specify the location where linked document is opened. It adds to the <a> tag. Following are the possible options: target=“_self” Display on the same page target=“_blank” Display on another page target=“_name of frame” Display on the frame Example1: <!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> </head> <body> <p>Click any of the following links</p> <ul> <li> <a href = "www.google.com" target = "_blank"> Opens in New </a> </li> <li> <a href = "www.google.com" target = "_self"> Opens in Self</a> </li>
- 3. 3 </ul> </body> </html> Remember, this method have no control over the size of the window, it will generally open as a new tab or in a new window the same size as the most recently opened window in the user’s browser. 5. Linking Types 5.1 External linking to other web sites Absolute paths are used when referring to content outside the current web site that is, paths containing the full location of the web. Example2: <!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "https://www.google.com" target = "_self">Google Web Site</a> </body> </html> 5.2 Internal linking to other pages in the site 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
- 4. 4 and a relative pathname describes how to get to the linked document starting from the location of the current document. The following diagram show the Jen’s Kitchen site, the root directory is named jenskitchen. Linking within a directory To make a link from home page (index.html) to a general information page (about.html), both files are in the same directory (jenskitchen). So from home page, we can make a link to the information page by simply providing its filename in the URL make a link from home page (index.html) to about file <a href="about.html"> About this page...</a>
- 5. 5 Linking to a lower directory All websites have a root directory, which is the directory that contains all the directories and files for the site. To write a relative pathname is to start at the root directory and list the subdirectory names until you get to the file you want to link to. This kind of pathname is known as site root relative. A forward slash (/) at the start of the pathname indicates the path begins at the root directory. The site root relative pathname in the following link to find the salmon.html file: <a href="/recipes/salmon.html">Garlic Salmon</a> Note that you don’t need to write the name of the root directory (jenskitchen) in the path—just start it with a forward slash (/), and the browser will look in the top-level directory relative to the current file. From there, just specify the directories the browser should look in. <a href="recipes/salmon.html">Garlic Salmon</a>
- 6. 6 Linking to a higher directory To a link from salmon.html back to the home page (index. html), because salmon.html is in the recipes subdirectory, we need to back up a level to jenskitchen to find index.html. This pathname tells the browser to “go up one level,” then look in that directory for index.html. <a href="/index.html">[Back to home page]</a> Note that we don’t need to write out the name of the higher directory (jenskitchen) in the pathname. The ../ stands in for it.
- 7. 7 5.3 Linking to sections of a document Linking to a specific section or point in a web page is useful for providing shortcuts to information at the bottom of a long, scrolling page or for getting back to the top of a page with just one click or tap. Linking to a specific point in the page is also referred to as linking to a document fragment. Linking to a particular spot within a page is a two-part process. First, you identify the destination, and then you make a link to it. Step 1: Identifying the destination: to create a destination, use the id attribute to give the target element in the document as a unique name appear in the document, as an example to link into conclusion segmet <h1 id="conclusion">conclusion</h1> Step 2: Linking to the destination with the identifier in place. The href attribute is used to provide the location of the link. To indicate the linking to a fragment, the symbol (#), is used before the fragment name. <a href="#conclusion">conclusion</a> The following code create a web page include description of five chapters. Show the output and specify navigation state.
- 8. 8 Example3:
- 9. 9 6. Hyperlinking to Other Content A hyperlink can reference any file, not just a Web document. One can take advantage of this to link to other content such as Microsoft Office documents, compressed archive files, and even executable program files such as setup utilities for programs. The procedure for linking to other content is the same as for linking to a Web page; the only difference is the file name that enters in the hyperlink. Before creating a link to non-HTML content, the developer need to remember that not everyone has the same software. Some browsers have a feature that automatically tries to download an appropriate viewer, player, or plug-in (an extension to the browser for handling a certain type of file) for anything it can’t display as content. That’s a great feature when it works, but it’s not reliable because not all Web visitors will have a browser with this capability. So, the developer should at least provide a hyperlink to a free viewer that can display that file type especially with audio and video files. To provide a viewer for a type of content, create a hyperlink that points to a site from which it can be downloaded, or store the viewer on your own Web site and provide a link to it Example 4: <!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> </head> <body> <a href = "https://www.tutorial.com/page.pdf">Download PDF File</a> </body> </html>