HTML Basics:
Web 2-3  Convert to HTML

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web



In this exercise you will convert an existing document into HTML. The document that you will convert was prepared for the newsletter Computers Today. In the newsletter the article appears on a two column page and continues on another page. The image takes up the width of the column. You will make the changes necessary to make the document work well in a browser.

You need some resource files to create the web pages in the exercises. If you have not already installed these on your Class disk, do so now. 

Individual files can be found at https://www.jegsworks.com/lessons/resources/web_resources/HTML/Exercises/ They should be copied to your Class disk in the folder A:\my docs\web\Exercises


Full floppy disk How to handle a full disk
 


Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    WYSIWYG
    FrontPage/FPXTo subtopics
    Images in HTMLTo subtopics
    FormattingTo subtopics
    TablesTo subtopics
    Print
    ConvertTo subtopics
    Summary
    Quiz
    Exercises Arrow - Subtopic open
    ExerciseEx. 1- Format
    ExerciseEx. 2- Data Table
    ExerciseEx. 3- Convert
    ExerciseEx. 4- Position Table
    ExerciseEx. 5- On Your Own


Search 
Glossary
  
Appendix



Exercise Web 2-3:  Convert to HTML


What you will do:

convert a Word doc to HTML
correct nesting errors (Word97)
format
align images
deal with code that FPX does not recognize


Start with: Class disk  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
    Icon: FPX a:\my docs\web\Exercises\Ergonomics.doc
    Icon: FrontPage 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.

    WarningWord 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 Button: Tools for Word the Tools button when a Word doc shows in the window. 
     

  2. Class disk  Save:
    Use the name ergonomics.htm to save the file to the web/Exercises folder of your Class disk as HTML.
     
    Word97 Word 97:  File  |  Save as HTML
     
    Word2000 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.
     
    Word97 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.

    Word2000 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.

     WarningIf 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. Word97 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: 
    Icon: FPXFPX: 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.
     
    Icon: FrontPage 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!
     
    Icon: FrontPage 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. Ergonomic2.htmBackground: 
    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.

    Word2000 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. Class diskSave 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: 
    Icon: FPXFPX: Open ergonomics2.htm in Notepad. Add to each <p> and <li> tag the attribute ALIGN="JUSTIFY". 
     
    WarningIf you open the page in FPX again, FPX will delete this attribute since it does not understand! 
     
    Icon: FrontPage FrontPage: Justify all lines.
  19. Class disk Save.
     
  20. Refresh in IE: 
    Switch back to IE and refresh the page. Better?

     
  21. Print out of ergonomics2.htmPrint 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.