Hyperlinks

Tech TuesdayNovember 27, 2001Lausanne Collegiate School

What is a hyperlink? In a book, we

turn the pages with our fingers.

On the web, we click on a word, picture, or a graphic to turn to another page.

Hyperlinks are these page-turners!

Examples of Hyperlinks (in red):

More Examples (in red):

Even picscan be hyperlinks!

Why use hyperlinks?

Makes navigating your page easier!

Helps your students and parents focus on what’s important to them!

Allows you to put more info, pics, etc. on your pages!

Prerequisites to Hyperlinks

You have made a teacher web page before

You have created a main page in Word (do not save as a web page yet)

You have created a second page you want linked to the main page

You might have several pages to link to the main page

Tricky Part:

Before you begin, make sure all your pages EXCEPT THE MAIN PAGE are already saved as web pages (with .html at the end of their titles)

Can name all these pages anything (ducky.html, Octoberletter.html)

Make sure your main page is NOT saved as a web page but as a Word Document!

To Begin:

H olid ayp ics .h tm l I lln essa le rt.h tm l V o lu n teerh e lp .h tm l

Y ou r M a in P ag e(D ecem b er.d oc )

This is the page you make every week. Just don’t save it asIndex.html yet!!

These are your new pages you want to link. They ARE saved as web pages (see the .html).

Creating Hyperlinks Open your main page in Word

(remember: it cannot already be saved as index.html)

Scroll to the bottom or where ever you want the hyperlink.

Type the word or phrase you want as your hyperlink (ex.: Click Here for Holiday Pics)

Creating Hyperlinks Highlight the phrase or word you

just typed. Go to Insert>Hyperlink at the

menu bar up top. Click “Browse for File” and scroll

through your folders until you find the file you need (ex. Holiday Photo1.html)

When you find the right file, click OK.

Creating Hyperlinks

On your main web page, you will see that your word or phrase are now underlined and in a different color.

This tells you it has been hyperlinked.

Repeat this process for all your pages!

Creating Hyperlinks Once you’ve put all your hyperlinks

in your main page, save that main page as index.html as usual.

Open up First Class Open up Home Page Folder Delete anything in Home Page

Folder Drag over your new index.html and

all other files you linked to it

Creating Hyperlinks Your computer sometimes creates

folders (such as index_files) for all linked pages

You can create a folder inside Home Page Folder (File>Folder>New Folder)

Put all your pages except index.html in this folder

Right-click on the folder, left-click on Properties, type “index_files” as the name), close the window, and save.

Check Your Work! Go to your page on Lausanne’s web

site and click on every link to make sure it works.

If a link doesn’t work, go back to the Word document and highlight the non-working link

Go to Insert>Hyperlink and make sure the phrase links to the right file.

Did You Know? All web page addresses must only have

numbers and letters in them. When naming your files, don’t add

spaces or punctuation (except for the underline symbol).

Hot Tip: Link to Your E-Mail! Type your e-mail address on your

main page Highlight your address Go to Insert>Hyperlink Type this phrase in the blank

mailto:ljackson@lausanneschool.com(be sure to put your first initial and last name in place of mine!)

Hot Tip:Help People Navigate Your Pages Once someone has clicked on your

second or eighth page, it can be confusing as to how to return to your main web page.

Put a phrase, picture, etc. at the bottom of each secondary page and link it back to your main page (type the address for your main page in the blank under Insert>Hyperlink)

Hot Tip:Link Cool Web Sites

Do you use Funbrain, Quia, or other sites? Type a phrase or picture and link it by typing

the web site’s address in Insert>Hyperlink.

My Quia Link

Hot Tip:Link With Pics or Graphics Got a cool picture of your class, a

seasonal icon, or lynx mascot picture. Use it as a link!

Place the picture, click on it (little boxes around the picture tell you it’s highlighted), and insert the hyperlink.

Notice that a hand replaces your cursor arrow whenever you’re over a hyperlink! Sounds like a test question to me!

Excellent Work!