Hyperlink Tutorial

7/29/2019 Hyperlink Tutorial

1/90

Microsoft Office

FrontPage 2003 Training

Hyperlink basics


2/90

Hyperlink basics

Course contents

Overview: Becoming familiar with hyperlinks

Lesson 1: Hyperlinks and URLs

Lesson 2: Absolute and relative URLs

Lesson 3: Hyperlink destinations

(Continued on next slide.)


3/90

Hyperlink basics

Course contents, contd.

Lesson 4: Update hyperlinks across multiplepages

Most lessons include a list of suggested tasks and a set oftest questions.

Lesson 5: Fix broken hyperlinks


4/90

Hyperlink basics

People use many different words whenreferring to hyperlinks: links, hotlinks,hypertext, or even jumps. Whichevername you use, theres no question thathyperlinks are one of the things that

make the Web unique.

Overview: Becoming familiar with hyperlinks

This course covers hyperlink basics,from identifying and using URLs to

inserting links into pages. It alsoshows you time-savers like updatinghyperlinks across many pages andfixing broken hyperlinks.


5/90

Hyperlink basics

Course goals

Identify and use absolute and relative URLs.

Insert hyperlinks that go to pages in your Web site and topages in other Web sites.

Insert a hyperlink to a specific place in a page.

Insert a hyperlink to an e-mail address.

Update hyperlinks across multiple pages.

Find and fix broken hyperlinks.


6/90

Lesson 1

Hyperlinks and URLs


7/90

Hyperlink basics

Hyperlinks and URLs

Its easy to add hyperlinks to yourpages using FrontPage. In fact, itonly takes about three steps:

Inserting a hyperlink

1. Select either some text or a

picture.

2. Click the Insert menu.

3. ClickHyperlink.

From there, you have manydifferent options to choose from.


8/90

Hyperlink basics

A quick word about HTML

HTML stands for HypertextMarkup Language. This is alanguage commonly used to createdocuments for the World Wide Web.

Typically when you create and editWeb pages in FrontPage, you donthave to know too much aboutHTML.A Web page and its

underlying HTML code


9/90

Hyperlink basics

A quick word about HTML

You can create documents just likeyou would in other Microsoft Officeprograms, and FrontPageautomatically creates the HTML codefor you.

A Web page and its

underlying HTML code


10/90

Hyperlink basics

Whats behind the hyperlink

Hyperlinks arent just blue,underlined words that magically takeyou to another place. Behind them,in the HTML, is a URL that tells thebrowser where to go when you click

the link.

In the picture, Microsoft Web siteis an example of a hyperlink.

Underneath it is what the HTMLlooks like for the link.

A hyperlink and itsunderlying HTML code


11/90

Hyperlink basics

Whats behind the hyperlink

You dont have to get caught up inwhat the HTML means. Just payattention to the part thats enclosedin quotation marks.

A hyperlink and itsunderlying HTML code

Thats called a URL, and thatswhere the link takes you when youclick it.


12/90

Hyperlink basics

What is a URL?

A URL is a unique address for a fileon the Internet. URL stands forUniform Resource Locator. Meaning,URLs can locate a resource like aWeb page, picture, or sound file.

You no doubt have seen URLs in theAddress bar of your Web browser asyou browse the Web. A typicalexample of a URL is shown here.

An example of a URL

http://www.microsoft.com/default.htm


13/90

Hyperlink basics

U is for uniform

So once again, URL stands forUniform Resource Locator. By now,youre probably wondering what theword uniform refers to.

URLs are uniform because theyadhere to a consistent syntax, orformat. The URL syntax is shown onthe left.

Components of a URL


14/90

Hyperlink basics

U is for uniform

Heres an explanation of thedifferent parts of the syntax:

Components of a URL

1. Protocol. The protocol is usuallyhttp://, which stands for

Hypertext Transfer Protocol. Thisis the method used to access apage or file on the World WideWeb.

2. Web server. This is the servercomputer that contains the fileyou want to link to.


15/90

Hyperlink basics

U is for uniform


Components of a URL

