WYSIWYG EDITORS

• Basics
• Common Tags
• A Minimal HTML Document
• Lists
• Add a List to Your Document
• Fonts
• Escape Sequences
• Linking
• WYSIWYG Editors
• A Brief Look at Netscape Composer
• Creating a Table
• Advantages of Using A Wordprocessor - A Look at WordPerfect
• Inserting Graphics
• Draw a Sketch
• Inserting Animated Gifs
• Equations
• JavaScripting
• File Transfer Protocol
• Exploring the Web

- acronym for "What You See Is What You Get"
- WYSIWYG editors let you develop a web page without knowing HTML
- All WYSIWYG editors have some problems which force you to look at the code

- Common WYSIWYG Editors include Netscape Composer, Word, WordPerfect, HotMetal, FrontPage, etc.

- Problems with each

Netscape Composer, FrontPage, and HotMetal require that (1) the user learn an additional software package; and (2) lacks the internal capabilities to create equations. FrontPage also takes control of your hard disk and creates mirror images of a web site. All have some flaws that require the user to look at HTML code.

Word is not truly a WYSIWYG editor, and thus frustrates users each time they publish a page.

WordPerfect is WYSIWYG and correctly publishes pages MOST of the time. At times you must republish graphics.

MOVIES

1. Open a new page to create an HTML File. Under File, select New
1. From the New submenu, select Blank Page
2. A new blank page will be created in Netscape Composer.
   
   
2. Creating a simple file
1. From the Format menu,
2. Select Align, and then Center.
3. Select Heading, and then 1.
4. Type in the page title of "WYSIWYG Is Easy"
   
   
3. Place a horizontal rule in the file
1. From the Tool Bar select H. Line
   
   
4. Move down one line and change the alignment to left.
1. Under Format select Align and then Left, or select the alignment tool on the Property Bar to change the alignment.
   
   
5. Type in the text, "I am now going to create a table.", Enter a new line by hitting the Enter key.
6. Type in the text, "True-False"

Creating a Table

1. Select the Table icon on the Tool Bar.
1. Change the following in the Table dialog
1. Number of rows = 3
2. Number of columns = 3
3. Change the Cell spacing to 0.
4. Change the Cell padding to 0;
5. Deselect "Border line width"
6. Deselect "Equal width columns"
   
   
2. Type in the rows as (see the sample table in Figure 2)
1. Cell (1,1) as "T   F"
2. Cell (1,2) as "1."
3. Cell (1,3) as "This is my first question."
4. Cell (2,1) as "T   F"
5. Cell (2,2) as "2."
6. Cell (2,3) as "This is my second question."
7. Cell (3,1) as "T   F"
8. Cell (3,2) as "3."
9. Cell (3,3) as "This is my third question."
   
   
3. With your mouse cursor over the table, press your right mouse button and select Table Properties.
1. Change the Table width to 650
2. Change the drop-down list from "% of window" to "pixels".
3. Close the dialog box.
   
   
4. Put your cursor in Cell (1,1), and open the Table Properties Dialog box.
1. Select the "Cell" tab at the top of the property window.
2. Change the Cell width to "6" "pixels"
3. Press the Close button
   
   
5. Put your cursor in Cell (1,2), and open the Table Properties Dialog box.
1. Select the "Cell" tab at the top of the property window.
2. Change the Cell width to "4" "pixels"
3. Press the Close button
   
   
6. From the Property Bar, change the alignment for each cell in columns 1 and 2 to right.
 

Advantages of Using A Wordprocessor - A Look at Wordperfect

The advantage of using your wordprocessor is that doing this leaves fewer computer software packages to use. WordPerfect seems to provide the best fit between WYSIWYG web page development and word processing. 

MOVIES

1. Enter WordPerfect.
1. Change the view by selecting View from the Menu Bar, and then selecting Web Page
   
   
2. Select the "Perfect Expert" icon  on the Tool Bar.
1. Note that the Internet Publisher appears on the left-side of the document screen to help you with HTML publication.
   
   
3. From the "Internet Publisher"
1. Pull down "Change Background" and pick a light background color.
2. Pull down the "Add a Title" and then pick "For the Title Bar"
1. The HTML Document Properties dialog box appears. Enter the title "Graphics." Select the "Summary" tab and enter in the appropriate information for your document. Select the "Text/Background Colors", and note that you can set the link colors, the default background color. The background wallpaper should be set to the graphic you selected for the background image.
   
   
4. With the alignment icon  on the Property Bar, change the alignment to Center
   
   
5. Add a Heading1 to the document using the "Add a Heading" drop down list from the Internet Publisher
1. Type in the heading "Graphics" and press the Enter key.
   
   
6. Add a horizontal rule by going to Insert and selecting Horizontal Line, or go to Extras on the Internet Publisher and select "Add a Horizontal Line"
   
   
7. Change the alignment to "Left" (see step 5)

 

