HTML Exercise 6 Linking to Specific Locations within Documents (Bookmarks)

Size: px

Start display at page:

Download "HTML Exercise 6 Linking to Specific Locations within Documents (Bookmarks)"

Eustace Sutton
10 years ago
Views:

1 HTML Exercise 6 Linking to Specific Locations within Documents (Bookmarks) Some Web pages are many screens long and you must scroll down to see the information at the bottom of the page. Adding hyperlinks on the page allows the reader to jump quickly to a special spot (bookmark) on the page. You need to place two special hyperlink tags on your page. Both items use the <A></A> tags. The HREF= #Bookmark1 feature makes a hyperlink that will jump to a spot on a page the bookmark. This text is underlined and appears like a normal hyperlink. The NAME= #bookmark name bookmarks the spot where the hyperlink will jump. In this exercise, you will also expand your knowledge of tags that you already have used by adding subcommands extra commands that you add to your tags. You will use subcommands a lot. The first example uses two nested tags. The second example uses the main heading tag and a subcommand within the opening tag. <CENTER><H1>This Title Is Centered</H1></CENTER> <H1 ALIGN= center >This Title Is Centered</H1> Warning: This is a tricky assignment. Work slowly and carefully. Open an Existing File 1. With your HTML folder open, double-click your hyperlinks3.html file to open it. 2. It will open in Internet Explorer. View the Source of a Web Page You can view the HTML of any Web page. 3. Click View on the Menu bar and select Source. 4. The HTML code for the Web page will open in Notepad. 5. Change the Revision Date in the footer of the page to today s date. Creating a Template The hyperlinks3.html document will become a template. You will use it later to create several other pages. 6. Make the following changes between the <BODY></BODY> tags. 7. Use the Shift key to make all caps for the tags. 8. Use Copy and Paste to speed up repetitive tasks. HTML Exercise 6 Page 1

The HREF= #Bookmark1 feature makes a hyperlink that will jump to a spot on a page the bookmark. This text is underlined and appears like a normal hyperlink.

2 <!DOCTYPE HTML PUBLIC "-W3C/DTD HTML 4.0 FINAL//EN"> <HTML> <HEAD> <TITLE>Making Hyperlinks To Other Parts Of A Web Page</TITLE> </HEAD> The ALIGN= center part of <BODY> the <H1> tag is a subcommand. You can also right align this <H1 ALIGN="center">Making Bookmarks in HTML</H1> way. <P>Bookmarks and hyperlinks make it easier for the reader to quickly jump around a Web page. See how <B>"hyper"</B> you can get on this page.</p> <HR WIDTH="75% > <H2><A NAME="Top">Table of Contents</A></H2> <H2><A Name="Top">Table of Contents</A></H2> <UL> <LI TYPE="square"><A HREF="#Bookmark1">Hyperlink 1</A> <LI TYPE="square"><A HREF="#Bookmark2">Hyperlink 2</A> <LI TYPE="square"><A HREF="#Bookmark3">Hyperlink 3</A> </UL> <H2><A NAME="Bookmark1">Bookmark 1</A></H2> The WIDTH= 75% is another subcommand. The top is your first bookmark. You are making hyperlinks to bookmarks. The bookmark name can be anything but may not have spaces. <H2><A NAME="Bookmark2">Bookmark 2</A></H2> <H2><A NAME="Bookmark3">Bookmark 3</A></H2> This is the second spot on the page that you have made a bookmark. Readers can jump here quickly. These line breaks are space for your text and pictures. This hyperlink will jump back to the Table of <ADDRESS> Contents bookmark. Page created by: Your Names<BR> Copyright &COPY2001, Your names-all rights reserved.<br> Revised--Date<BR> us at: <A HREF="mailto:your address">your address</a> or <A HREF="mailto:your partner's address">your partner's address</a> </ADDRESS> HTML Exercise 6 Page 2

See how <B>"hyper"</B> you can get on this page.

3 </BODY> </HTML> Testing Your Bookmarks 9. Click File on the Menu bar and select Save. 10. Click the Internet Explorer button on the Taskbar to make it active. 11. In Internet Explorer, click the Refresh button. 12. Test all of your hyperlinks to be sure they work. Figure 1: A long Web page with a list of hyperlinks. The reader can decide what to view first. Do your hyperlinks jump to your bookmarks? Are your bullets squares? Do your Back to top? hyperlinks work? 13. Close all open windows. Using Your Template to Make a Paint Shop Pro Page The goal of this lesson is to link the topics at the top of the page to the paragraphs at the bottom of the page. This will save the reader time. HTML Exercise 6 Page 3

The reader can decide what to view first. Do your hyperlinks jump to your bookmarks? Are your bullets squares? Do your Back to top? hyperlinks work? 13. Close all open windows.