3.Path. This is the folder or foldersthat contain the file you want to

link to. Here, office andproductsinfo are two foldersthat make up the path.

4. File name. This is the name of

the actual file you want to link to.


16/90

Hyperlink basics

U is for uniform


Components of a URL

5. Anchor. Also known in FrontPageas bookmarks, anchors are an

optional item in the syntax. The #symbol separates the anchor fromthe rest of the URL.


17/90

Hyperlink basics

Test 1, question 1

Which of the following is true about a URL?(Pick one answer.)

1. It only points to files on your hard disk.

2. It is a unique address for a file on the Internet.

3. It is a unique way to display blue, underlined text.


18/90

Hyperlink basics

Test 1, question 1: Answer

It is a unique address for a file on the Internet.


19/90

Hyperlink basics

Test 1, question 2

URL stands for which of the following? (Pickone answer.)

1. United Retail Locator.

2. Universal Resource Locator.

3. Uniform Resource Locator.


20/90

Hyperlink basics


Uniform Resource Locator.


21/90

Hyperlink basics

Test 1, question 3

Which part of the following URL is the path? (Pick oneanswer.)

http://www.microsoft.com/office/default.htm#section

1. The whole thing is the path.

2. office/default.htm#section

3. office


22/90

Hyperlink basics


office

The path comes after the Web server name (also referred toas the domain) and before the file name. In this case,www.microsoft.com is the domain, and default.htm isthe file name.


23/90

Lesson 2

Absolute and relative URLs


24/90

Hyperlink basics

Absolute and relative URLs

URLs arent just for hyperlinkstheyre also used to displaypictures, play sound files, orreference any file on the Internet.

Along with three familiar-lookinghyperlinks, this Web page haspictures. While the pictures appearseamlessly within the page, they

arent embedded or stored withinthe page itself. Instead, they arereferenced in the HTML with URLs.

Web page that usesURLs for hyperlinks andfor pictures


25/90

Hyperlink basics

About absolute and relative URLs

Given that URLs are used sofrequently, its important tounderstand that there are two kindsof URLs: absolute and relative.

Figure 2: Examples ofrelative URLs

default.htm

products/ball.htmproducts/pricing/list.htm

../hat.htm


Figure 1: An absoluteURL


26/90

Hyperlink basics


Figure 1 shows what a typicalabsolute URL looks like.


Figure 1: An absoluteURL Notice that it has all the required

parts of the URL syntax shown in

the previous lesson.


27/90

Hyperlink basics


Figure 2 contains four examples ofrelative URLs. These URLs lookdrastically shorter.

Figure 2: Examples ofrelative URLs

default.htm

products/ball.htmproducts/pricing/list.htm

../hat.htm

But dont be fooled by their meager

appearance. Even though theyreshorter, there are significantadvantages to using them.


28/90

Hyperlink basics

Absolute URLs

Absolute URLs contain absolutelyevery piece of the URL syntaxshown earlier (except the anchor,since thats optional).

Absolute URLs are good to use whenyou need to link to a page outsideyour Web page. For example, if youwanted to link to someone elses site

for additional information, youd usean absolute URL for that link.

Example of an absoluteURL



29/90

Hyperlink basics

Relative URLs

Relative URLs are shortertheydont contain every part of the URLsyntax. For the parts of the syntaxthat arent specified, the browseruses the parts of the current page.

This is why theyre called relativeURLs, because their location isrelative to the current page.

A relative URL locating apage in the same folder

l


30/90

Hyperlink basics

Relative URLs

One of the most common relativeURLs has only a file name, like this:


default.htm

The browser assumes that themissing parts of the URL syntax arethe same as the current page. It justhas to find the default.htm file in

the same folder as the current page.

l i


31/90

Hyperlink basics

Relative URLs

For two reasons, you should alwaysuse relative URLs to link to pageswithin your site:


Theyre shorter and thereforeeasier to use when insertinghyperlinks in your Web pages.

Most importantly, if you end upmoving a group of pages, then you

dont have to change all of theURLs if the pages are in the samerelative position to each other.

