Developing a Web Site: Links

1. Developing a Web Site: Links • Using a link is a quicker way to access information at the bottom of a Web page than scrolling down • A user can select a link in a Web page, usually by clicking it with a mouse, to view another topic or document, often called the link’s destination

2. Creating Links Within a Document

3. Creating Element Ids • One way to identify elements in an HTML document is to use the id attribute • Id names must be unique • Id names are not case sensitive • Example: <h2 id=“classes”>Chemistry Classes</h2>

4. Creating Links Within a Document • To create a link within a document, you enclose the content that you want to format as a link in an <a> tag, and use the href attribute to identify the link target • Example: <a href = “#classes”>Classes</a> • A link’s content is not limited to just text. You can create a hyperlink using an image too. • Generally, a link should not contain any block-level elements: May Not Work: <a href=“#classes”><h2>Heading</h2></a> This Is Better: <h2><a href=“#classes”>Heading</a></h2>

5. Working with Web Site Structures • A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating how they are linked together • It is important to storyboard your Web site before you start creating your pages in order to determine which structure works best for the type of information the site contains • A well-designed structure can ensure that users will be able to navigate the site without getting lost or missing important information

6. Linear Structures A linear structure An augmented linear structure

7. Hierarchical Structures

8. Mixed Structures

9. Protected Structures Sections of most commercial Web sites are off-limits except to subscribers and registered customers

10. Navigation Lists in HTML 5 • A navigation list is a list of links (e.g., a menu) to the topics in a website. • The <nav>tag in HTML 5 accomplishes this: <nav> <ul> <li>Home</li> <li>Tips</li> <li>Glossary</li> </ul> </nav>

11. Creating Links Between Documents on the Same Website • To link to a page, you specify the name of the file using the href attribute of the <a> tag Example: <a href=“contacts.htm”>Contact Info</a> • Filenames are case sensitive on some operating systems, including UNIX and Mac OS, but not on others • The current standard is to use lowercase filenames for all files on a Website and to avoid special characters such as blanks and slashes • You should also keep filenames short to avoid typing errors

12. Linking to a Specific Location Within Another Document • When linking to a location within another document, you must use the id name of the location within the document and the filename <a href = “file#id”>content</a> • Example: <a href = “chem.htm#classes”>Classes</a>

13. Linking to Documents in Other Folders • To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path, so that browsers can find it • HTML supports two kinds of paths: relative and absolute • An absolute path specifies a file’s precise location within a computer’s entire folder structure Example: <a href=“c:/html/help.htm”>Help</a>

14. Relative Paths • A relative path specifies a file’s location in relation to the location of the current document • If the file is in the same location as the current document, you do not have to specify the folder name Example: <a href=“info.htm”>More Info</a> • If the file is in a subfolder of the current document, you have to include the name of the subfolder Example: <a href=“help/helpfile.htm”>Help</a>

15. Relative Paths (continued) • If you want to go one level up the folder tree, you start the relative path with a double period (..) then provide the name of the file Example: <a href=“../faculty.htm”>Faculty</a> • To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder Example: <a href=“../students/studentinfo.htm”> Student Info</a> • You should almost always use relative paths in your links

16. A Sample Folder Tree

17. Understanding URLs • A Uniform Resource Locator (URL) specifies the precise location of a resource on the Internet • To create a link to a resource on the Internet, you need to know its URL • A protocol is a set of rules defining how information is exchanged between two resources • Your Web browser communicates with Web servers using the Hypertext Transfer Protocol (HTTP) • The URLs for all Web pages must start with the scheme “http” • Other Internet resources use different protocols and have different scheme names e.g., ftp, mailto

18. The Form of a URL A sample URL for a Web page If you leave off the protocol, http is assumed. If you leave off the filename/id, index.html is assumed.

19. Linking to E- mail • Many Web sites use e-mail to allow users to communicate with a site’s owner, or with the staff of the organization that runs the site • You can turn an e-mail address into a link, so that when a user clicks on an address, the browser starts an e-mail program and automatically inserts the address into the “To” field of the new outgoing message • Example: <a href=“mailto:rbournique@brookdalecc.edu”>Send Mail to Rick</a>

20. Hypertext Attributes: Target • You can force a document to appear in a new window by adding the target attribute to the tag <a> • Examples: <a href=“http://cnn.com” target=“window2”>CNN</a> (opens in a new browser called “window2”) <a href=“http://cnn.com” target=“_blank”>CNN</a> (opens in a new unnamed browser) <a href=“http://cnn.com” target=“_self”>CNN</a> (opens in the current browser)

21. Hypertext Attributes: Title (Tool Tips) A popup title ortool tip is a descriptive text that appears whenever a user positions the mouse pointer over a link. Since only some browsers support popup titles, you should not place crucial information in them. The titleattribute produces the popup title. <a href=“chem.htm” title=“Return to the Chemistry Home Page”>Home Page</a>

22. Graphical Links on a Web Page: Image Maps • To use a single image to access multiple hyperlinks, you must set up hotspots within the image • A hotspot is a defined area of the image that acts as a hypertext link • When a user clicks within a hotspot, the hyperlink is activated • Hotspots are defined through the use of image maps, which list the positions of all hotspots within an image • There are two types of image maps: server-side image maps and client-side image maps

23. Example Image and Image Map

24. Client-Side Image Maps • A client-side image map is inserted in an image map into the HTML file • The browser locally processes the image map - faster • Because all of the processing is done locally, you can easily test Web pages • <map name=“park” id=“park”> list of hotspots </map> <imgsrc=“park.gif” usemap=“#park” />

25. Defining Image Map Hotspots • Define a hotspot using two properties: • Its location in the image • Its shape • Syntax of the hotspot element: <area shape=“shape”coords=“coordinates”href=“url” alt=“text” /> • Shape and coordinates are: • rectulx, uly, lrx, lry • circle x, y, radius • polygon x1, y1, x2, y2, x3, y3, …

26. Sample Set of Hotspots • A sample rectangular hotspot is: <area shape=“rect” coords=“384,61,499,271” href=“water.htm” /> • A sample circular hotspot is: <area shape=“circle” coords=“307,137,66” href=“karts.htm” /> • A sample polygonal hotspot is: <area shape=“polygon” coords=“13,60,13,270,370,270,370,225,230,225,230,60” href=“rides.htm” />

27. Putting It All Together <!-- Create a map --> <map name=“park” id=“park”> <area shape=“rect” coords=“384,61,499,271” href=“water.htm” /> <area shape=“circle” coords=“307,137,66” href=“karts.htm” /> <area shape=“polygon” coords=“13,60,13,270,370, 270,370,225,230,225,230,60” href=“rides.htm” /> </map> <!–- Display image and link to the map --> <imgsrc=“park.gif” usemap=“#park” />