1. Select Insert from the Menu Bar.
1. Place your cursor over Graphics and select Draw picture.
2. Create the following graphic. Your instructor will show you how.


 
2. Animated gifs can add a little humor to your text. They are extremely small, and therefore cost little in load time. From this web page, select and save the "blinkredball.gif" icon that proceeds on of the sections. To do this,
1. view this page in your browser;
2. select one of the blinking red balls in the view with your mouse;
3. press the right mouse key and select the menu item Save Image as... Save the image to your disk noting where it is being saved.
4. select the Insert menu from the WordPerfect Menu Bar;
5. select Graphics and from the menu select From File...;
6. when the file dialog box appears, go to the directory where the blinkredball.gif file was saved and select it.
7. It should appear on your screen, although it will not blink until it is in your Internet browser;
8. with the graphic still highlighted press the right mouse button;
9. change the Size or Position of the box. DO NOT EDIT THE IMAGE since WordPerfect cannot edit animated gifs and doing so will destroy the animation properties.
   
   
3. Creating an Equation is simple too.
1. from the Menu Bar select Insert and then select Equation;
2. in the editor create the equation y = mx + b;
3. close the editor;
4. press your right mouse button with the equation still selected;
5. change the Position... to Paragraph and the alignment to centered.

1. To insert a hyperlink or bookmark select the hyperlink icon  from the Tool Bar
   
   
2. To publish the document to HTML (save the file in its native WordPerfect format first)
1. Go to the File menu
1. Select the Internet Publisher item
2. Select Publish to HTML, set the directories if necessary and press ok.
2. Upon completion
1. Check the file in a web browser to ensure it is correct.
2. Using either Netscape Composer or Notepad, correct any items that did not publish correctly. Generally, there are few if any mistakes.
   
   

JavaScripting allows you to perform some useful tasks that occur on the client's computer. JavaScripting is programming, and thus can have syntax errors. There is too much to JavaScripting to go into detail here. The book Desigining with JavaScript by Nick Heinle is a good starting reference book. The following are examples of JavaScripting I have used.

1. Change the status bar as the mouse passes over a hyperlink or graphic
1. Recall the hypertext link format is <A HREF="<URL>document.htm">text</A>. To change the status line, you will need to change the line to <A HREF="<URL>document.htm" onMouseOver="self.status='Text to appear in status line.';return true" onMouseOut="self.status='';return true">text</A> The javascript, onMouseOver="self.status='Text to appear in status line.';return true" must be typed in exactly as shown. Of course, you can change the text between the single quotes to anything. The onMouseOut line simply clears the status line when the mouse is no longer over the hyperlink. JavaScript can be case-sensitive. For instance, onMouseOver could be OnMouseOver and the browser will have no problem with the upper-case O. However if true is spelled True, this will generate a JavaScripting error in the browser. Bottom line is always test your JavaScripting.
   
   
2. Verify entries in forms
   
   
3. Time the length of an exam
   
   
4. Rotate graphics
   
   
5. Create a scrolling message bar.
   
   
6. Open Windows inside of the browser.
   
   
   

... and always, back up your work. 

Exploring the Web
Some of the best ways to learn HTML is to view what others have done. For instance if you like a particular page, then view the source code. Most browsers will let you do this. If they don't then save the page to disk and view the source code with Notepad or some other ASCII editor.

In the remainder of this lesson visit these web sites and view the source code.

• Rotating graphics, message bar, mouse-sensitive status bar (http://surveying.wb.psu.edu)
• A clickable image map (http://surveying.wb.psu.edu/psu-surv/campus.htm)
• A browser window in a browser (http://surveying.wb.psu.edu/psu-surv/WB-dir.htm)
• Ftp inside of an HTML document (http://surveying.wb.psu.edu/psu-surv/free.htm)
• A bulletin board, countdown clocks, message alert and more (http://surveying.wb.psu.edu/sur162/) User name = educator; Password = XVII
• A interactive practice exam (http://surveying.wb.psu.edu/sur162/exams/Pexam3b.htm) User name = educator; Password = XVII

• A Beginner's Guide to HTML at http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerPrintable.html.
• An Interactive Tutorial at http://www.davesite.com/webstation/html/
• HTML Tags at http://werbach.com/barebones/barebone_table.html#general
• Special Characters at http://www.owlnet.rice.edu/~jwmitch/iso8859-1.html
• Spotlight on HTML at http://builder.cnet.com/Authoring/Html/
• Spotlight on JavaScript at http://builder.cnet.com/Programming/JsSpotlight/
• VooDoo's Introduction to JavaScrit at http://rummelplatz.uni-mannheim.de/~skoch/js/script.htm