R l i URL h i h f ld


32/90

Hyperlink basics

Relative URLs that start with a folder name

If your Web site is organized using ahierarchy of folders, then you needto know how to make relative URLsthat locate files that are up or downin the hierarchy.

Browser destinationgiven a relative URLproducts/ball.htm

For example, the following URLpoints to a file thats further down inthe folder hierarchy:

default.htm

R l ti URL th t t t ith f ld


33/90

Hyperlink basics

Relative URLs that start with a folder name

Notice the illustration on the left: Ifthe current page is default.htm,the browser assumes thatproducts is in the same folder thatdefault.htm is in (Web site).

Browser destinationgiven a relative URLproducts/ball.htm

Then, since products is a folder,the browser finds ball.htm insidethat folder.

R l ti URL th t t t ith lti l f ld


34/90

Hyperlink basics

Relative URLs that start with multiple folder names

The following URL is a little longerand points to a file even furtherdown the hierarchy. It starts withtwo folder names and ends with afile name.

Browser destinationgiven a relative URLproducts/pricing/list.htm

products/pricing/list.htm

R l ti URL th t t t ith lti l f ld


35/90

Hyperlink basics

Relative URLs that start with multiple folder names

Take a look at the illustration: If thecurrent page is default.htm, thebrowser assumes that theproducts folder is in the samefolder that default.htm is in (Web

site).

Browser destinationgiven a relative URLproducts/pricing/list.htm

Inside that folder, it finds thepricing folder. Finally, it openslist.htm.

R l ti URL th t t t ith /


36/90

Hyperlink basics

Relative URLs that start with ../

The following relative URL may lookdrastically different from the onesyouve seen so far. It starts with twoperiods and a forward slash.

Browser destinationgiven a relative URL../default.htm

../default.htm

This situation is a little different.

R l ti URL th t t t ith /


37/90

Hyperlink basics

Relative URLs that start with ../

Browser destinationgiven a relative URL../default.htm

As shown on the left, if the currentpage is ball.htm, the browserassumes that the default.htm fileis one folder up from the folder thatball.htm is in (products).

Note: You might see URLs with many

periods and forward slashes, for example,../../default.htm. Each ../ represents afolder thats further up in the hierarchy.

S ti f ti


38/90

Hyperlink basics

Suggestions for practice

1. Insert a hyperlink using an absolute URL.

2. Insert a hyperlink using a relative URL.

3. Insert an image using a relative URL.

Online practice (requires FrontPage 2003)

Test 2 q estion 1
http://office.microsoft.com/training/training.aspx?AssetID=RP060867311033&CTT=6&Origin=RP060872971033http://office.microsoft.com/training/training.aspx?AssetID=RP060867311033&CTT=6&Origin=RP060872971033


39/90

Hyperlink basics

Test 2, question 1

Whats the primary difference between an

absolute and a relative URL? (Pick one answer.)

1. A relative URL links to information that is related toyour site, and an absolute URL doesnt.

2. A relative URL contains the entire URL syntax, andthe absolute URL doesnt.

3. An absolute URL contains the entire URL syntax,and a relative URL doesnt.

Test 2 question 1: Answer


40/90

Hyperlink basics


An absolute URL contains the entire URL syntax, and a

relative URL doesnt.

This is the main difference between absolute and relativeURLs.

Test 2 question 2


41/90

Hyperlink basics

Test 2, question 2

If you want to link to a file named News.htm,

and that file is in the same folder as the currentpage, then what would the relative URL be?(Pick one answer.)

1. ../News.htm

2. News/News.htm

3. News.htm



42/90

Hyperlink basics


News.htm

Since no other part of the URL syntax is specified, thebrowser would find the News.htm file in the same folder as

the current page.

Test 2 question 3


43/90

Hyperlink basics

Test 2, question 3

If you click a link that has the URL

../products.htm, what will the browser do?(Pick one answer.)

1. The browser will open products.htm, which is two

folders up from where the current file is.

2. The browser will open products.htm, which is onefolder up from where the current file is.

