Fundamentals of Website Development

Transcription

1 Fundamentals of Website Development CSC 2320, Fall 2015 The Department of Computer Science Chapter 6: Adding Links Making Links to External Pages Making Links to Internal Pages Linking to a Specific Point of a Page Targeting New Windows Adding mailto links -2-1

2 Links: the Anchor Element Anchor element is used for pointing to other web pages <a> </a> Attribute href to provide the linked pages <a href= sample.html >Click</a> Inline element, can only contains text or other inline elements Most browsers display linked text as blue and underlined, linked image with blue border href attribute href: hypertext reference, provides the URL URL can be web pages, images, audio, video files Two types of URL: Absolute URLs, some web pages on the Web Example 1: href= Example 2: Relative URLs, web pages on local server example, href= recipes/index.html Long URL: don t mistype, copy and paste

3 Relative URL: link within your own site Relative URLs are used for linking between pages of your own site: from the home page to section pages, from section pages to content pages, No but provide pathname & filename No backslashes, Drive name, or file:// Careful: Know which page are you at, and how relative the linked page to this page Linking within a directory Linked page is in the same directory, only filename is necessary for href value

4 Linking to a lower directory Need to provide pathname and filename for the href value Linking to a two-level lower directory Need to provide pathname and filename for the href value

5 Linking to a higher directory Need to../ and filename for the hrefvalue Linking to a two-level higher directory Need to../ and filename for the href value

6 Site root relative pathnames All web site servers have a root directory, which is the directory that contains all the directories and files for the site. Site root relative pathname starts from root directory to desired file Always starts with a /, example: Linking to a specific point within a page Providing shortcut to a specific point of a long scrolling page or getting back to the top is very useful Step 1: Naming the destination planting a flag in the desired location of a document Use id attribute to give the target a unique name Example: Step 2: Linking to the destination Make a link to it after flag is in place Use anchor with href value starting with # +id value Example:

7 Linking to a specific point within a page Linking to a fragment in another document Linking to a relative URL s specific point Relative path + filename + #id Linking to a absolute URL s specific point Absolute URL + #id

8 Targeting a New Browser Window Open links in new window and still keep the original window, convenient Downside: confusing, block pop-up New Window with markup Use target attribute of an anchor element No control over the size of window Setting target= _blank always causes the browser to open a fresh window Example: Opening a window with JavaScript Able to control the size of new window

9 Mail Links By using the mailto protocol in a link, you can link to an address. When the user clicks on a mailto link, the browser opens a new mail message preaddressed to that address in a designated mail program. Be careful: Spam-Bots may find your address Homework Reading through Chapter

10 Questions Thank You!