HTML Basics:
Web 2-3  Convert to HTML

Exercise Web 2-3:  Convert to HTML

Start with:   Word and FrontPage or FPX

Word 2000 handles Save as HTML somewhat differently from Word 97.

1. Open in Word: 
   the file Ergonomics.doc from your resources files on your hard disk: 
   C:\My Documents\complit101\web\HTML\Ergonomics.doc 

   Or download it from the web site

   Or from your floppy disk
   a:\my docs\web\Exercises\Ergonomics.doc
   a:\my docs\web\hector\Ergonomics.doc
    
   This article was written to be printed in a newsletter in two columns. A similar file is used in Working with Words: Brochure: Ex. 3-1.

   Word or IE? Be sure you are in Word. If you clicked on one of the links above to open the original Word doc, the document may have opened in an Internet Explorer window with Word toolbars. Instead, you need to open Word first and then open the doc file from Word. You cannot view the HTML source otherwise.
   Clue: the IE toolbar includes the Tools button when a Word doc shows in the window. 
    
   

2.  Save:
   Use the name ergonomics.htm to save the file to the web/Exercises folder of your Class disk as HTML.
    
   Word 97:  File  |  Save as HTML
    
   Word 2000/02:  File  |  Save as Web Page  
    
3. View HTML in Word: 
   Find the code for the image. What you see depends on which version of Word you used.
    
   Word 97: Saves the image with a number, like Image1133.gif, to the same folder as the web page. The IMG tag is more or less normal.
   
   Word 2000/02: Saves the image with a number like image002.gif in a subfolder named Ergonomics_files of the folder in which the web page is saved. There is a lot of weird code for the image! The path to the gif is buried way at the end of a lot of messy looking Office code.
   
    If the document opened in IE,  the Word command View HTML Source will not be available and neither will the IE command View | Source. What an odd omission! Be sure you have the document open in Word.
     
4. Word 97: Correct nesting of tags and Save the corrected document.
    
5. Close the document and Word.
    
6. Open the web page Ergonomics.htm in FrontPage or FPX.
    
7. Format all: 
   Select the whole page (Hint: CTRL + a) and remove all formatting (Hint: Format | Remove formatting). 
    
   Change the font face to Verdana. 
   The text is now a better size and is easier to read.
    
8. Styles: 
   Apply heading styles:
     Line 1 = Heading 1
     Line 2 = Heading 2
     Line 3 = Heading 3
     Lines "Posture" and "Design characteristics" = Heading 3. 
    
9. Italics: 
   Make lines 2 and 3 italic.
    
10. Image: 
    FPX: Check the dimensions of the image using the Image Properties dialog. (Hint: Uncheck "Specify size"). 
     
    Wow! The real dimensions were not used. The image display had been resized by Word. To reduce the actual file size and get a good look for this gif image you need to resize it in a graphics program. Such a version is available to you in your resource files.
     
    FrontPage: Right click on the image. The expected choices are not there. No Picture Properties! The anchor is a little green dot. What has happened? FrontPage is using the Office version of this image and not the gif you started with.
     
11. Replace image:  
    Change the image to ching.gif , which is a file in your Exercises folder. 
    This new image is 50% of the size of the original and also has a transparent background. Much better!
     
    FrontPage: You must delete the image and insert the new one.
     
12. Format image: 
    Alignment = right
    Horizontal spacing = 5
    Vertical spacing = 5
    ALT text = whatever you think is appropriate.
     
13. Position image: 
    Drag the image anchor up to the left of the first paragraph. 
    Delete the blank line left behind.
     
14. Background: 
    Custom Color: (red=241, green=224, blue=187). 
    If your monitor shows only 256 colors, you will see gray instead of beige.
     
15. Inspect and fix: 
    If necessary, remove  extra spaces, blank lines, bullets, etc.
    How well will this document work in a browser? What needs to be changed? 
     
    Resize the browser window to check wrapping. Fix any errors.
    
    Word 2000/02: Bullets
    The bullets that Word 2000/02 has exported are tiny dots. Very hard to see and set too far from the text. Apply bulleting yourself and delete the extra spaces and the tiny dots.
     
16. Save as: 
    Use the name ergonomics2.htm  and save the document to the web folder of your Class disk. 
    Close FrontPage/FPX.
     
17. View in IE: 
    Open the page  ergonomics2.htm in IE. 
    Did you make all of the changes correctly? If not go back to FrontPage/FPX and make corrections.
     
18. Justify: 
    FPX: Open ergonomics2.htm in Notepad. Add to each <p> and <li> tag the attribute ALIGN="JUSTIFY". 
     
    If you open the page in FPX again, FPX will delete this attribute since it does not understand! 
     
    FrontPage: Justify all lines.
19. Save.
     
20. Refresh in IE: 
    Switch back to IE and refresh the page. Better?
    
     
21. Print Preview & print in IE:  The article should fit on 1 page.
    Use the Header and Footer settings below but replace "your name" with your own name. 

    Header: Exercise Web 2-3  your name &bPage &p of &P

    Footer: &u&b&d

    If the background prints, you should change IE settings:
     Internet Options  |  Advanced  | Printing  to uncheck Print background colors and images.

Print error?
Did a second page print? Either your margins are too wide in Page Setup or you have extra blank lines at the end of your source code.