Lab Assignment 2 Three Web Pages With Hyper Links In Powerpoint

You can use hyperlinks in PowerPoint to link to websites and other slides and the PowerPoint action button to link to other slides.

Introduction

Video: Inserting Hyperlinks

Watch the video (3:43). Need help?

Whenever you use the Internet, you use hyperlinks to navigate from one webpage to another. If you want to include a web address or email address in your PowerPoint presentation, you can choose to format it as a hyperlink so a person can easily click it. It's also possible to link to files and other slides within a presentation. It's easy to do all of this using two tools: hyperlinks and action buttons.

Optional: Download our practice presentation.

About hyperlinks

Hyperlinks have two basic parts: the address of the webpage, email address, or other location they are linking to, and the display text (which can also be a picture or shape). For example, the address could be https://www.youtube.com, and YouTube could be the display text. In some cases, the display text might be the same as the address. When you're creating a hyperlink in PowerPoint, you'll be able to choose both the address and the display text or image.

To insert a hyperlink:

  1. Select the image or text you want to make a hyperlink.
  2. Right-click the selected text or image, then click Hyperlink.
    Creating a hyperlink
  3. The Insert Hyperlink dialog box will open. You can also get to this dialog box from the Insert tab by clicking Hyperlink.
    The Insert Hyperlink dialog box
  4. If you selected text, the words will appear in the Text to display field at the top. You can change this text if you want.
  5. Type the address you want to link to in the Address field.
  6. Click OK. The text or image you selected will now be a hyperlink to the web address.
    The completed hyperlink

To insert a hyperlink to an email address:

  1. Right-click the selected text or image, then click Hyperlink.
  2. The Insert Hyperlink dialog box will open.
  3. On the left side of the dialog box, click Email Address.
    Creating an email hyperlink
  4. Type the email address you want to connect to in the Email Address box, then click OK.
    Typing the email address and display text

PowerPoint often recognizes email and web addresses as you type and will format them as hyperlinks automatically after you press the Enter key or spacebar.

To open and test a hyperlink

  1. After you create a hyperlink, you should test it. Right-click the hyperlink, then click Open Hyperlink.
    Opening a hyperlink
  2. Your web browser should open and then navigate to the linked page. If it does not work, check the hyperlink address for any misspellings.

To open a hyperlink while viewing your slide show, click the hyperlink.

Clicking a hyperlink

To remove a hyperlink:

  1. Right-click the hyperlink.
  2. Click Remove Hyperlink.
    Removing a hyperlink

More hyperlinks

In PowerPoint, you can use hyperlinks to link to resources that are not online. To create a quick way to refer to another slide in your presentation, you can create a hyperlink to that slide. If you need to access a file stored on your computer, you can create a hyperlink to it. Additionally, PowerPoint allows you to format pictures and shapes as hyperlinks.

To insert a hyperlink to another slide:

  1. Right-click the selected text or image, then click Hyperlink.
  2. The Insert Hyperlink dialog box will appear.
  3. On the left side of the dialog box, click Place in this Document.
    Creating a hyperlink to another slide
  4. A list of the other slides in your presentation will appear. Click the name of the slide you want to link to.
    Selecting a slide
  5. Click OK. The text or image will now be a hyperlink to the slide you selected.
    The completed hyperlink to a slide

To insert a hyperlink to another file:

  1. Right-click the selected text or image, then click Hyperlink. The Insert Hyperlink dialog box will appear.
  2. On the left side of the dialog box, click Existing File or Webpage.
  3. Click the drop-down arrow to browse for your file.
    Creating a hyperlink to a file
  4. Select the desired file.
    Selecting a file
  5. Click OK. The text or image will now be a hyperlink to the file you selected.
    The completed hyperlink to a file

If you plan on displaying your presentation on a different computer than you used to create it, your hyperlink to another file may not work. Make sure you have a copy of the linked file on the computer you are using to present, and always test hyperlinks before giving a presentation.

Using shapes and pictures as hyperlinks

Sometimes you might want to to format objects—including shapes, text boxes, and pictures—as hyperlinks. This is especially helpful if you want the object to act like a button. To do this, right-click the desired object and select Hyperlink from the menu that appears. Click the object during the presentation to open the hyperlink.

Hyperlinking an object

Inserting action buttons

Video: Using Action Buttons

Watch the video (3:51). Need help?

Another tool you can use to connect to a webpage, file, email address, or slide is called an action button. Action buttons are built-in button shapes you can add to a presentation and set to link to another slide, play a sound, or perform a similar action. When someone clicks or moves over the button, the selected action will occur. Action buttons can do many of the same things as hyperlinks. Their easy-to-understand style makes them especially useful for self-running presentations at booths and kiosks.

You can insert action buttons on one slide at a time, or you can insert an action button that will show up on every slide. The second option can be useful if you want every slide to link back to a specific slide, like the title page or table of contents.

