1 / 47

HTML, Third Edition Illustrated Brief

HTML, Third Edition Illustrated Brief. Unit B Creating Links to Web Pages and Other Files. U n i t O b j e c t i v e s. Plan a Web Site Create internal links Create links to other directories Create external links. U n i t O b j e c t i v e s. Create e-mail links Create jump links

kynton
Download Presentation

HTML, Third Edition Illustrated Brief

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. HTML, Third EditionIllustrated Brief Unit B Creating Links to Web Pages and Other Files HTML, Third Edition--Illustrated Brief

  2. U n i t O b j e c t i v e s • Plan a Web Site • Create internal links • Create links to other directories • Create external links HTML, Third Edition--Illustrated Brief

  3. U n i t O b j e c t i v e s • Create e-mail links • Create jump links • Open links in new windows • Add link titles HTML, Third Edition--Illustrated Brief

  4. I n t r o d u c t i o n • The Web is able to present non-linear content • Content need not be read in any particular order • Hyperlinking is the ability to jump from one content point to another • achieved by clicking on hypertext links HTML, Third Edition--Illustrated Brief

  5. Planning a Web Site • Determine your site type • Business sites, brochure sites, e-commerce sites, support sites, and personal sites • Define the site’s purpose • Identify the target audience • Group or groups of people you are trying to attract HTML, Third Edition--Illustrated Brief

  6. Planning a Web Site • Identify content sources • Organize your site content • Create a site storyboard • Also called a site map • Net structure • Hierarchical structure HTML, Third Edition--Illustrated Brief

  7. Planning a Web Site HTML, Third Edition--Illustrated Brief

  8. Planning a Web Site HTML, Third Edition--Illustrated Brief

  9. Clues to Use • Intranet sites are private Web sites • Available only to authorized users • Contain company support materials • Shared databases • Greater flexibility in design HTML, Third Edition--Illustrated Brief

  10. Creating Internal Links • An anchor tag or link tag surrounds information that users click to navigate to another location • Attributes and values specify the tag’s behavior or function • href • Internal links link to files within the same site • usually relative links HTML, Third Edition--Illustrated Brief

  11. Creating Internal Links • Click to select contact.htm within Unit B data files, click Edit on the menu bar, then click Copy • Locate and click to select the paradise folder in the directory where you save your site files, click Edit on the menu bar, then click Paste • Open the paradise\index.htm file in your text editor from the place where you save your site files, click after the </h1> tag, then press [Enter] twice HTML, Third Edition--Illustrated Brief

  12. Creating Internal Links HTML, Third Edition--Illustrated Brief

  13. Creating Internal Links • Type <p>|<a href=”index.htm”>Home</a>|, press [Spacebar], type |<a href=”contact.htm”>Contact Us</a>|</p>, then save your work • Drag to select the navigation bar code (including opening and closing paragraph tags), then copy it • Open the paradise\contact.htm file in your text editor, click after </h1>, press [Enter] twice, paste the code, update the “modified by” paragraph, then save HTML, Third Edition--Illustrated Brief

  14. Creating Internal Links HTML, Third Edition--Illustrated Brief

  15. Creating Internal Links • Start your browser program, click File on the menu bar, click Open, click Browse, navigate to the index.htm file in your paradise folder, double-click index.htm, then click OK to open it in the browser • Move the mouse pointer over the links • Click the Contact Us link, then from the contact.htm file, click the Home link HTML, Third Edition--Illustrated Brief

  16. Creating Internal Links HTML, Third Edition--Illustrated Brief

  17. Creating Links to Other Directories HTML, Third Edition--Illustrated Brief

  18. Creating Links to Other Directories • Copy the activities folder and its contents from the your Unit B Data Files, then paste it into your paradise folder in the location where you save your site files • Open your paradise\index.htm file in your text editor, click just before the </p> in the navigation bar code, press [Spacebar], type |<a href=”activities/index.htm”>Activities and Events</a>|, then save the file • Drag to select the modified navigation bar, click Edit on the menu bar, then click Copy HTML, Third Edition--Illustrated Brief

  19. Creating Links to Other Directories • Open your paradise\activities\index.htm file in your text editor, click after </h1>, press [Enter] twice, click Edit on the menu bar, then click Paste • Locate the Home link, click between the first quotation mark and the file name index.htm, then type ../ • Click between the first quotation mark and the file or folder name in each of the other URLs and the two other links, type ../, then save the file • Locate the “modified by” paragraph at the bottom of the page, change the text “Your Name” to your own name, then save the file HTML, Third Edition--Illustrated Brief

  20. Creating Links to Other Directories • Open the activities/index.htm page in your browser, then click Activities and Events to test the link • Click the Home link, click Activities and Events to return to the Activities page, then click the Contact Us link to test it • Close the activities/index file HTML, Third Edition--Illustrated Brief

  21. Creating Links to Other Directories HTML, Third Edition--Illustrated Brief

  22. Creating External Links • Create links to external Web files to provide additional resources and information to your site visitors • Absolute URL is the complete URL • protocol • server name • domain name • path • filename HTML, Third Edition--Illustrated Brief

  23. Creating External Links • Open your paradise\index.htm file in your text editor, from the paradise folder where you save your site files • Click in front of the word annual in the phrase annual PRCA Rooftop Rodeo in the fourth paragraph, then type <a href=”http://www.estesnet.com/events/rooftoprodeo.htm”> • Click just after Rodeo, type </a>, click File on the menu bar, then save your work HTML, Third Edition--Illustrated Brief

  24. Creating External Links • Open paradise\index.htm in your browser, move the mouse pointer over the linked text • Click the link to display the PRCA Rooftop Rodeo page, scroll down the page to view its content, then click your browser’s Back button to return to the index.htm page • Click the text editor program button on the taskbar, click in front of Boulder in the first sentence of the last paragraph, type <a href=”http://www.ci.boulder.co.us/goboulder/WBW/”>, click after “Week” in “Boulder Walk and Bike Week”, then type </a> HTML, Third Edition--Illustrated Brief

  25. Creating External Links • Click before Scottish in the last paragraph, type <a href=”http://www.scottishgames.org/”>, click after Festival, then type </a> • Save the document, click the browser program button on the taskbar, then click your browser’s Reload or Refresh button • Click each link to verify that it works properly, then click the text editor program button on the taskbar HTML, Third Edition--Illustrated Brief

  26. Creating External Links HTML, Third Edition--Illustrated Brief

  27. Creating E-Mail Links • In your text editor, open the paradise/contact.htm page from your paradise site files • Locate the Paradise Mountain Family Resort paragraph at the bottom of the page, click before </p>, type <br />, press [Enter], type E-mail: <a href=mailto:info@paradisemtn.com">info@paradisemtn.com</a> • Locate the Reservations paragraph near the top of the page, click before </p>, type <br/>, press [Enter], then type E-mail: <a href=mailto:reservations@paradisemtn.com">reservations@paradisemtn.com</a> HTML, Third Edition--Illustrated Brief

  28. Creating E-Mail Links • Locate the Activities and Events paragraph near the top of the page, click before </p>, type <br />, press [Enter], then type E-mail: <a href=mailto:activities@paradisemtn.com">activities@paradisemtn.com</a> • Locate the Business Office paragraph, click before </p>, type <br />, press [Enter], then type E-mail: <a href=mailto:business@paradisemtn.com">business@paradisemtn.com</a> HTML, Third Edition--Illustrated Brief

  29. Creating E-Mail Links • Click before </p> in the “modified by” paragraph at the bottom of the page, type <p>For questions or comments about this site, contact: <br /> <a href=”mailto:webmaster@paradisemtn.com”>webmaster@paradisemtn.com</a> </p>, then press [Enter] • Save the contact.htm file, then open it in your browser • In your browser, click the Reservations e-mail link • Close the e-mail message window HTML, Third Edition--Illustrated Brief

  30. Creating E-Mail Links HTML, Third Edition--Illustrated Brief

  31. Clues to Use • Enhance your e-mail links to automatically • Add a subject line • Carbon copy another recipient • Not all browsers support enhanced e-mail links • mailto:webmaster@paradisemtn.com?subject=Site_comments&cc=business@paradisemtn.com HTML, Third Edition--Illustrated Brief

  32. Creating Jump Links • Click the text editor program button to return to your contact.htm source code • Locate the level-one heading at the top of the page, click between h1 and > in the opening tag, press [Spacebar], then type id="top" • Locate the level-three heading, Reservations, near the top of the page, click just after h3 in the opening tag, press [Spacebar], then type id="reservations" HTML, Third Edition--Illustrated Brief

  33. Creating Jump Links • Locate the level-three heading, General Information, click just after h3 in the opening tag press [Spacebar], then type id="geninfo" • Locate the level-three heading, Paradise Garden Day Spa and Fitness Center, click just after h3 in the opening tag, press [Spacebar], then type id=”spa” • Locate the level-three heading, Front Desk, click just after h3 in the opening tag, press [Spacebar], then type id="fdesk" HTML, Third Edition--Illustrated Brief

  34. Creating Jump Links • Locate the level-two heading near the top of the page, click after </h2>, press [Enter] twice, then type the following, pressing [Spacebar][Enter] after each item: <p>[<a href=”#reservations”>Reservations</a>][<a href=”#General Information”>General Information</a>][<a href=”#spa”>Day Spa and Fitness Center</a>][<a href=”#fdesk”>Front Desk</a>]</p>] HTML, Third Edition--Illustrated Brief

  35. Creating Jump Links • Locate the paragraph containing the Reservations contact information near the top of the page, click before </p>, press [Enter], then type <br /><a href=”#top”>Return to top</a> • Drag to select the Return to top link you just created, including the opening and closing anchor tags, copy it to your clipboard, then paste it before </p> in the Human Resources Office and the Paradise Mountain Family Resort paragraphs • Save the file then reload it in the browser to test your links HTML, Third Edition--Illustrated Brief

  36. Creating Jump Links HTML, Third Edition--Illustrated Brief

  37. Clues to Use • Jump links used to be set using named anchor points rather than element IDs • Named anchor points have been deprecated by the W3C • Links to named anchors are created in exactly the same manner as those to element IDs HTML, Third Edition--Illustrated Brief

  38. Opening Links in New Windows • Open the index.htm page from your paradise site folder in your text editor • Click before Rocky Mountain National Park in the second paragraph • Type <a href=”http://www.nps.gov/romo” target=”_blank”> • Click after Park, type </a>, then save the document HTML, Third Edition--Illustrated Brief

  39. Opening Links in New Windows • Open paradise/index.htm in your browser • Click the Rocky Mountain National Park link • Close the target window to return to your home page • Click the text editor program button to return to your source code HTML, Third Edition--Illustrated Brief

  40. Opening Links in New Windows HTML, Third Edition--Illustrated Brief

  41. Clues to Use • You are able to assign an internal name to windows you open • Content may open in hidden windows • Using _blank for a target will open the content in a new window every time HTML, Third Edition--Illustrated Brief

  42. Adding Link Titles • Locate the opening Rocky Mountain National Park anchor tag, click after the href attribute value “_blank”, press [Spacebar], then type title=”Rocky Mountain National Park home page - opens in new window.” • Locate the “PRCA Rooftoop Rodeo” opening anchor tag, click just after “...rooftoprodeo.htm”, press [Spacebar], then type title="PRCA Rooftop Rodeo Web site. Click here for event schedules and dates." • Locate the Boulder Walk and Bike Week opening anchor tag, click after the closing quotation mark after the href attribute value, press [Spacebar], then type title=”Experience the fun and excitement of Boulder Walk and Bike Week. Visit Boulder Walk and Bike Week's Web site.” HTML, Third Edition--Illustrated Brief

  43. Adding Link Titles • Locate the Scottish Highlands Festival opening anchor tag, click after the closing quotation mark after the href attribute value, press [Spacebar], then type title=“Visit the official Estes Park/Scottish Highlands Festival Web site for more information.”, then save the document • Click the browser program button on the taskbar, then click your browser’s Reload or Refresh Button HTML, Third Edition--Illustrated Brief

  44. Adding Link Titles • Move the mouse pointer over the Rocky Mountain National Park link, then observe that a ScreenTip displays the sentence, Rocky Mountain National Park home page - opens in new window • Move the mouse pointer over the other three links; observe that the ScreenTip displays the title text for each link • Click the text editor program button on the taskbar to return to your code, print and close all files, then transfer your updated files to your remote server directory HTML, Third Edition--Illustrated Brief

  45. Adding Link Titles HTML, Third Edition--Illustrated Brief

  46. U n i t S u m m a r y • Plan a Web Site • Create internal links • Create links to other directories • Create external links HTML, Third Edition--Illustrated Brief

  47. U n i t S u m m a r y • Create e-mail links • Create jump links • Open links in new windows • Add link titles HTML, Third Edition--Illustrated Brief

More Related