Please read and follow the instructions below. There is a task at the end of Week 5. As you work through the instructions, you will have completed most of the task. But please be aware that there are some more changes you will need to make to complete this week’s task. Week 5 task is due on Wednesday, March 7.

We will be learning two basic types of hyperlink first (O-1 to O-5). There will be more hyperlink types to learn from O-6 to O-10.

For those who are happy about learning the basic hyperlink skills, work up to O-5. Then you can skip the rest and scroll down to the “Week 5 Task A.”

For those who want to learn more about the hyperlink, keep working on the instructions (O-6 to O-10). Your task of the week is “Week 5 Task B."

Shunko Muroya, Japanese Advisor, Curriculum Branch, Alberta Education
Email: shunko.muroya@gov.ab.ca          Tel: +1-780-415-6165          Fax: +1-780-422-3745

In this course, we will follow the definitions below:

Examples:

Introduction
 
On a web page, a hyperlink (or link) is a text or an image, which, when clicked, will jump to another web page or another location in the current page.

Please be aware that in the Japanese Web Page Contest entry web pages, links are allowed only within your website pages. The only outside links allowed are to the Japanese Web Page Contest website (www.japanesewebpagecontest.com) and to your school’s official website. (See the Contest Guidelines E-9.)

Hyperlinks can be also used in other electronic documents such as Word document (.doc), Excel document (.xls), PowerPoint document (.ppt), email messages, etc. It works basically the same as a web page link, so you will find this handy when you create documents such as PowerPoint presentations.
　

There are different types of hyperlinks as follows:

　

Also, there are two way to display the linked page, depending on where/what you are making a link to, as followings:

Hyperlink types and examples

Go to the Nihongo Memo website (www.nihongomemo.com) and check the examples given below to see and understand the differences of the hyperlink types listed. Please pay attention to the “Application” column too.

Hyperlink - link to another page

Hyperlink/Bookmark Link - link to a specific part of a page

Hyperlink - file download

Hyperlink - thumbnail link to a larger photo/image

Hyperlink - email link/mailto

Hyperlink – Creating a link to another page

This is the most commonly used link type and you will mainly use this type of link in your contest entry website.

1. You need another web page to make a link to. Let’s create a web page in your “school name website” folder and name the page “dog” (see A-1 to A-6). Remember, you can use lower case letters or Arabic numbers only for web page file names. Do not use space, capital letters and other symbols. Make sure to choose “Web Page” for the file type. Check the folder and make sure the “dog.htm” file is in there. There might be a file “~$dog” with half-shaded Internet Explorer icon in the folder as well. This indicates that the “dog” file is in use (being edited).
    
   
   　

2. Also, don’t forget to name the page title in the “Summary” tab of the “Page Properties” dialogue box for the “dog.htm” page. (see E-7). Most of the times you don’t have to worry about the rest of the things we dealt with in E-1 to E-8 (“Web Page Options” and “Page Properties”) as long as you are using the same computer because these things become “default settings.”
   　

3. Insert a table in the “dog.htm” and make the necessary changes so that you can use the table for the page layout (see H-1 to H-13). Insert the Contest logo at the left top corner of the page (see L-2, the logo should be in the “images” folder on your desktop). Find a dog image from the Internet and save it in your “images” folder first (see K-10 to K-11), then insert the image in the cell  to the logo and type “いぬ” next to the image (see K-11 and L-3). Save (not “Save As”) the “dog” file and close the file. 
   
   
   　

4. In the “school name website” folder, right-click the “index.htm” file, and click “Edit.” MS Word will launch and the “index.htm” will open.
   
   
   　

5. In the “index.htm” page, type in “いぬのページ” in the cell next to the cat image. Highlight the text “いぬのページ,” click “Insert” in the taskbar, and click “Hyperlink.”
   
   
   　

6. The “Insert Hyperlink” dialogue box will appear. Check the following points in the dialogue box and make the necessary changes or choose an appropriate item as shown in the illustration below:
   　

   - Link to:	“Existing File or Web Page” is highlighted
   - Text to display:	“いぬのページ”
   - Look in:	“school name website” folder
   - Look in:	“Current Folder” is highlighted
   - (in the folder)	“dog.htm” is highlighted
   - Address:	“dog.htm”

   
    
   If everything is fine, click “OK”. A hyperlink should be created. You can tell if the hyperlink is created by the change of text colour (“いぬのページ”). If it’s blue and underlined, you have successfully created the hyperlink.
    
   If you don’t like the underline at the hyperlinked text, you can undo the underline. Highlight the text and click the “Underline” button two times.
    
   
    
   Save (not “Save As”) the “index.htm” file.
   　