4 Open an Existing File 14. With your HTML folder open, double-click your hyperlinks3.html file to open it. 15. It will open in Internet Explorer. View the Source of a Web Page You can view the HTML of any Web page. 16. Click View on the Menu bar and select Source. 17. The HTML code for the Web page will open in Notepad. 18. Click File on the Menu bar and select Save As. 19. The Save As dialog box opens. 20. Save in your HTML folder. 21. Change the file name to psp.html. 22. Click Save or press Enter. 23. This will be the page for some of your Paint Shop Pro designs. 24. Make the following changes between the <BODY></BODY> tags. 25. Use the Shift key to make all caps for the tags. 26. Use Copy and Paste to speed up repetitive tasks. <!DOCTYPE HTML PUBLIC "-W3C/DTD HTML 4.0 FINAL//EN"> <HTML> <HEAD> <TITLE>Making Web Graphics Using Paint Shop Pro</TITLE> </HEAD> <BODY> <H1 ALIGN="center">Making Web Graphics Using Paint Shop Pro</H1> <P>This page is to showcase the graphics we have made using Paint Shop Pro PSP is an easy to use, yet powerful program to make and edit GIF and JPEG images.</p> <HR WIDTH="75%"> <H2><A NAME="Top">Table of Contents</A></H2> Change the squares to open circles. <UL> <LI TYPE="circle"><A HREF="#Bookmark1">Converting Picture Files</A> <LI TYPE="circle"><A HREF="#Bookmark2">Creating Buttons</A> <LI TYPE="circle"><A HREF="#Bookmark3">Creating Image Maps</A> </UL> <H2><A Name="Bookmark1">Converting Picture Files</A></H2> HTML Exercise 6 Page 4

Click File on the Menu bar and select Save As. 19. The Save As dialog box opens. 20. Save in your HTML folder. 21. Change the file name to psp.html. 22. Click Save or press Enter. 23.

5 <H2><A Name="Bookmark2">Creating Buttons</A></H2> <H2><A NAME="Bookmark3">Creating Image Maps</A></H2> <ADDRESS> Page created by: Your Names<BR> Copyright &COPY2001, Your names-all rights reserved.<br> This is the third spot on the page that you have made a bookmark. Readers can jump here quickly. Revised--Date<BR> us at: <A HREF="mailto:your address">your address</a> or <A HREF="mailto:your partner's address">your partner's address</a> </ADDRESS> </BODY> </HTML> Testing Your Bookmarks 27. Click File on the Menu bar and select Save. 28. Click the Internet Explorer button on the Taskbar to make it active. 29. In Internet Explorer, click the Refresh button. 30. Test all of your hyperlinks to be sure they work. HTML Exercise 6 Page 5

Revised--Date<BR> Email us at: <A HREF="mailto:your email address">your email address</a> or <A HREF="mailto:your partner's email address">your partner's email address</a> </ADDRESS> </BODY>

6 Figure 2 Are your bullets circles? Do your Back to top? hyperlinks work? Uploading Your Web Page 31. In Internet Explorer, type in the Address bar text box and press Enter. 32. Type your user name and password. 33. Press Enter or click the Sign in button. 34. Under Advanced Toolbox, click. 35. The Easy Upload page will open. You can upload up to 20 files at a time. 36. Click Browse to select hyperlinks3.html and psp.html. 37. Click the button to copy the file to the Geocities server. 38. A new page will open telling you that you have successfully uploaded the file. 39. Click the hyperlink to your home page. HTML Exercise 6 Page 6

Under Advanced Toolbox, click. 35. The Easy Upload page will open. You can upload up to 20 files at a time. 36. Click Browse to select hyperlinks3.html and psp.

7 40. Click the hyperlink that says:. 41. Test your hyperlinks and bookmarks. 42. Go back to your home page and click the hyperlink that says: Printing the Web Page 43. Before printing, click View on the Menu bar, point to Text Size, and select Medium. 44. Press Ctrl+P. 45. The Print dialog box opens. 46. Change the Name to Ireland. 47. Change the Number of copies to Click OK. 49. Your teacher will go online to check your Web page and mark the grade on the printed copy. 50. Close all windows. Recap Table 1 Tags You Should Know Tag Paired or Nonpaired Command <HR WIDTH= 75% >. Nonpaired Creates a horizontal rule 75% across the page. <H1 ALIGN= center > Paired Creates a centered heading <LI TYPE= circle > <LI TYPE= square > Nonpaired Creates a circular or square bullet Do you know how to bookmark a place on your Web page? Do you know what a subcommand is and how it is used? HTML Exercise 6 Page 7

Change the Number of copies to 2. 48. Click OK. 49. Your teacher will go online to check your Web page and mark the grade on the printed copy. 50. Close all windows.

CREATING WEB PAGES USING HTML INTRODUCTION

CREATING WEB PAGES USING HTML INTRODUCTION Web Page Creation Using HTML: Introduction 1. Getting Ready What Software is Needed FourSteps to Follow 2. What Will Be On a Page Technical, Content, & Visual