Jan's Working with the Web

   WYSIWYG

Now that you have experienced hand coding, you should be better able to appreciate the joys of using a WYSIWYG (What You See Is What You Get) editor for HTML.

With most WYSIWYG editors you can:

• Use buttons and key combos to apply HTML tags to selected text.

• See the results of your changes as you work in a WYSIWYG view.

• Switch to source code view to hand edit code when necessary. 

• Insert images from a menu, toolbar button, or drag-and-drop.

• Insert a table or additional rows or columns with a dialog or menu.

• Apply formatting to selected text or object from a toolbar, drop list, or dialog.
• Apply CSS by choosing from a list of properties and allowed values.

1. Click in the text area below.

   Use the bottom left button to switch between WYSIWYG Mode (where you can see the effect of your tags) and the source code. The label on the button changes to the mode your are not in.

   *The WYSIWYG editor above is TinyEditor , by Michael Leigeber, used under creative commons license.

2. Type several lines of text. Include your name in the first line.
   

3. Use the ENTER key on your keyboard to start a new paragraph.
   Use SHIFT + ENTER to create a line break.

4. Play with the various buttons until you understand what each of them does.

5. Apply at least two heading styles and two formatting choices to text that you select.

6. Look at your lines in both WYSIWYG and Source modes.

7. View the source and add color to some text by typing in a STYLE attribute,
    like  <span style="color:red;"> text to be red  </span>
   or <span style="color:#00cc00;"> text to be green </span>

   Of course, you can pick your own text and colors.

8. Switch back to WYSIWYG mode.

9. Add an image from this web site, like or , or an image from another site. You will need the full URL to the image.
    

   TO SHOW YOUR INSTRUCTOR YOU DID THIS:

10. In WYSIWYG mode, print using the Print button in the editor from WYSIWYG mode - NOT the browser's print command.
     (Use a color printer if you can.) Be sure your name is in the first line.

    The Print button in the HTML editor will not print the source code. There is a work-around for that!
    

11. Show the source code in the editor.
12. Click in the source code somewhere.
13. Use the key combo CTRL + A to select all of the code.
    Use the key combo CTRL + C to copy what was selected.
14. Switch to your text editor or to Notepad and open a new blank document.
15. Paste.
    The source code is now in the new document.
16. Print the source code using the Print command in your text editor.
17. Close the text editor or Notepad without saving the new document.

• WYSIWYG view immediately shows the effect of the tags.
• It is easy to switch between WYSIWYG and source code views.
• You do not have to remember the tag codes!
• The source code is hard to read. If the editor does something odd, it will be hard to find and fix by hand.
• Adding formats at different times may add more code than is really needed.