7. It’s time to see if the hyperlink works or not.
    
   Somehow, the link will not work on the page if you open by clicking “File” and clicking  “Web Page Preview” to open the browser (don’t ask me why because I don’t know).
    
   You have to open your “school name website” folder on your desktop and double-click the “index.htm” file. The “index” page will appear in your browser.
    

8. Click “いぬのページ” in that page. If the page changes to the “dog.htm” page, the hyperlink is working!!
    
   
    

9. Let’s check if the hyperlink you just created works on the Internet. Upload all the files in the “school name website” folder to the server. Don’t forget to create the “dog_files” subdirectory and upload the image(s) in the “dog_files” folder to the “dog_files” subdirectory as well (see M-1 to M-4).
    

10. Go to your school website and click “いぬのページ” in that “index” page. If the page changes to the “dog.htm” page, the hyperlink is working on the Internet!
     
    
    　

The following link types are optional. You may not need them for your contest website. But if you would like to create your own Japanese program website, or you would like to create a more sophisticated website, they might come in handy.

There will be two different Week 5 tasks; one for those who are happy learning the basic hyperlink skills, and another for those who want to try more challenging tasks.

For those who are happy about to learn the basic hyperlink skills, you can skip the rest and scroll down to the “Week 5 Task A.”

For those who want to learn more about the hyperlink, keep working on the instructions below. Your task of the week is “Week 5 Task B."
　

Hyperlink/Bookmark Link - link to a specific part of a page

 We will use the “dog” page for learning to make a bookmark link within a web page.
　

