HTML Basics:
WYSIWYG Editing

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

Now that you have tried a bit of hand coding, you should be better able to appreciate the joys of a WYSIWYG editor for HTML.

With most WYSIWYG editors you can:

  • Use the toolbar to apply HTML tags to selected text.
     
  • See the results of your changes as you work in a WYSIWYG view.
     
  • Switch to HTML view to hand edit code when necessary.
     
  • Insert images from toolbar or drag-and-drop.


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
    ExercisesTo subtopics

Search 
Glossary  
Appendix

Do It!

A Really Simple HTML Editor for IE

(This does not work in Netscape!)

The text area below is actually a basic WYSIWYG editor for HTML.*   Formatting buttons appear when you click inside the text area. You can apply HTML tags by first selecting text and then clicking one of the buttons.

WarningBe sure to select text before clicking a button to apply a tag! If the display goes crazy, refresh the browser window and start over.

  1. Click in the text area. The buttons appear at the bottom.

    Use the bottom left button to switch between WYSIWYG Mode (where you can see the effect of your tags) and HTML Mode (where you can see the source code). The label on the button changes depending on which one is the current mode.
     

     


  2. Type several lines of text. Include your name in the first or second line. Use the ENTER key on your keyboard to start a new line and use SHIFT + ENTER to create a line break.
     
  3. Play with the various buttons until you understand what each of them does.
     
  4. Apply at least two heading styles and 2 formatting choices to text that you select.
     
  5. Look at your lines in both WYSIWYG Mode and in HTML Mode.
     
  6. Click the Print button to print out a copy of your creation. (Be sure you got your name on the first or second lines!)

* Scripting for the HTML editor in this page was created by InsideDHTML.com, LLC. Copyright 1997-1999 All rights reserved. This code cannot be reused on commercial sites without explicit permission from InsideDHTML.com, LLC.

Evaluation

What advantages did the simple WYSIWYG editor above have over writing your own source code in Notepad? Click the button to see what I think! Did you come up with the same advantages?

  • WYSIWYG view immediately shows the effect of the tags.
  • It is easy to switch between WYSIWYG and text views.
  • You do not have to remember the tag codes!