To insert an action button on one slide:

  1. Click the Insert tab.
  2. Click the Shapes command in the Illustrations group. A drop-down menu will appear with the action buttons located at the very bottom.
    Selecting an action button
  3. Select the desired action button.
  4. Insert the button onto the slide by clicking the desired location. The Action Settings dialog box will appear.
  5. Select the Mouse Click or Mouse Over tab. Selecting the Mouse Click tab means the action button will perform its action only when clicked. Selecting the Mouse Over tab will make the action button perform its action when you move the mouse over it.
    The Action Settings dialog box
  6. In the Action on click section, select Hyperlink to: then click the drop-down arrow and choose an option from the menu.
    Creating a hyperlink with an action button
  7. Check the Play Sound box if you want a sound to play when the action button is clicked. Select a sound from the drop-down menu, or select Other sound to use a sound file on your computer.
    Selecting a sound
  8. Click OK.
    The completed action button

To insert an action button on all slides:

  1. Click the View tab.
  2. In the Master Views group, click the Slide Master command. A blank slide in the style of your presentation will appear. Don't worry about changing anything else.
    Changing the view to Slide Master
  3. Go to the Insert tab, and follow the instructions above to insert an action button.
  4. Return to the Slide Master tab, and click Close Master View. The new action button will now be on every slide.
    Returning to the normal view

To edit, move, or delete an action button inserted this way, click the View tab, then Slide Master. Click Close Master View after making the desired changes.

To test an action button:

After you create an action button, you should test it.

  1. Click the Slide Show tab.
  2. In the Start Slide Show group, click From Current Slide.
    Viewing the slide show
  3. Click your action button.
  4. After you have tested it, right-click anywhere on the screen and select End Show.
    Ending the slide show
  5. If your action button did not work as you intended, follow the instructions below to edit it.

To edit an action button:

  1. Select the action button.
  2. Click the Insert tab.
  3. In the Links group, click the Action command. The Actions Settings dialog box will appear.
    Editing an action button
  4. Edit the action or hyperlink.
  5. Click OK.

To change the appearance of an action button:

  1. Select the action button.
  2. Click the Format tab.
    Changing the appearance of an action button
  3. To change the button style or color, use the tools in the Shape Styles group.
    Changing the style of an action button
  4. To change the shape of the action button, click Edit Shape in the Insert Shapes group. Select a new shape from the drop-down menu.
    Changing the shape of the action button

Challenge!

  1. Open an existing PowerPoint presentation. If you want, you can download our practice presentation.
  2. Select text, and insert a hyperlink to a webpage. If you are using the example, go to slide 12. Turn the words Financial and Retirement Planning into a hyperlink to http://www.mutualofamerica.com/.
  3. Select text or an image, and insert a hyperlink to another slide in the presentation. If you are using the example, go to slide 2 and make the words Paperwork Process link to slide 11.
  4. Insert an action button that uses sound. If you are using the example, go to slide 12 and create an action button that links back to slide 1.
  5. Change the shape and style of an action button. If you are using the example, modify the shape and style of the action button you inserted on slide 12.
tag in HTML code. same color defaults apply to border color around an image link. Project 3: Creating Web Pages with Links, Images, and Formatted Text.">

9 Using Links on a Web Page
image linktext linkURL on status barProject 3: Creating Web Pages with Links, Images, and Formatted Text

10 Using Links on a Web Page
normal linkvisited linkactive linkMore on WebProject 3: Creating Web Pages with Links, Images, and Formatted Text

11 Using Links on a Web Page
Project 3: Creating Web Pages with Links, Images, and Formatted Text

12 Using Links on a Web Page
image with border and normal linkimage with border and visited linkimage with border and no linkProject 3: Creating Web Pages with Links, Images, and Formatted Text

13 Linking within a Web Page
allows user to move quickly from one section of a long Web page to anothermove directly to a section of interest rather than scrolling through a documentuse list of links like a menu or table of contents at the top of the pageProject 3: Creating Web Pages with Links, Images, and Formatted Text

14 Linking to an E-Mail Address
home page provides a way for visitors to contact person at company responsible for maintaining Web site or addressing customer questions or commentswhen visitor clicks link, automatically opens new message in default program and inserts appropriate contact address in the To fieldNote: if browser not configured to send mail, link will not workProject 3: Creating Web Pages with Links, Images, and Formatted Text

15 Using Absolute and Relative Paths
All projects in book both HTML code and graphical images saved in the same foldermore appropriate to separate HTML code files and graphical images files into different folderscreate folder structure in which each functional area has its own folderpath describes the location (folder or external Web site) where the files can be foundProject 3: Creating Web Pages with Links, Images, and Formatted Text

