MathSciCon Workshops – R.J. Bieniek

PRODUCING WEB LINKS AND HYPERTEXT IN A WEB-ACTIVE FILE

We are going to produce an HTML file suitable placing on your web server that will access the Missouri S&T homepage and also the Science Teacher Consortium website.

1.   If you have not already done so, download the Web Production template (template.doc) by clicking on this link (which is to http://lead.mst.edu/documents/template.doc).

2.   When the File Download window pops up, choose the SAVE option and put it in your My Documents folder or whatever folder in which you are working.  IMPORTANT:  a SAVE AS window will pop-up when you do this, and you will be allowed to save the file with a new name in whatever folder you specify.  In the File name input box, change “template.doc? to “lastname-template.doc? where you put your actual last name at the start of the filename.  Then click the save button to the right of the file name box.

3.   Open the file you have just saved into Microsoft Word.

4.   Two lines under title lines template.doc, copy in this active link to the Missouri S&T homepage:  http://www.mst.edu (hit Enter or add a space at end to activate link http://www.mst.edu).  You now have an active link in your template

5.   To learn how to put into your document a JPEG image find on the web, do a CTRL-left click on your hyperlink http://www.mst.edu to open that webpage.  We will explore pasting and relocating the Missouri S&T logo symbol in the upper left corner:  

      a.   Right click on the image and select Copy.  You have now copied the image onto your clipboard.  You can paste it into a directory and have it for future use.  But here, you will just paste it directly onto your template.
      b.   Paste the Missouri S&T patch by following the directions of Case 1 under “Adding images".
      c.   Paste another Missouri S&T patch by following the directions of Case 2 in “Adding images".
      d.   Try to move the images by left-clicking on them and dragging.  They don’t move!
      e.   Now right click on either one of them and select Format Picture.  Then click on the Layout tab at the top of the pop-up.  The square “In line with text? is the default selection, which locks the image in the line.
      f.    Change the layout choice by clicking on “Square" and then on “OK".  You will find that you can drag your image around and the text will wrap accordingly.
      g.   Do the same with the other patch, but now select “Tight in the Layout tab.
      h.   Repeat with the other two layout choices: “Behind text" and “In front of text".
      i.    Select “Tight" again for each images and place them where you wish.  You now know how to paste and place images in a document that will appear when you convert it into an HTML file at the end of this exercise.

6.   To produce a hypertext link to the Math/Science Teachers Consortium website at http://lead.mst.edu/mathscicon/:
      a.   go to indicated website by clicking on the link above.
      b.   highlight URL in browser
      c.   right click mouse, copy
      d.   under link to Missouri S&T’s home page (done in step 3), make line space
      e.   type: Math/Science Teacher Consortium
      f.    highlight Math/Science Teacher Consortium by holding left mouse key and dragging
      g.   right click mouse on highlighted phrase and select Hyperlink from pop-up menu  (important note:  if “Hyperlink" does not appear as a selection in the pop-up menu, then just click on “Insert" button in the horizontal toolbar at the top of the Word program window while the phrase is still highlighted and select “Hyperlink" from the pull-down menu)
      h.   When the Insert Hyperlink window opens, hold-down control key and press v-key to paste in copied URL to hyperlink address window [CRTL-V is Windows paste command].
      i.    Hit OK button in Hyperlink window
      f.    Math/Science Teacher Consortium is now hyperlinked to in your document.

7.   Optional :  To download and add a hyperlink to a file at your own “website".
      a.   download the next file in this web-active training by clicking on webactive-III.doc
      b.   when the File Download window pops up, select “Save" and save the file to your folder, i.e., the same one where your template.doc resides.
      c.   in the template.doc document you are creating, type Webactive 3 on a new line
      d.   highlight Webactive 3 and initiate the creation of a hyperlink (step 4g above)
      e.   when the Insert Hyperlink window opens, you will see a list of files.  Select the file webactive-III.doc and then click on the OK button in the Hyperlink Window.
      f.    Webactive 3 is now linked to the file webactive-III.doc in your folder.

8.   Save your template.doc file in the current format (*.doc)

9.   To produce a web-active HTML format version of this file
      a.   Selected “Save As" (not “Save") from pull-down File menu in top bar of MS Word
      b.   In the pulldown selector “Save as type" at the bottom of the Save As pop-up window, change “Word Document (*.doc)" to “Web Page (*.htm, *.html)" and then hit the “Save" button at the lower right of the pop-up window.
      c.   Your folder now has file lastname-template.htm in HTML format with active links that can be placed at a website.

You have now produced several useful files that your students can access and open from your website.  Good going!!  Open the folder where these files are located, and click on each of them (lastname-template.doc, lastname-template.htm) and admire your handiwork.  See if the links work.  You can always edit the HTML file (a move images) with MS Word by right-clicking on the file and choosing Edit.

You may now wish to acquire (or be aware of) a few more advanced techniques of creating web active documents and web sites (including free software to generate PDF files from any document) by clicking here.