3. The browser will open products.htm, which is insidea hidden folder.



44/90

Hyperlink basics


The browser will open products.htm, which is one folder upfrom where the current file is.

The ../ means that the products.htm isnt in the currentfolder, but in the folder containing the current folder (or, onefolder up in the hierarchy).


45/90

Lesson 3

Hyperlink destinations



46/90

Hyperlink basics


Lets talk about the different places

hyperlinks can take you and coversome strategies both for using eachdestination option and decidingwhich one is right for any given

situation.

Examples of hyperlinkdestinations

This lesson will cover some of themore common destinations:another Web site, another file on

your site, a specific place within apage, and an e-mail address.

Link to another Web site


47/90

Hyperlink basics


As you know from the previous

lesson, you use absolute URLs tolink to other sites. There are someimportant things to keep in mindwhen using absolute URLs.

Using an absolute URL,hyperlinks can go toother sites.

To start with: When a link goes toanother site, FrontPage calls it anexternal link since it goes to adestination thats external, or

outside your site.



48/90

Hyperlink basics


Using an absolute URL,hyperlinks can go toother sites.

Next: Since absolute URLs link to

Web sites that are not under yourdirect control, the link could break atsome point.

Possible reasons for a broken linkcould be that the site is unavailable,or the creator of that site hasrenamed the site or file.

Link to another page on your Web site


49/90

Hyperlink basics


As you learned in the previous

lesson, if you want to link to anotherpage in your site, then you shoulduse a relative URL.

Its important to use relative URLswithin your Web site. If you end upmoving a group of pages, you wonthave to change all the URLs if thepages are in the same relativeposition to each other.

Using a relative URL,hyperlinks can go to

pages within your site.



50/90

Hyperlink basics


You could use an absolute URL to

link to another page in your site ifyou really wanted to.

Using a relative URL,hyperlinks can go to

pages within your site.

However, if your site moves at any

time, the path of the absolute URLmight not be correct anymore, andthe link might break.

Link to a place within the current Web page


51/90

Hyperlink basics


Linking to a specific place within a

page is commonly called linking toanchors or bookmarks.

These links can be handy when you

want to point to a specific locationother than the very top of the page.

Using a bookmark, ahyperlink can point to aspecific place in a page.



52/90

Hyperlink basics


To link to a bookmark, you must

first open one of your Web pages inFrontPage and insert the bookmark.In FrontPage, the bookmark isrepresented by a blue flag.

Using a bookmark, ahyperlink can point to aspecific place in a page.

The second step is to create theactual link to the bookmark.

Link to a specific place within another Web page


53/90

Hyperlink basics

Link to a specific place within another Web page

This kind of link is very similar to the

one on the previous slide, althoughhere the link takes you to a specificplace on another page altogether.

To insert the link, you first open inFrontPage the page you want to linkto and insert the bookmark. Then,on the page you want to link from,you create the actual link to thebookmark.

A hyperlink can point toa specific place in adifferent page.

Link to an e-mail address


54/90

Hyperlink basics

Link to an e mail address

A link to an e-mail address is an

exception to the other types of linksyouve seen so far.

This link doesnt take you to a page

or file. Instead, the option creates anew e-mail message window in theWeb visitors default e-mail programand automatically puts an e-mailaddress in the To: line.

A link to an e-mailaddress

Link to an e-mail address


55/90

Hyperlink basics

Link to an e mail address

You can use this type of link when

you want to solicit e-mail from Webvisitors.

A link to an e-mailaddress

For example, Contact Us and

Send us your feedback are typicalphrases to use with these links.

Link to any kind of file


56/90

Hyperlink basics


If you need people to access a file

like a word processing document,add the file to your Web site (Filemenu, Import). That way you canuse a relative URL to link to it.

You can also link to a file on yourcomputer or a network server. Butkeep in mind that if people donthave access to those locations, they

may get an error message whentrying to access the file.

Hyperlinks going to fileson a local computer andon a network server



57/90

Hyperlink basics


For example, lets say you insert a

hyperlink to C:\folder\filename.doc,and you publish your site to anotherserver.