16 Using Absolute and Relative Paths
2 Kinds of PathsAbsolute specifies exact address for the fileE:\HTML\ChapterFiles\Chapter03\pastadivine.htmlcumbersome – if files are moved to different folder or Web server all absolute paths would have to changeRelative specify location of a file, relative to location of current fileutilizes double period (..) symbol to move up or down the folder structure..\images\pastadivine.htmlrelative path better choice offers more flexibilityif root folder must change would not have change the addressingProject 3: Creating Web Pages with Links, Images, and Formatted Text

17 Adding an ImagePasta Divine home page includes an image logo to provide visual appeal, catch visitor’s interest and promote company brand.logo image is same image found in print on company stationary, cards, and other promotional materialsconsistent visual and brand messageincluding width and height of logo image will improve load timealt attribute appears when page is loading and when user moves mouse over imageProject 3: Creating Web Pages with Links, Images, and Formatted Text

18 Adding an Imagewidth attribute and valuealt attribute and valueend img tagimg tag to insert imagesrc attribute used to specify the name and location of imageheight attribute and valueProject 3: Creating Web Pages with Links, Images, and Formatted Text

19 Font Attributes and Values
Project 3: Creating Web Pages with Links, Images, and Formatted Text

20 Adding a Left-Aligned Heading with a Font Color
start h1 heading tagend h1 heading tagstart font tagfont color attribute and color codeend font tagProject 3: Creating Web Pages with Links, Images, and Formatted Text

21 Creating Unordered (Bulleted) Lists
start ul tag with square bulletsh2 headingline itemsend ul tagProject 3: Creating Web Pages with Links, Images, and Formatted Text

22 Adding a Text Link<a> and </a> tags used to create links in a Web page.<a> tag also is called the anchor tag because it is used to create anchors for links to another page in same Web site, to an external Web site, within same Web page, or an link.basic format:<a href=“URL”>linktext</a>linktext is clickable word or phrase on Web pagehref (hypertext reference) name or URL of linked page or fileProject 3: Creating Web Pages with Links, Images, and Formatted Text

23 Tag Attributes and Functions
Project 3: Creating Web Pages with Links, Images, and Formatted Text

24 Adding a Text Link to Another Web Page within the Same Web Site
end <a> tagstart <a> taglink to Web page specials.htmlmonthly specials to appear as text linkProject 3: Creating Web Pages with Links, Images, and Formatted Text

25 Adding an Linkmailto: identifies link as linkto appear as clickable text for linkaddressend linkProject 3: Creating Web Pages with Links, Images, and Formatted Text

26 Adding a Text Link to a Web Page in Another Web Site
end <a> tagstart <a> taglink to Web page wikipedia.orghistory of pasta to appear as text linkProject 3: Creating Web Pages with Links, Images, and Formatted TextChapter 3: Creating Web Pages with Links, Images, and Formatted Text26

27 Validating a Web PageClick the Start button on the Windows Vista taskbar to display the Start menuClick the Internet icon in the pinned items list on the Start menu to start Internet Explorer. If necessary, click the Maximize button to maximize the browser windowClick the Address bar to select the URL in the Address barType validator.w3.org to replace the current entry then press the ENTER key.Click the Validate by File Upload tabProject 3: Creating Web Pages with Links, Images, and Formatted TextChapter 3: Creating Web Pages with Links, Images, and Formatted Text27

28 Validating a Web Page Click the Browse button
Locate the pastadivine.html file on your storage device and click the file nameClick the Open button in the Choose file dialog box and the file name will be inserted into the File boxClick the Check button. The resulting validation should be displayed as shown on the following slideChapter 3: Creating Web Pages with Links, Images, and Formatted TextProject 3: Creating Web Pages with Links, Images, and Formatted Text2828

29 Validating a Web PageProject 3: Creating Web Pages with Links, Images, and Formatted TextChapter 3: Creating Web Pages with Links, Images, and Formatted Text29

30 bulleted list with square bullet type
Viewing a Web Pageh1 headingh2 headingbulleted list with square bullet typeProject 3: Creating Web Pages with Links, Images, and Formatted Text

31 Testing Links in a Web Page
Pasta divine Web page prior to editingMore on WebProject 3: Creating Web Pages with Links, Images, and Formatted Text

32 Setting Link Targetstarget – named location, link within the same Web page or filein project a bulleted list is added as links to the targetslinks are directed to the heading at the top of each major sectionwhen clicked links will move Web page visitor to the targetsusers will not have to scroll to topics or sectionsfour text links names “To Top” will return users to top of documentMore on WebProject 3: Creating Web Pages with Links, Images, and Formatted Text

33 targets named locations
Setting Link Targetstargets named locationsProject 3: Creating Web Pages with Links, Images, and Formatted Text

34 Adding Links to Link Targets within a Web Page
Links to link targets named locationsProject 3: Creating Web Pages with Links, Images, and Formatted Text

