wysiwyg editor

What You See Is What You Get

The most popular tools used to create websites these days are WYSIWYG editors. They work much like a wordprocessor and don't require the user to learn any code.

Most are more sophisticated than the one demonstrated below, but the principles for adding text and images are basicly the same.

The best ones are template driven, which means that you load an existing predesigned page and then add your own text and images.

Complete the exercises below and see if WYSIWYG is the way you want to go to create your site.

How to use this editor.

  1. Type some text in the editor window for a page heading.
  2. Highlight the text by dragging your cursor over it while holding down the left mouse button.
  3. Click the down arrow on the Choose style: Box
  4. Choose Heading 1 - Tutorial
  5. While still highlighted Click the down arrow on the Font box
  6. Choose Arial Black
  7. While still highlighted Click the down arrow on the font size: box
  8. Choose 7 Big
  9. To center the text Click this button.
  10. To add color use the button. - Tutorial
  11. To see the text as it will appear on your page, remove the highlight by clicking a different location in the editor window.

Other Options

  1. Bold text
  2. Italic text
  3. Underline text
  4. Left align text
  5. Right align text
  6. Numbered list - Tutorial
  7. Bulleted list
  8. Indent a paragraph
  9. HiLite the text
  10. Add a horizontal line - Tutorial
  11. Add a hyperlink - Tutorial
  12. Add an image - Tutorial
  13. Add a table - Tutorial
  14. Show HTML code - Tutorial

Adding an Image

Click the button.
Copy and paste one these URLs in the appropriate box:
images/student.gif
images/myheading.gif
Then Click Insert Image

NOTE: Most editors will have a Browse button that will allow you to choose an image from any location and add it to your page. Most will also allow you to drag and drop the image to any location on the page. Ours is a little limited.

Experiment
Feel free to experiment with this editor. If you want to look at the code, use the Show HTML code button.
NOTE: The HTML code produced by this WYSIWYG editors is not W3C compliant. We don't recommend using it to build your actual web site.

Create a website with Yahoo Site Solutions or SiteBuilder

Yahoo! Site Solution WYSIWYG editor with all of the features you need to create a professional looking website.
Works great on dial up!!
You can create your website online.
So Easy a Politician Can Do It!!

Typical Sitebuilder Templates
Screenshots of Sitebuilder 2
Back to createafreewebsite.net






OUR WYSIWYG Editor Disclaimer

Copyright (c) 2005 John Goodman john.goodman(at)unverse.net
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.