When visitors to your site click thislink, their browser will try to accessC:\folder\filename.doc on their owncomputer. Chances are, they wonthave the file and they will get an

error message.



58/90

Hyperlink basics


The same problem exists when you

link to a file on a network serverthat people dont have access to.


To solve this problem, make sure

that the people using your site haveaccess to that server.



59/90

Hyperlink basics


1. Link to a specific place within the current Web page.

2. Link to a specific place within another Web page.

3. Insert a hyperlink to an e-mail address.


Test 3, question 1


60/90

Hyperlink basics

Test 3, question 1

The best time to use an absolute URL is when

you need to link to a page that is where? (Pickone answer.)

1. Inside your Web site.

2. Inside another folder within your Web site.

3. Outside your Web site.



61/90

Hyperlink basics


Outside your Web site.

This is the very best situation in which to use an absoluteURL.

Test 3, question 2


62/90

Hyperlink basics

Test 3, question 2

Before linking to a specific place in a page, you

must insert which of the following? (Pick oneanswer.)

1. Hyperlink.

2. Bookmark.

3. Placeholder link.



63/90

Hyperlink basics


Bookmark.

You need to insert a bookmark before you can link to aspecific place in a page.

Test 3, question 3


64/90

Hyperlink basics

Test 3, question 3

If you want to store a Microsoft Office Word

document in your Web site and then link to it,what should you do first? (Pick one answer.)

1. Convert the Word document into HTML by selecting

Save as Web Page.

2. Publish the Word file to your site by selectingPublish on the File menu.

3. Just import the file.



65/90

Hyperlink basics


Just import the file.

To import the file, you clickImport on the File menu. Thiswill store the document in the Web site folder and you can

link to it easily from there.


66/90

Lesson 4

Update hyperlinks acrossmultiple pages

Update hyperlinks across multiple pages


67/90

Hyperlink basics

p yp p p g

Once youve created an intricate

web of hyperlinks, it can bechallenging to update all of thoselinks when you have to rename afile or move a file in your Web site.

FrontPage makes this processeasier and lets you update linksacross many Web pagesautomatically, provided the Website youre working with is aFrontPageWeb site.

A FrontPage Web site,with the Web Site tabappearing at the top

Renaming files


68/90

Hyperlink basics

g

If you rename a file in your

FrontPage Web site, you will see thismessage if one or more pages havehyperlinks that go to that file.

When you clickYes, FrontPage willautomatically update all hyperlinksto point to the new name of the file.

This message appearswhen you rename a file.

Moving files


69/90

Hyperlink basics

g

If you move a file in your FrontPage

Web site, youll see this message.

This tells you that although youremoving a file, FrontPage is now

renaming the location of that file foryou in all pages that link to it.This message indicateswhat happens when youmove a file.

Working with files outside of FrontPage


70/90

Hyperlink basics

g g

Renaming and moving files in a

FrontPage Web site is really easy.

If, however, you add, edit, rename,or move files outside of FrontPage,you could run into some problemswhen you reopen the Web site inFrontPage.

1. Click the Tools menu.

2. ClickRecalculate

Hyperlinks.

Working with files outside of FrontPage


71/90

Hyperlink basics

g g

In cases where you work with files

outside of FrontPage, werecommend using the RecalculateHyperlinks feature, as shown here.

1. Click the Tools menu.

2. ClickRecalculate

Hyperlinks.

Recalculating hyperlinks will allowFrontPage to catch up with thechanges you made to the site.



72/90

Hyperlink basics

gg p

1. Rename a page.

2. Move a file.


Test 4, question 1


73/90

Hyperlink basics

, q

If you had a FrontPage Web site and you added,

renamed, or moved files using another program,which of the following would let FrontPagecatch up with the changes you made? (Pick oneanswer.)

1. The Recalculate Hyperlinks feature.

2. The Broken Hyperlinks report.

3. The Hyperlinks view.



74/90

Hyperlink basics

q

The Recalculate Hyperlinks feature.

Recalculating hyperlinks will allow FrontPage to catch upwith the changes you made.