35 Adding Links to a Target at the Top of the Page
HTML Code to setup target (top location) at beginning of document<a name="top"></a> as the tagHTML Code to use the target link (top) to return to the beginning of document<p><a href="#top"><font size=-1>To top</font> </a></p> as the tagProject 3: Creating Web Pages with Links, Images, and Formatted Text

36 Adding Links to a Target at the Top of the Page
More on WebLinks to top target named locationProject 3: Creating Web Pages with Links, Images, and Formatted Text

37 Formatting TextMore on Weblogical style tags allow browser to interpret tag based on browser settings, relative to other text in a Web page<h2> heading tag larger than regular text yet smaller than <h1><strong> text should have a strong emphasismost browsers interpret as boldphysical style tags specify a particular font change interpreted strictly by all browsers<b> bold tagin practice, <strong> and <b> tags have same result when Web page displayedProject 3: Creating Web Pages with Links, Images, and Formatted Text

38 Formatting TextProject 3: Creating Web Pages with Links, Images, and Formatted Text

39 Adding an Image with Wrapped Text
Alignment is a key consideration when inserting an imagehorizontal – values can be left or rightvertical – values can be top, middle, or bottom of imagealignment can give an image and the surrounding text completely different looks<img src=“agave.jpg” align=“right” alt=“Agave” width=“212” height=“203” />must enter a break <br /> tag to stop text wrapping<br clear=“right” /><br clear=“all” /> clears both left and right alignmentsMore on WebProject 3: Creating Web Pages with Links, Images, and Formatted Text

40 Adding an Image with Wrapped Text
Chapter 3: Creating Web Pages with Links, Images, and Formatted TextProject 3: Creating Web Pages with Links, Images, and Formatted Text4040

41 Clearing the Text Wrapping
Clearing Wrapped TextChapter 3: Creating Web Pages with Links, Images, and Formatted TextProject 3: Creating Web Pages with Links, Images, and Formatted Text4141

42 Using Horizontal and Vertical Spacing
Using spacing between and around images can make the Web page easier to readhspace attribute of <img> tag controls amount of horizontal space around an imagehspace=“20”vspace attribute of <img> tag controls amount of vertical space around an imagevspace=“20”Project 3: Creating Web Pages with Links, Images, and Formatted Text

43 Using Thumbnail Images
developers use thumbnail images to improve loading timethumbnail image is a smaller version of the image itselfused as a link, when clicked loads full-sized imagegives visitor opportunity to decide whether to view full-sized imagecreate thumbnail version of image, image is resized to smaller size using a paint or image-editing application, then saved to a different file name<a href=“largeimage.gif”><img src=“thumbnail.gif” /></a>use Back button on browser to return to original Web page displaying the thumbnailProject 3: Creating Web Pages with Links, Images, and Formatted Text

44 Obtaining ImagesWeb sites – downloaded free for noncommercial purposes (copyright rules)use search enginekey words “free GIFs” or “free Web images”right-click image, click Save Picture As, save image to your computerclip art – found in applicationsscanner or digital cameracreate images – using paint or image-editing programProject 3: Creating Web Pages with Links, Images, and Formatted Text

45 Chapter Summary Describe linking terms and definitions
Create a home page and enhance a Web page using imagesAlign and add bold, italics, and color to textChange the bullet type used in an unordered listAdd a text link to a Web page in the same Web siteChapter 3: Creating Web Pages with Links, Images, and Formatted TextProject 3: Creating Web Pages with Links, Images, and Formatted Text4545

46 Chapter Summary Add an e-mail link Use absolute and relative paths
Save and view an HTML file and test the linksOpen an HTML fileAdd an image with wrapped textChapter 3: Creating Web Pages with Links, Images, and Formatted TextProject 3: Creating Web Pages with Links, Images, and Formatted Text4646

47 Chapter Summary Add a text link to a Web page on another Web site
Add links to targets within a Web pageCopy and paste HTML codeAdd an image link to a Web page in the same Web siteChapter 3: Creating Web Pages with Links, Images, and Formatted TextProject 3: Creating Web Pages with Links, Images, and Formatted Text4747

48 Homework # 6 In the Lab 3 page HTML 140-141
Creating Two Linked Web PagesSee INF 186 Computer Assignment 6 Web page for details, hints, and requirements for the assignmentProject 3: Creating Web Pages with Links, Images, and Formatted Text

49 Creating Web Pages with Links, Images, and Formatted Text
Project 3 CompleteCreating Web Pages with Links, Images, and Formatted Text


Ads by Google

Presentation is loading. Please wait....
OK


Creating and Editing a Web Page



0 Thoughts to “Lab Assignment 2 Three Web Pages With Hyper Links In Powerpoint

Leave a comment

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *