200 likes | 210 Views
Learn how to create hyperlinks in web pages to make navigation easier and efficiently link different pages together. Improve the user experience by linking back to the main page and adding links to external websites. Includes tips on hyperlinking with pictures and email addresses.
E N D
Hyperlinks Tech Tuesday November 27, 2001 Lausanne 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!
Even pics can be hyperlinks! More Examples (in red):
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: This is the page you make every week. Just don’t save it as Index.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 blankmailto: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!