1 / 55

New Perspectives on Creating Web Pages with HTML

New Perspectives on Creating Web Pages with HTML. Tutorial 2: Links, Lists and Image Maps. Creating a Hypertext Document. Hypertext documents contain hypertext links , items that you can select to view another topic or document, often called the destination of the link.

nancy
Download Presentation

New Perspectives on Creating Web Pages with HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. New Perspectives on Creating Web Pages with HTML Tutorial 2: Links, Lists and Image Maps IS 360, Tutorial 2

  2. Creating a Hypertext Document • Hypertext documents contain hypertext links, items that you can select to view another topic or document, often called the destination of the link. • These links can point to: • another section • the same document • to a different document • to a different Web page • to a variety of other Web objects IS 360, Tutorial 2

  3. This figure shows that a browser may only show a portion of the web page. The user must scroll down to see the rest of the web page. vertical scroll bar horizontal scroll bar can also be shown Opening A Web Page IS 360, Tutorial 2

  4. You can place hypertext links at the top of a web page to make it easier for the user to navigate to a particular section of the document instead of scrolling. Adding Hypertext Links IS 360, Tutorial 2

  5. Hyper-documents are created with Anchor tags • Anchors can be • Internal (to the displayed document) • or External: the link address is outside the current document • External addresses can be • Absolute: the link address is completely specified • or Based: the address base is specified in the document <HEAD> - all following references are relative to this IS 360, Tutorial 2

  6. Creating Anchors • The <a> tag creates an anchor, text that is specially marked so that you can link to it from other points in a document. • Text that is anchored is the destination of a link; it is not the text you click on. • Each anchor has its own anchor name, using the “name” attribute i.e.<a name=“cc”>Classes</a>. • An anchor doesn’t have to be text. You can mark an inline image as an anchor. • Adding an anchor does not change your document’s appearance in any way. It merely creates locations in your Web page that become destinations of links. IS 360, Tutorial 2

  7. When the user clicks one of the hypertext links, the link will go directly to that section (anchor, which is the destination of the link) within the web page. hypertext links anchor How an Anchor Works (Internal links)chem.htm IS 360, Tutorial 2

  8. Creating Links • To create a link to an anchor, use the same <a> tag you used to create the anchor. • The <a> tags used to create links are sometimes called link tags. • Use the href attribute, which is short for HypertextReference, to indicate the location to jump to. • href can refer to an anchor that you place in the document or to a different Web page or a resource anywhere on the Internet • it is important to note that the href attribute is case sensitive • You link to an anchor using the anchor name preceded by a pound (#) symbol i.e. <a href=“#gra”>Grading</a>. IS 360, Tutorial 2

  9. After you create the anchors that serve as destinations for your links, you need to create the links themselves. You should be careful to make each anchor name unique within a document. The <a> tag you use to create the anchor and the href attribute to indicate the location to jump to. Creating Links Continued IS 360, Tutorial 2

  10. If the headings do not appear as text links, check your code to make sure that you are using the <a> and </a> tags around the appropriate text, the href attribute within the tag, and the quotes and # symbols. Text formatted as links Text Links in the Browser IS 360, Tutorial 2

  11. <BODY> attributes that effect links (MEH 3.2) • Remember <BODY> tags from the basic document structure discussion? They can have attributes that change the display of links (anchor tags) <BODY LINK=“red” VLINK=“blue” ALINK=“purple”> • LINK specifies the color of unvisited links • VLINK specifies the color of visited links • ALINK specifies the color of the link as it is clicked IS 360, Tutorial 2

  12. Web Page Structures • Storyboarding your Web pages before you create links helps you determine which structure works best for the type of information you’re presenting. • You want to ensure that readers can navigate easily from page to page without getting lost. • You’ll encounter several Web structures as you navigate the Web. • Examining some of these structures can help you decide how to design your own system of Web pages. IS 360, Tutorial 2

  13. This figure shows one common Web page structure, the linear structure, in which each page is linked to the next and to previous page, in an ordered chain of pages. Link to previous page In this structure you can jump only from one page to the next or previous page Link to next page Linear Structures IS 360, Tutorial 2

  14. This figure shows an augmented linear structure, in which you include a link in each page that jumps directly back to the first page, while keeping the links that allow you to move to the next and previous pages. second link jumps back to beginning first link jumps to previous page third link jumps to next page third page has three links Augmented Linear Structure IS 360, Tutorial 2

  15. This figure shows the hierarchical structure, which starts with a general topic that includes links to more specific topics. Each specific topic includes links to yet more specialized topics, and so on. In a hierarchical structure, users can move easily from general to specific and back, but not from specific to specific. Hierarchical Structure IS 360, Tutorial 2

  16. As with the linear structure, including a link to the top of the structure on each page gives users an easy path back to the beginning. Subject catalogs such as the AltaVista directory of Web pages often use this structure. This figure shows this site, located at http://www.altavista.com. Hierarchical Structure on AltaVista Web Page IS 360, Tutorial 2

  17. This figure shows a hierarchical structure in which each level of pages is related in a linear structure. information about the play information about the acts overall structure is hierarchical each level is linear the scenes Combination of Linear and Hierarchical Structures IS 360, Tutorial 2

  18. Web Structures Continued • A little foresight can go a long way toward making your Web pages easier to use. • The best time to organize a structure is when you first start creating pages, when those pages are small in number and more easily managed. • If you’re not careful, your structure can become confusing and unmanageable for the user. IS 360, Tutorial 2

  19. This structure is confusing, and it makes it difficult for readers to grasp the contents of the overall Web site. Moreover, a user who enters this structure at a certain page might not be aware of the presence of the other pages. Multipage Document with No Coherent Structure IS 360, Tutorial 2

  20. Unlike creating hypertext links between elements on the same page, this process does not require you to set an anchor in a file to link to it; the filename serves as the anchor or destination point. the chem.htm document, which is the document containing the links. links to the linktxt.htm document, which contains links to various Chemistry Web sites. links to the conttxt.htm document, which contains contact information Creating Links Among Documentschem.htm IS 360, Tutorial 2

  21. Linking to a Document (External links) • To create a link to a document, use the same <a> tag with the href attribute i.e. <a href=“contact.htm”>Contact me</a>. • In order for the browser to be able to locate and open contact.htm, it must be in the same folder as the document containing the link. IS 360, Tutorial 2

  22. <a> tags to point to other documents HTML Code that Links to Other Documents IS 360, Tutorial 2

  23. links to the Contact and Links page Browser Displaying Links to Other Documents IS 360, Tutorial 2

  24. Linking to a Section of a DocumentCombining external links with internal • To navigate to a specific location elsewhere in a document, rather than the top, you can set anchors and link to an anchor you create within the document. • for example, to create a link to a section in the Web page home.htm marked with an anchor name of “interests,” you create an anchor in home.htm in the section on Interests, and then enter the following HTML code in the current document: <a href=“home.htm#interests”> View my interests </a> • the entire text, “View my interests,” is linked to the Interests section in the home.htm file, via the anchor name “interests” • the pound symbol (#) in this tag distinguishes the filename from the anchor name IS 360, Tutorial 2

  25. Adding Links to Specific Locations in a Page The pound symbol (#) in these tags (shown in red) distinguishes the filename from the anchor name. IS 360, Tutorial 2

  26. links Links in the Chemistry Page thatPoint to Anchors in the Links Page IS 360, Tutorial 2

  27. Linking to Documents in Other Folders • Browsers assume that if no folder information is given, the file is in the same folder as the current document. • When referencing a file located in a different folder than the link tag, you must include the location, or path, for the file. • HTML supports two kinds of paths: absolutepaths and relative paths. IS 360, Tutorial 2

  28. Absolute Pathnames • An absolute pathname provides a precise location for a file. • With HTML, absolute pathnames begin with a slash (/) and are followed by a sequence of folders beginning with the highest level folder and proceeding to the folder that contains the file. • Each folder is separated by a slash. • After you type the name of the folder or folders that contains the file, type a final slash and then the filename itself i.e. /tutorial.02/case/parks.htm. • HTML also requires you to include the drive letter followed by a vertical bar (|) i.e. /C|/tutorial.02/case/parks.htm. IS 360, Tutorial 2

  29. This figure shows five HTML files that are located in four different folders. The top most folder is the tutorial.02 folder. Within the tutorial.02 folder are the tutorial and case1 folders, and within the case1 folder is the extra folder. Folder Tree IS 360, Tutorial 2

  30. This figure shows absolute pathnames for five HTML files. Absolute Pathname IS 360, Tutorial 2

  31. Relative Pathnames • A relative path specifies the location for a file in relation to the folder containing the current Web document. • As with absolute pathnames, folder names are separated by slashes. • Unlike absolute pathnames, a relative pathname does not begin with a slash. • To reference a file in a folder directly above the current folder in the folder hierarchy, relative pathnames use two periods (..) i.e. ../tutorial/chem.htm. IS 360, Tutorial 2

  32. Relative Pathnames Continued • Relative pathnames make your hypertext links portable. • Unlike absolute pathnames, If you move your files to a different computer or server, the hypertext links will stay intact. • If absolute pathnames are used, each link has to be revised. This can be a very tedious process. IS 360, Tutorial 2

  33. This figure shows the relative pathnames and their interpretations for HMTL files and how they would be displayed. Relative Pathnames IS 360, Tutorial 2

  34. Uniform Resource Locator (URL) • Each URL follows the same format. • The first portion of the URL identifies the communication protocol, which is a set of rules that governs how information is exchanged. • Web pages use the communication protocol HTTP, short for Hypertext Transfer Protocol, so all Web page URLs begin with the letters “http”. • Following the communication protocol, there is typically a separator, such as a colon and two slashes (://) i.e. http://www.mwu.edu. IS 360, Tutorial 2

  35. This figure interprets a Web page with the URL http://www.mwu.edu/course/info.html#majors. Interpreting Parts of a Uniform Resource Locator (URL) IS 360, Tutorial 2

  36. As long as your computer is connected to the Internet, clicking the text within the tag navigates you to the document located at the specified URL. Links to the College Board AP Internet page Link to Another Page on the Web IS 360, Tutorial 2

  37. Imbedding Graphics • Images are added to a document with the <IMG> tag • <IMG> tags can be used within document text, or imbedded in the anchor tag set <A> </A> in which case the image acts like a button, and clicking on the image invokes the link (MEH 6.12) IS 360, Tutorial 2

  38. Basic <IMG> tag syntax <IMG SRC=“http://url/image.jpg” HEIGHT = “55” WIDTH = “55”> • Note: • No end tag required • SRC= specifies the address of the image file • HEIGHT= and WIDTH= specify the dimensions of a rectangle - measured in pixels - in which to display the image - they are optional • MapEdit @ www.boutell.com/mapedit is a tool for determining image dimensions IS 360, Tutorial 2

  39. Image as a link ‘button’ <A HREF=“http://www.bigcompany.com”> <IMG SRC=“logo.gif” BORDER=“0”> </A> • The code above: reads logo.gif from the same library that the currently displayed page came from displays the image (logo.gif) if the user clicks on the image, the page: www.bigcompany.com will be loaded IS 360, Tutorial 2

  40. Image as a link ‘button’(2) <A HREF=“http://www.bigcompany.com> <IMG SRC=“logo.gif” BORDER=“0”> </A> • Note that no HEIGHT or WIDTH attributes are used • BORDER=“0” tells the browser to put NO line border around the image. It will place a narrow border around an image by default otherwise. Note the quotes around all attribute values, including numbers. IS 360, Tutorial 2

  41. Image Maps (1) • Server side: browser sends image x/y coordinates to browser which must determine what to send back - passe • Client side: the currently displayed document contains: • an image reference • a map of that image defining ‘hot spots’ within the image - and the URL to request when each ‘hot spot’ is clicked. IS 360, Tutorial 2

  42. Image Maps (2) • Powell, figure 4.7 and code, p. 148; 5.13; MEH 14.1 • Images and mapped images can be associated with script - which will be executed when image related events (such as clicking on an image or hot spot) occur. • Hotspots can also be associated with events: mouseover(), mouseoff(), click() etc. IS 360, Tutorial 2

  43. Hot Spot Definitions (Powell, 5.13) • SHAPE=“RECT” • COORDS=“0,0,100,50” • upper left corner (X,Y) and lower right corner (X,Y) All coordinates are in ‘pixels’ • SHAPE=“CIRCLE” • COORDS=“195,100,50” • center (X, Y) and radius IS 360, Tutorial 2

  44. Hot Spot Definitions (2) • SHAPE=“POLY” • CORDS=“255,122,306,53,334,63,. . . • X, Y coordinates in pixels for all vertices of the polygon IS 360, Tutorial 2

  45. Tools for Image Maps • Dreamweaver – on lab machines • MapEdit - “evalware” from: • www.boutell.com/mapedit • a code generator • Microsoft Photo Editor • Corel, Adobe and other print editors • used to easily determine coordinates IS 360, Tutorial 2

  46. Lists • We will study two basic list types • Ordered • Unordered (or bulleted) • And we will mix them to form Nested Lists IS 360, Tutorial 2

  47. Ordered Lists (MEH Fig. 4.5) • Use two ‘container’ tags • <OL> </OL> to define the start and end of the list • The ‘type’ attribute of the <OL> tag sets the numbering scheme • <LI> text</LI> - the ‘container’ for each list line or element IS 360, Tutorial 2

  48. Unordered Lists (MEH Fig. 4.10) • Use two ‘container’ tags • <UL> </UL> to define the start and end of the list • The ‘type’ attribute of the <UL> tag sets the bullet icon • <LI> text</LI> - the ‘container’ for each list line or element (just as in OL) IS 360, Tutorial 2

  49. Nested Lists (MEH Fig. 4.13) • ‘Lists within lists’. • In place of an <LI></LI> container, simply insert a complete list - either ordered or unordered! IS 360, Tutorial 2

  50. Displaying Linked Documents in a New Window (We will discuss ‘targeting’ in the lecture on Tables & Frames) • By default, each Web page you open is displayed in the main browser window, replacing the one you were viewing last. • To force a document to appear in a new window, instead of the main browser window, you would use the target attribute in the href tag i.e. <a href=“url” target=“new_window”>Hypertext</a> • url is the URL of the page, and new_window is a name assigned to the new browser window • the value use for the target attribute is used by the browser to identify the different open windows in the current browser session IS 360, Tutorial 2

More Related