The text area below is actually a basic WYSIWYG editor for HTML.
Formatting buttons appear when you click inside the text area. You apply
HTML tags by first selecting text and then clicking one of the buttons. In
the source code view, the code is in a continuous line that wraps, instead
of being on separate lines for easy reading. Sometimes the formatting is
NOT applied with styles but with the old FONT tags.
first: Be sure to select
text before clicking a button to apply a tag! If the display goes
crazy, refresh the browser window and start over.
Click in the text area below. Buttons appear
across the top and one at the bottom left.
Chrome & Firefox: 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. IE9 is
not happy with this HTML editor though it apparently worked in earlier
versions of IE. It is will do the formatting but refuses to show the source code.
No clue as to why! If you don't have an earlier version of IE, use Chrome or Firefox to do this exercise.
Type several lines of text. Include your name in the first
Use the ENTER key on your keyboard to start a new paragraph.
SHIFT + ENTER to create a line break.
Play with the various buttons until you understand what each of them
Apply at least two heading styles and two formatting choices to text
that you select.
Look at your lines in both WYSIWYG and Source modes.
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>
style="color:#00cc00;"> text to be green </span>
Of course, you can pick your own text and colors.
Switch back to WYSIWYG mode.
YOUR INSTRUCTOR YOU DID THIS:
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.
Switch to show the source code in the editor.
Print again using the Print button in the
editor, not the browser.
* 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
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.