pixel.gif (42 bytes)Home | Instructor | Listserve | Web Discussion Board | Toolkit

PC Webpage Design: home | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | HTML Resources
pixel.gif (42 bytes)
Converting A Bookmarks / Favorites List
Into a Curriculum-Specific Webpage
pixel.gif (42 bytes)  

Note: This tutorial details two methods that you can use to convert a Bookmarks/Favorites List into a curriculum-specific webpage. If you are using the Netscape Navigator web browser, you will be able to use the Netscape Method. If you are using the Microsoft Internet Explorer web browser (Version 5 and newer), follow the procedure detailed below in place of the Netscape Method.

If you are using the proprietary AOL web browser (all versions) or the Microsoft Internet Explorer (Version 4 or earlier) web browser, proceed to the Alternate Method.

Microsoft Internet Explorer (Version 5 or newer)

  1. Insert the TEC 908 floppy disk into your disk drive.
  2. Open Internet Explorer
  3. Click on the File menu
  4. Select Import and Export
  5. When the Wizard appears, click on Next
  6. Click on Export Favorites from the dialog box that appears
  7. Click on Next
  8. If the top Favorites folder is not selected, click once on that folder icon
  9. Click on Next
  10. Click in the radio button in front of Export to a File or Address
  11. Click on Browse
  12. Select the a: drive and the a:\root folder as the destination for the exported favorites
  13. Replace the default file name with cswp1 (for curriculum-specific webpage #1) and be sure to leave the Save as type set to HTML
  14. Click on Save
  15. Internet Explorer will convert your favorites list to an HTML file (a webpage)
  16. Your original favorites list will be left intact on your computer.
  17. Click on Next when the Wizard screen reappears
  18. Click on Finish to exit the Wizard
  19. A dialog box will appear informing you that the export process was successful

Creating a Curriculum-Specific Webpage: Netscape Method

In this activity, we will be using the bookmarks feature of the Netscape web browser to assist in the creation of a curriculum-specific webpage. We will want to start with an empty bookmark file. If you would like to save your existing bookmarks, you can start by exporting the bookmarks to a floppy disk. Here’s how...

  1. Open the Netscape browser software application.
  2. Click on the Bookmarks menu.
  3. Double-click View Bookmarks.
  4. Your existing list of bookmarks should appear.
  5. Click on the File menu.
  6. Double-click on Save As
  7. You will be given an option of saving the bookmarks to a folder on your hard disk or to a floppy disk. (It is suggested that you save the bookmark file to a floppy disk. Insert a blank floppy disk into the disk drive. Under Drives, use the down arrow to select the a: drive and click OK. Your existing bookmarks will be saved to the floppy disk. When you are finished with this activity, you can import the file back to the Netscape application using the Import Bookmarks option.)
  8. Now we will delete the existing bookmarks to create an empty file that we will use to store our curriculum-specific bookmarks.
  9. Select the first bookmark on your list (click once, it will turn blue). Now move to the last bookmark on the list and click on that item. The entire bookmark list should turn blue. (You can also select them one at a time…)
  10. Click on the Edit menu and using the Delete key, delete all the bookmarks in your file.
  11. Double-click the close box (upper left corner) of the Netscape Bookmarks file.
  12. You are now ready to begin collecting your curriculum-specific bookmarks.

Collecting Curriculum-Specific Bookmarks

You can use the bookmarks you collected earlier in the course or you can return to the Toolkit and use the Search Engines and Web Indexes to collect new bookmarks for this activity.

Each of the URL’s you select will become part of your future webpage. If you decide you don’t want a particular bookmark, you can delete it by clicking on the Bookmarks menu, clicking on View Bookmarks, highlighting the item and hitting the Delete key. Continue your search until you have collected 10-15 curriculum-specific bookmarks. You are now ready to build a webpage using these bookmarks.

Converting a Bookmark List into a Webpage

  1. Insert the TEC 908 floppy disk into the disk drive of your computer.
  2. Click on the Bookmarks menu.
  3. Click on View Bookmarks.
  4. Click on the File menu.
  5. Click on Save As
  6. Select the a: drive under the Drives portion of the dialog box that appears.
  7. In the Directories/Folders box, select a:\root
  8. In the File Name box, replace the default file name with cswp1 (for curriculum-specific webpage #1) Note: Windows 3.1x users: Rename the file cswp1.htm (Be sure to include the .htm suffix on the file name or this won’t work!) Windows 95 users: Just name your file cswp1 and check that HTML Files appears in the Save as type: box.
  9. Click OK.
  10. Double click the close box to close the Netscape Bookmarks screen.
  11. Close Netscape.

Creating the Curriculum-Specific Webpage

  1. With the TEC 908 floppy disk in the disk drive, open the DiDa HTML Editor.
  2. When the blank HTML Document screen appears, click on the File menu.
  3. Click on Open.
  4. Select the root folder where you stored the bookmarks. The path should be a:\root
  5. In the list of files in the File Name box, select the cswp1.htm file by clicking on it and highlighting it in blue.
  6. Click OK.
  7. The HTML file should appear on the screen. Hint: You will want to maximize the screen by clicking in the up arrow in the upper right corner as this is a large document and we are going to need some room to work with it.
  8. You should see something like this:



  9. Don’t panic… this looks complicated but we can make sense of it…We are going to strip off some of the unneeded HTML tags that Netscape added to this document and modify it to suit our purposes.
  10. Hold down the mouse button and drag it across the lines that appear above the <TITLE> <TITLE> tags. (The lines should turn blue.)
  11. Hit the Delete key to remove these lines.
  12. Hold down the mouse button and drag across the works that appear between the <TITLE> <TITLE> tags. (The words should turn blue.)
  13. Replace the words with a descriptive title that you want to appear in the title bar of the web browser.
  14. Hold down the mouse button and drag across the words that appear between the <H1> <H1> tags. (The words will turn blue.)
  15. Replace the words with a descriptive title that you want to appear at the top of the webpage you are creating.
  16. Now, look carefully at the top few lines of HTML text and you may see another line ending in the words > ….bookmarks</H3 (Note: this will vary depending on which version of Netscape you are using!)
  17. If the …bookmarks</H3 tags are present, carefully, delete the words between the > and </H3, leaving a blank space. Take care not to delete the > < tags.
  18. Your document should now look something like this:



  19. You could go through the entire document and strip off all the other tags that Netscape added to the file to keep track of the date when the bookmark was last visited, but you don’t need to. The file will work just fine the way it is.
  20. Save the changes you made (File/Save)
  21. Be sure the file is being saved as a:\root\cswp1.htm
  22. Click on the Preview Screen to take a look at your new curriculum-specific webpage.
  23. Make any necessary changes to the webpage (background colors, horizontal lines, inserting graphic images, etc.) by toggling between the HTML Document and Preview Screen… Here’s where you can try out all the skills you developed in the last three activities!
  24. Be sure to Save any changes that you make.
  25. Close DiDa (File/Exit)

Testing the Curriculum-Specific Webpage

  1. Log on to the Internet and open your web browser.
  2. When the web browser is finished loading, click on the File Menu.
  3. Click on Open File (or Open).
  4. Select the a: drive.
  5. Click on the root folder.
  6. Click on cswp1.htm (It should turn blue.)
  7. Click OK.
  8. Your new curriculum-specific webpage should appear in the browser window.
  9. Test the links to ensure that they are active and connect to the websites listed.
  10. Close the web browser and log off the Internet.

Creating a Curriculum-Specific Webpage: Alternate Method

You will want to start the process by creating a Favorites List on a topic of your choice.

  1. Log on to the Internet and open your web browser.
  2. Insert the TEC 908 disk into your floppy disk drive.
  3. You can use the Favorites you collected earlier or you can revisit the Toolkit and use the Search Engines and Web Indexes to locate new Favorites related to your chosen topic.
  4. As you find these webpages, add them to your Favorites list using the method specific to your web browser. Check the onscreen Help files for specific directions.
  5. Hint: Internet Explorer has a Add to Favorites List option in the Favorites pop-down menu. AOL lets you drag the little heart icon at the upper right side of the screen up to the Favorites folder near the top of the screen.
  6. Continue your search until you have added 10-15 curriculum-specific links to your Favorites List.
  7. Close your web browser and log off the internet.

You will now want to locate the simple text editor in your Windows software. You can use Notepad which is usually located in the Accessories Program Group of Windows 3.1x or the Start/Programs/Accessories list in Windows 95/98.

  1. Double-click on Notepad to open the application.
  2. Navigate to the File menu and select Open.
  3. Insert the TEC 908 floppy disk into your disk drive.
  4. Navigate to the a: drive
  5. Double-click on the folder titled Tmpl.
  6. Select All Files *.* in the Files of Type pop-down menu on the bottom left hand side of the dialog box. (A list of all the files in the Templ folder should now be on the screen.)
  7. Double-click on the file titled cswp
  8. A template for the curriculum-specific webpage you are about to create will appear on the screen looking like this.



  9. Before you make any changes to this template, navigate to the File menu and select Save As.
  10. Rename the file as cswp1.htm and save it to the root folder on the a: drive.
  11. Note: This step is important as it will allow you to reuse the template for future curriculum-specific webpages.
  12. Enter the title that you want to appear at the top of the web browser screen between the <title> </title> tags.
  13. Enter the title that will appear on the webpage itself between the <h1> </h1> tags.
  14. Save the changes you made.

Theory Time: At this point, it might be helpful to explain what you will be doing in the rest of the activity. The cswp1.htm file that you have on the screen in front of you will serve as a template into which you will insert the URL’s (internet address) and the topics from the Favorites List you generated in the first part of this activity. You will be replacing the ENTERURLHERE with the internet address of the hypertext link. The ENTER TOPIC OF HYPERTEXT LINK HERE will be replaced by the words you want to appear on the webpage linking the user to that particular URL.

You will be switching back and forth between the Notepad text editor and your Web Browser, making changes to the cswp1.htm file. Since you won’t want to constantly open and close the Notepad application, you should drag its window off to the side of your monitor screen by positioning the cursor in the title bar next to the word Notepad. Hold the mouse button down while you move the window off to the side of the screen. This will allow you to see both the Notepad window and the Web Browser window at the same time. Clicking on either window will bring that window to the front. If either of the windows fills the entire screen, just click in the resize box in the title bar that shows two windows in the same box.

Your screen should look something like this…

Now you are ready to go back online and retrieve the URL’s you saved in the first part of this lesson.

  1. Leave the Notepad where it is on the screen.
  2. Log on to the Internet and open your web browser.
  3. If the web browser fills the entire screen, click on the resize box to make it smaller so you can see both the web browser and the Notepad windows.
  4. Try clicking on each window to bring it to the front several times so that you feel comfortable with the process.
  5. Bring the browser to the front and go to your Favorites List. Click on one of the Favorites you want to add to your webpage and wait for it to load on the screen.
  6. Move the cursor up to the location box above the webpage and drag across the part of the address that follows the http:// (be careful… you don’t want to include the http:// You will see why in a moment…)
  7. With the selected portion of the URL highlighted in blue, hold down the Ctrl key while you press the C key (Ctrl-C). This shortcut will copy the selected text to the clipboard. Note: You might be able to use Copy from the Edit menu… although not all web browsers will allow you to do this…give it a try if you want to.
  8. Now, click on the Notepad window and go to the first of the lines beginning with <a href="http://
  9. Hold down the mouse button while you drag across the words ENTERURLHERE The text should turn blue. Be careful not to include the http:// or the quotation mark after HERE … this is part of the HTML tag and must be left intact for the link to work.
  10. Hit the Backspace or Delete key to remove the ENTERURLHERE.
  11. Hold down the Ctrl key while you press the V key (Ctrl-V). This shortcut will paste the URL you copied from the webpage into the HTML tag. Paste from the Edit menu might work as well…again, not all browsers allow it. Give it a try.
  12. Now, hold down the mouse button while you drag across ENTER TOPIC OF HYPERTEXT LINK HERE in the same line of the template. The words will turn blue.
  13. Hit the Backspace or Delete key to remove the selected text.
  14. Enter the text that you want to appear on the webpage as a link to the URL you just entered.
  15. Save the changes you just made to the template by selecting Save from the File menu or using the Ctrl-S shortcut.
  16. The template should begin to look something like this…



  17. Click on your web browser and select the second webpage from your favorites list.
  18. Follow the same steps outlined above to insert the URL and Topic of the Hypertext Link into the second line of HTML code.
  19. Save the changes you are making to the webpage frequently.
  20. Continue the process until you have transferred all the desired URL’s to the webpage you are building.
  21. If there are more template entries than you need, merely select and delete the extra lines. If you need more, copy one of the lines of code and paste it to the bottom of the template.
  22. Close your web browser and log off the Internet.
  23. Save the changes you made to the cswp1.htm document one last time.
  24. Close the Notepad application.

That wasn’t so hard once you got used to it, was it? Actually, this is the way many webpage designers used to work before the days of HTML editors like DiDa. If fact, I know several who still prefer this method. While this "end run" isn’t quite as easy as merely converting a bookmark list to a webpage like the Netscape and Internet Explorer Version 5 users get to do, you can still accomplish the same objective without having to type in all those the URL’s.

You now have the first of your curriculum-specific webpages. At this point, it is a "plain vanilla" webpage, so you will probably want to reopen the DiDa HTML Editor and spice up the cswp1.htm webpage with some background colors and some of the other enhancements you discovered in Activities 1, 2 and 3. You will find the cswp1.htm file in the root folder on the a: drive. You can toggle back and forth between the Preview Screen and the HTML Document screens to test the changes you are making. Remember to save the changes you make to the cswp1.htm file.

Testing the Curriculum-Specific Webpage

  1. Log on to the Internet and open your web browser.
  2. When the web browser is finished loading, click on the File Menu.
  3. Click on Open File.
  4. Select the a: drive.
  5. Click on the root folder.
  6. Click on cswp1.htm (It should turn blue.)
  7. Click OK.
  8. Your new curriculum-specific webpage should appear in the browser window.
  9. Test the links to ensure that they are active and connect to the websites listed.
  10. Close the web browser and log off the Internet.

Note: I would like to see the curriculum-specific webpage that you have created. E-mail the HTML source code of your cswp1.html file to me <bjost@josts.net> using the steps outlined earlier. Include the words "webpage D" in the subject of the message. You do not need to include any graphic images, just the HTML source code. Record the date you sent the file in your logbook.

 

pixel.gif (42 bytes)

website maintained by Bob Jost | bjost@josts.net | last modified June 21, 2005
Copyright © 1997-1999 by Bob Jost All rights reserved