Test 4, question 2


75/90

Hyperlink basics

If you move a file from one folder to another

within a FrontPage Web site, what will happen?(Pick one answer.)

1. FrontPage will ask if you want to update the links tothe file.

2. FrontPage will move the file and update all the linksto it, without warning you.

3. FrontPage will warn you, to make sure you dontinadvertently move the file.



76/90

Hyperlink basics

FrontPage will move the file and update all the links to it,

without warning you.

When you move something, the links to the file will changethroughout all pages of the site. FrontPage will not warn

you. But, you can always move the file back if you want,and the links will get updated again.


77/90

Lesson 5

Fix broken hyperlinks

Fix broken hyperlinks


78/90

Hyperlink basics

Broken hyperlinkslinks that dont

go anywhereare often caused byremoving a page or by changingthe location of a page. They canalso be caused by mistyping thepage or file name.

You can catch broken hyperlinksbefore you publish your Web siteby using the Broken HyperlinksReport.

Two error messages thatresult from a broken

hyperlink

How to fix broken hyperlinks


79/90

Hyperlink basics

Before you run the Broken

Hyperlinks Report, you must firstopen a FrontPage Web sitethereport cannot be run on individualpages. When youre ready, you can

run the report from Reports view.

Broken Hyperlinks Report



80/90

Hyperlink basics

The report checks two kinds of

hyperlinks: internal links andexternal links.


Internal links point to pages withinyour Web site, for exampleDefault.htm or AboutUs.htm.External links point to sites outsideyour Web site. For example, youmight have a link to

http://www.microsoft.com.



81/90

Hyperlink basics

Any internal link that goes to a

missing or misspelled page will haveBrokenstatus. Heres what to do:


1. Double-click the broken link.

2. Type the correct file name.

3. Or browse to the correct location.

4. Correct the hyperlink on all pages.



82/90

Hyperlink basics

External links will initially have

Unknown status. When you run theBroken Hyperlinks Report, FrontPagewill ask if you want to verify externallinks. This check ensures that your

external links point to valid andavailable sites on the Web.

Broken Hyperlinks Report If you choose Yes, make sure yourInternet connection is intact.



83/90

Hyperlink basics

1. Find and fix internal hyperlinks that are broken.

2. Verify external hyperlinks.


Test 5, question 1


84/90

Hyperlink basics

Which of the following error messages may be

due to a broken hyperlink? (Pick one answer.)

1. Page cannot be displayed

2. Unauthorized

3. Service Unavailable



85/90

Hyperlink basics

Page cannot be displayed

This is a typical error message that Web visitors may getwhen clicking a broken hyperlink.

Test 5, question 2


86/90

Hyperlink basics

What is the difference between an internal link

and an external link? (Pick one answer.)

1. Internal links point to pages, and external linkspoint to folders.

2. Web visitors can see external links, but they cantsee internal ones.

3. Internal links go to pages within your Web site, and

external links go outside your site.



87/90

Hyperlink basics

Internal links go to pages within your Web site, and external

links go outside your site.

This is the difference between internal links and externallinks.

Test 5, question 3


88/90

Hyperlink basics

What does it mean when a hyperlink is marked

as Unknown? (Pick one answer.)

1. It means that the link is an internal link, and hasntbeen verified by FrontPage yet.

2. It means that the link is an external link, and isbroken.

3. It means that the link is an external link, and hasnt

been verified by FrontPage yet.



89/90

Hyperlink basics

It means that the link is an external link, and hasnt been

verified by FrontPage yet.

To verify the link, you can right-click the link. Or, FrontPagewill automatically prompt you to verify it.

Quick Reference Card


90/90

For a summary of the tasks covered in this course, view the

Quick Reference Card.
http://office.microsoft.com/training/Training.aspx?AssetID=RP060868851033&CTT=6&Origin=RC060866031033http://office.microsoft.com/training/Training.aspx?AssetID=RP060868851033&CTT=6&Origin=RC060866031033

Hyperlink Tutorial

Documents

Transcript of Hyperlink Tutorial