1. Open the "dog.htm" on MS Word (open your “school name website” folder on your desktop, right-click the “dog.htm” file, and click “Edit.” MS Word will launch and the “dog.htm” file will open).
   　
2. The page has to be long enough for the bookmark link to work properly. So we will make the “dog” page long. Add many (100 maybe?) blank lines at the bottom of the page (move the cursor to the bottom of the page and keep pressing the “Enter” key until there are more than two full pages worth. You can tell that by the scroll bar at the right side).
   　
3. Once the blank lines are added, move the cursor to the bottom of the line, and type a text (“XYZ” for now). Please be aware that the text you use for a bookmark cannot contain a space. Roman letters, hiragana, katakana, kanji and numbers can be used for a bookmark text.
   　
4. Then add some more blank lines (one full page or longer) below the text.
   　
5. Highlight the bookmark text (“XYZ”), click “Insert” in the taskbar, and click “Bookmark.” The “Bookmark” dialogue box will appear. Move the cursor in the “Bookmark name” box, type in “XYZ” (this has to be exactly the same as the bookmark text), and click “Add.”
   
   
   　
6. Move back to the page top, type in a text (“Jump to XYZ” for now) under the logo, highlight the text, click “Insert” in the taskbar, and click “Hyperlink.”
   
   
   　
7. The “Insert Hyperlink” dialogue box will appear. Check that the text appears correctly in the “Text to display” box and click the “Bookmark” button. The “Select Place in Document” dialogue box will appear. Select the text to which you want to make a link (“XYZ” here) and click “OK.”
   
   
   
   Check the “Address” box (“#XYZ” should be there) in the “Insert Hyperlink” dialogue box and click “OK.” Don’t worry about “#.” It’s the html code for bookmark. A bookmark hyperlink should have been created. You can tell if the hyperlink is created by the change of colour of the text (“Jump to XYZ”). If it’s blue and underlined, you have successfully created the bookmark hyperlink. Save the “dog.htm” file.
    
   If you don’t like the underline at the hyperlinked text, you can undo the underline. Highlight the text and click the “Underline” button two times.
   
   
   　
8. Check if the bookmark hyperlink works or not. If the “dog” page is still open in your browser, click the “Refresh” button (if the page is not open, then open your “school name website” folder on your desktop and double-click the “dog.htm” file. The “dog.htm” will open in your browser). Click “Jump to XYZ.” If the page jumps to “XYZ” in the same browser window, the bookmark link is working.
   
   
   
   You don’t even have to check if this bookmark link will work on the Internet. If it worked on your computer, then it will work on the Internet.

A bookmark link can be used in either direction (downward or upward), and it can be used anywhere in a web page. You can use an image for a jumping point but you cannot create a bookmark (destination) on an image.

You have seen a “Page Top” link at the bottom of a web page, which takes you back to the top of the page. It uses a bookmark link.
　

This time we will make a bookmark link from the “index” page to the text “XYZ” in the “dog” page in the same window.

1. The “index.htm” page should be still open on MS Word (if not, open your “school name website” folder, right-click “index.htm” and click “Edit). We will use the cat image to create a bookmark link to point “XYZ” of the “dog” page. Click the cat image. A black rectangle with a small square at each corner and each side appears around the image. Click “Insert” in the taskbar, and click “Hyperlink.”
   
   
   　

2. The “Insert Hyperlink” dialogue box will appear. Click “dog” in the “Current Folder” box. “dog.htm” will appear in the “Address” box. Don’t click “OK” yet
   
   
   　

3. Click the “Bookmark” button. The “Select Place in Document” dialogue box will appear. Click “XYZ” and click the “OK” button.
   
   
    

4. Make sure “dog.htm#XYZ” is appearing in the “Address” box and click the “OK” button.
   
   
   
   　

5. Check if the bookmark hyperlink is working or not. If the “index” page is still open in your browser, click the “Refresh” button (if the page is not open, then open your “school name website” folder on your desktop and double-click the “dog.htm” file. The “index.htm” will open in your browser). Then click the cat image. If the page jumps to the “XYZ” text part of the “dog” page in the same browser window, the bookmark link is working.
   
   
   　

6. You might want to check if the bookmark link works on the Internet. Go to your the File Manager page of the Geocities server and upload the “index.htm” and “dog.htm” files. Then go to your school website and click the cat image in that “index” page. If the page jumps to the XYZ” text part of the “dog” page in the same browser window, the bookmark link is working on the Internet.
   
   

You can create a link for file download so that visitors to your website can download files from your website. You may not need this for the contest website, but it will be useful when you create your own website for your school’s Japanese program. You can upload worksheets, handouts and homework assignments so that your students can download them.

You can upload files such as Word document (.doc), Excel document (.xls), and PowerPoint document (.ppt). Just be careful about uploading a large file as it takes up a big space at the server.

1. Just create a normal word document (not a web page) for this purpose and name it “handout”. Remember you can only use lower case letters or Arabic numbers for file names. Do not use space, capital letters and other symbols. The document has to be in the “school name website” folder.
   　

2. The “index.htm” page should be still open on MS Word (if not, open your “school name website” folder, right-click “index.htm” and click “Edit). Type in “Click here for the handout” under the cat image. Highlight “Click here,” click “Insert” in the task bar, and click “Hyperlink.”
   
   
   　

3. The “Insert Hyperlink” dialogue box will appear. Click “handout” in the “Current Folder” box. “handout.doc” will appear in the “Address” box. Click the “Target Frame” button. The “Set Target Frame” dialogue box will appear. Choose “New window” from the box and click “OK” in the small dialogue box, but don’t click “OK” in the big box yet.
   
   
   　

4. Make sure “handout.doc” is in the “Address” box, also check “Target Frame: New window” is indicated at the bottom, and click “OK.”  (If not, click the “Remove Link” button and go over the above steps again.) Then save (not “Save As”) the “index.htm” file.
   
   
   　

5. Check if the file download hyperlink works or not. If the “index” page is still open in your browser, click the “Refresh” button (if the page is not open, then open your “school name website” folder on your desktop and double-click the “index.htm” file. The “index.htm” will open in your browser). Click “Click here.” A new window will open and the “File Download” dialogue box should appear. Click the “Open” button. If the “handout.doc” opens, then the file download link is working.
   
   
   　

6. It’s time to see if the file download link to the “handout.doc” website works or not on the Internet. To do so, we need to upload the “index.htrm” file and the “handout.doc” file at the server. Go to your Geocities server and upload them to the server. Then right-click your website’s URL and click “Open in New Window.”
   
   
   　

7. The “index” page will open in a new window. Click “Click here.” A new window should open and the “File Download” dialogue box should appear. Click the “Open” button. If the “handout.doc” opens, then the file download link is working on the Internet.
   
   

Hyperlink - creating a thumbnail link to a larger photo/image

Thumbnail photos/links are used when you want to display a number of photos but you don’t want to create a heavy (long loading time) web page or you don’t want to display large size photos for a page designing purpose.

The large size photo can be displayed in a new window or in the same window.

1. You need to prepare a set of a large photo and a small thumbnail photo for each photo (see K-7). Thumbnail photos are usually around 10KB file size, and it’s probably a good idea to keep the large one under 100KB file size. Put them all in the “images” folder so that you don’t have to look for them.
    
   
    

2. Create a web page for the large photo. Open MS Word, click “File” in the taskbar, and click “Save As.” The “Save As” dialogue box will appear. Choose your “school name website” folder from the “Save in” pull-down menu, type in a page name (lower case letters or Arabic numbers only, and no space, symbols, capital letters) in the “File name” box, choose “Web Page (*.htm; *.html)” from the “Save as type” pull-down menu, and click “OK.” Please make sure that you don’t choose other file types.
    
   
    

3. In the web page you just created, click “Insert” in the taskbar, click “Picture,” click “From File.” The “Insert Picture” dialogue box will appear. Choose the “images” folder from the “Look in” box and double-click the photo you want. The photo should appear on the web page. Save (not Save As) the page.
    

4. The “index.htm” page should be still open on MS Word (if not, open your “school name website” folder, right-click “index.htm” and click “Edit). Delete the large photo you inserted in Week 4 (click the photo and hit the “Delete” key). Then insert the thumbnail photo that goes with the large photo you inserted in the new web page above and type in “サムネールをクリックすると大きい写真が見られます。 “ under the thumbnail photo.
    
   
    

5. Click the thumbnail photo to highlight it, click “Insert,” and click “Hyperlink.” The “Insert Hyperlink” dialogue box will appear. Choose your “school name website” folder from the “Look in” pull-down menu, click the file for the large photo, and make sure the correct file is appearing in the “Address” box.
    
   If you want the large photo to appear in the same window, click “OK.”
    
   If you want the large photo to appear in a new window, click the “Target Frame” button. The “Set Target Frame” dialogue box will appear. Choose “New window” from the pull-down menu and click “OK.” Then click “OK” in the “Insert Hyperlink” dialogue box.
    
   
    
   Save (not Save as) the “index.htm” page.
    

6. Open the “index.htm” page in your browser, and click the thumbnail to see if the thumbnail link works or not.
    
   
   This is an example of the “Open in new window” type.
    

7. Upload all the files to the server and check the thumbnail link works or not. There should be a new folder for the large photo that you inserted in a new web page in your “school name website” folder. Remember that you need to create a new subdirectory for the new folder and upload the large photo in that subdirectory.
    
   

Hyperlink – creating an email link/mailto

If you want your website visitors to contact you, you can create an email link so that they can send you an email message with one click.

1. The “index.htm” page should be still open on MS Word (if not, open your “school name website” folder, right-click “index.htm” and click “Edit). Type in “ご意見・ご感想はこちらへどうぞ” in the cell below the thumbnail. Highlight the text, click ‘Insert” in the taskbar, and click “Hyperlink.” The “Insert Hyperlink” dialogue box will appear. Click ‘E-mail Address” under “Link to,” check the text in the “Text to display” box is correct, type in an email address to which you want to receive email messages from the visitors, and click “OK.” If you want to specify the subject of the messages from the visitors of your website, you can type in a text in the “Subject” box as well.
    
   
    
2. Open the “index.htm” page in your browser, and click “ご意見・ご感想はこちらへどうぞ” to see if the email link works or not. A new email message should pop up.
    
   

 
Click on the URL in the “Address” box to highlight it, right-click, then click “Copy” to copy the URL.
 

Also type in the following information in the text area:

Copy the following email address and paste it into the recipient address area (To…).
      shunko.muroya@gov.ab.ca

Also type in the following information in the text area:

Copy the following email address and paste it into the recipient address area (To…).
      shunko.muroya@gov.ab.ca