HTML Basics:
Doc to HTML

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

Now it is time to practice converting an existing document to an HTML document.

The document you will start with is a simplified version of a brochure about New Zealand. The original brochure is shown on the previous page. I deleted the parts that are useless on the Web. We  don't really need the address label, for example.




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
    FrontPage/FPXTo subtopics
    Images in HTMLTo subtopics
    FormattingTo subtopics
   TablesTo subtopics
    Convert Arrow - Subtopic open
    icon-footprintDoc to HTML
    ExercisesTo subtopics


Icon Step-by-Step

Step-by-Step: Convert to HTML

 Icon Step-by-Step

What you will learn:

to convert a Word doc to HTML
some of the problems in converting 

 Start with Class disk, Word open to a blank document, resource files, Microsoft Word

In this exercise you will convert a Word document to HTML using Word.

It is important to carefully check a converted document. There will be changes from the original. 

Convert .doc to HTML

  1. In Word open the document NZinfo.doc in your resource files. 

    Where to find the file -
        On your hard disk in the installed resource files - 
          C:\My Documents\complit101\web\HTML\NZ\NZinfo.doc 

        Online - 
        On your floppy disk -
          a:\my docs\web\NZ\NZinfo.doc

    TipIf you click on the link for the online doc, look carefully to see if the document opens in the browser instead of opening in Word.
    Do you see Button: Tools for Word a Tools button?  IE5+ hides/shows the Word toolbars with this button. A few commands will be missing or not available. This can be very confusing if you don't realize you are in a browser that is pretending to be Word.

  2. Print Print the document from Word. [File | Print]
  3. Make a list of features that you think may change or vanish when the document is saved as HTML.
  4. From the menu select-
    Word97 Word 97:  File  |  Save as HTML…  with file type HTML document (*.htm; *.html; *.htx)
    Word2000 Word 2000/2002: File  |  Save as Web page…  with file type Web page (*.htm; *.html)
    Icon: IE5
    Icon: IE6Browser:   File  |  Save as…  and choose file type Web page (*.htm; *.html)
  5. Class disk Save the document as   NZinfo.htm  to your Class disk in the subfolder NZ of the web folder. The images will be saved to a subfolder of NZ.

    Dialog: Connect to the InternetYou may see one or more message boxes.

    • Prompt to check the Internet for a newer HTML assistant. Click on No, if it shows up.

    • Message: Some of the features in this document aren't supported by Web browsers.Warning that you will lose some formatting if you save as HTML. Read the list of changes, which will be different for each version of Word, and then click on Yes or Continue to finish the conversion.
    • Prompt to install missing graphics filters. You must have the installation CD to do this. 
      If you cannot install right now, choose to continue the process anyway. You can install these missing filters later by using the installation CD for Word or Office and changing your choices to include the missing filters. 

    NZinfo.doc - three page brochure on New ZealandThe Web Layout view shows in Word now.

  6. Click on OK.
  7. Open the Header/Footer. [ View  |  Header/Footer 
  8. Click in the textbox for the Header. (Otherwise your typing may go to the Address Box!)
  9. Type your name, tab once, insert the date, tab again, type  Web Project 2 .
  10. Print Print the HTML document. If you used Word 2000/02, there are very few differences from the original. Word 97 does not do as good a job.

HTML Source

You may find a number of changes when you save a Word document in HTML format. Many things you can do in Word cannot be done with HTML. Check carefully and make corrections to get a HTML page that you like. 

Remember - you cannot get the same level of control of the appearance of the page with HTML that you have with Word. 

Common Changes:

  • Paragraphs all have the Normal style, even though the original Word document used other heading styles. 

  • Text size may be too small for comfortable reading. Text that is small on a PC computer can be too small to read on a Mac. 

  • Bullets on blank lines. 

  • Jagged image, if the image was sized down in Word from the original 

  • No transparency in images. White background looks transparent in Word because the page is white.

  1. Open in Word the HTML file you saved on your Class disk: A:\my docs\web\NZ\NZinfo.htm 

     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.

  2. From the menu select  View  |  HTML Source… . The HTML source code appears, but Word 97 and Word 2000/02 handle this quite differently. 

    Word97 Word 97: This is not as easy to read as in FPX! There is no color coding. 
    The source code would take 2 pages to print.
    Word2000 Word 2000/02: The source code here is color coded, but there is so much of it! 
    The source code takes 10 pages to print. The first 6 pages are the stylesheet info. Automation created too much of a good thing!! 

  3. Word 97 Word 97: Correct the nesting of tags. Especially check the FONT, B, and I tags. Word97 usually closes these in the same order they were opened instead of in reverse order. Word97 is not a smart as it should be!
  4. Look at the paragraph tags which have the attribute ALIGN="JUSTIFY" to makes the left and right margins even.
    Icon: FPX "Justify" is not a choice in FPX's Paragraph Properties dialog. FPX does not understand this code. Another odd "feature" of FPX! You will see shortly that this can be a big problem.
  5. Close the source code window.
  6. Class diskSave as  NZinfo2.htm  to the web folder of your Class disk.  Out of room?
    Full floppy disk How to handle a full disk
  7. Close the document in Word.


  1. Inspect the print-outs of the original document Word document and the web page you just created. 
  2. Find any differences. Some may be subtle. Some may not be so subtle! (especially with Word97) How accurate were the guesses you made earlier?

Icon: FPXView HTML in FPX

If you are not using FPX, skip this section.

WarningFPX will dump code that it does not understand!

  1. Open NZinfo.htm in FPX. 
  2. View the HTML code. [View | Source]  
    Look at the paragraph tags. 
    Where is the attribute ALIGN="JUSTIFY"?
    FPX dumped it! 
  3. Type ALIGN="JUSTIFY" back in a P tag and close HTML View. 
  4. Reopen HTML View. FPX dumped it again!  
  5. Close the HTML view. Close FPX without saving.
    You could use the command  Insert | HTML Markup to put in code that FPX will ignore. But you cannot use the command to modify an existing tag! Rats! 
    TipWhen converting documents or switching between HTML editors, KNOW your editors. Your code may not be retained!

Format & Print

  1. Open NZinfo.htm in FrontPage or FPX.
  2. Apply heading styles, if necessary:
      title: Heading 1
      subtitles (Volcanoes, Rain Forest, etc.): Heading 2
  3. Format the page in any way that you think will improve it. You might change the fonts, the image alignments, add horizontal lines, or use tables. Have fun with it!
  4. Class disk Save as  NZinfo2.htm  to the web folder of your Class disk. You may not have room on your disk. You can probably delete some of those old versions of Hector's page now.
    Full floppy disk How to handle a full disk
  5. Check before print and make corrections if necessary:
    • HTML code for errors in nesting or spacing. 
    • Page Setup - change the header to show the current file name.
    • Spelling/grammar errors.
    • Browser- at different window sizes for wrapping or centering errors.
    • Page title - change to New Zealand Information - your name 
  6. Close document in the editor and open in Internet Explorer.  
  7. Print Print the corrected (and improved!) NZinfo2.htm from IE.