Editor tutorial

This major new feature allows you to create, modify and view multilingual web pages which use any combination of the Japanese, English, extended European, Cyrillic (Russian) and Greek character sets. Pictures and sounds can also be embedded in these web pages, allowing you to create a range of interactive course materials including exercises, dialogs, grammar templates, etc. If you are a teacher, you now have an authoring system for your materials which you can use without restriction to prepare study courses.

Another benefit of the new integrated HTML web page viewer in JWM is that you can browse a web page (or any text document) whilst you have another document open in the wordprocessor. This allows you to have a English text file open whilst you translate it into Japanese, for example. Of course, in the JWM browser you can also Command-click any character to get detailed character information.

Important notes:

  • You should already be familiar with how to use the wordprocessor before creating your own HTML web pages. If you aren't familiar with it, you may wish to read the Wordprocessor tutorial first.
  • You should always save HTML documents in Shift-JIS format, if possible. This will allow you to use the document more easily with other applications on your system.

    Inserting tags into your document
    The HTML web page editor in JWM is very similar to BBEdit 5.0 - most of the tag dialogs are identical, so you will be right at home if you are a BBEdit user. It is assumed that you have a working knowledge of how HTML web pages are created. If not, rest assured that HTML is generally very simple and quickly learned. This mini-tutorial will help you use some very simple HTML features to give you an idea of how it works.

    Note: you will be able to edit your HTML text using the wordprocessor and view it with the HTML viewer whilst the help system displays this help page. If you close this help page accidently, you can bring it up again by selecting Help contents via the Info menu and navigating to it.

    Start by opening a new text document by selecting Standard HTML page from the New submenu of the Text menu (you might like to call the document test) - this will bring up the Text dialog (shown in Figure 1 below). You will notice a range of buttons at the top of the dialog. If you move the mouse pointer across these buttons, a description of what each button does will be displayed.

    The Mini-button bar allows you to enter a range of the most often used HTML tags quickly and conveniently. Each of these mini buttons also has an equivalent speedkey (displayed in it's description), which vastly speeds up your entry of HTML tags. For example, pressing Control-B (ie. holding down the Control key and pressing B) inserts the <B></B> tags into your document.

    Figure 1. The Text dialog

    You will notice that there are various tags (ie. any text enclosed by the 'less than' and 'greater than' symbols is a tag - these symbols are above the comma and period keys on your keyboard) in the header. You can safely ignore these for now, if you don't know what they are used for. HTML generally works by using one tag to switch something on (eg. like a text style, such as bold), and another to switch it off again. Other tags are used to insert pictures and sounds, and generally there is only one tag for these types of operations.

    Setting character styles and colors
    Select Bold from the Character style button (or press Control-B), and the switch on and switch off tags for bold type will be inserted into your document, leaving the cursor in the centre of the tags. Now type in some text between these switch on and switch off tags. Press the View document in browser button (on the top right of the Text dialog), and you will see your page displayed in the browser, with the text you entered in bold. That was pretty easy, wasn't it?

    Now, to have normal text displayed, type it outside the bold tags. You will see it come up as normal text when you look at it with the browser. You might like to try putting in some italic and underlined text in the same way. Of course, you can copy and paste text to move around the HTML tags so they are in the right place. To put in colored text, select Font... from the Character style button and the Font tag dialog will be displayed (shown in Figure 2). Use the popup menu next to the Color checkbox to select the color you would like your text. Then press Apply to insert the tag.

    Figure 2. The Font tag dialog

    Inserting paragraphs and new line breaks
    The Miscellanous button allows you to insert paragraphs and new line breaks. These simply act like carraige returns, allowing you to format your HTML text so that paragraphs are properly separated. New line breaks insert a single carraige return, and paragraphs insert two carraige returns. Note that in the HTML standard, only the tags have relevance when formatting text - it doesn't really matter where you insert white space (ie. carraige returns and spaces), though you need to make sure tags stay in one piece.

    Inserting pictures and sounds
    Now, let's do something more adventurous - inserting a picture and a sound. To do this, place the cursor where you want the picture to be placed, and select Image... from the Miscellanous button. The dialog shown in Figure 3 will be displayed. Now press the File... button and select the sample image called 'sample.pct' (in the Japanese WordMage folder). Then press Apply. You will see the tag for an image (picture) placed in your HTML text. Now press the View document in browser button to see your picture inserted in your HTML document.

    Figure 3. The Image tag dialog

    Do the same thing with a sound: select Sound... from the Miscellanous button. Now press the File... button and select the sample sound called 'sample.aif' (in the Japanese WordMage folder). Then press Apply. You will see the tag for a sound placed in your HTML text. Now press the View document in browser button to see your sound inserted in your HTML document - press the play button to listen to it.

    This should give you an idea of how easy it is to produce multimedia HTML web pages with JWM by embedding pictures and sounds in them. Of course, you can add your own pictures and sounds to a HTML web page as well. Just record a sound (such as some Japanese pronunciation) on your computer and save it as an .aif (ie. AIFF) file so JWM can read it (it must be saved as an 8-bit mono uncompressed AIFF to be compatible). Also, any pictures you want to include should be in .pct (ie. PICT) format, otherwise JWM won't be able to read them. Pictures can be converted from various there formats into PICT format using shareware packages such as Graphic Converter (on the MacOS) and Paint Shop Pro (on Windows 95/98/NT).

    Horizontal rules
    You can also separate sections of text using a Horizontal rule - this HTML tag simply draws a line across the page. To insert a horizontal rule, select Horizontal rule... from the Miscellanous button, and the dialog shown in Figure 4 will be displayed. Press the Apply button to insert the HTML tag.

    Figure 4. The Horizontal rule tag dialog

    Inserting links to other HTML web pages
    Of course, the most powerful feature of HTML is that you can easily link pages together and go to those pages by clicking the link. For example, if you have a contents list, you can have each item of the contents list linked to a different page, making navigation through your document very simple and effective. This process is used in this help system.

    To insert a link in your HTML web page document, you first need to have a new HTML web page to link to. Create a new page now and store it in the Japanese WordMage folder. Now go back to your original HTML web page document and select Link/Target... using the Miscellanous button. The dialog shown in Figure 5 will be displayed. Now press the File... button and select the new HTML web page you just created. Then press Apply. When you load up your original HTML web page in the browser, you should now see a link to the new page you created. As you move the mouse pointer across it, you should see the name of the document shown in the bottom left size of the browser. Click the link and the new page should load up. Use the Forward and Back buttons on the browser to move between these recent pages.

    Figure 5. The Link tag dialog

    Ordered and Unordered lists
    These are used to create points in bullet form. For example, a list of CPU types used in different computers might be shown as: Lists thus provide an efficient way to display information in a very concise form. To insert a simple Unordered list into your HTML web page, select Unordered list from the Lists button. This will insert two tags which switch on and off unordered lists (the UL and /UL tags), as well as the tag which marks an entry in the list, LI. To add more entries to a list, insert more LI tags with the text of the list item following the tag.

    To make a more complex unordered list (like the example above), you need to embed a second unordered list within the first. When the HTML web page is viewed, the second list will be further indented to the right. You can embed up to three levels of indentation in this way. The HTML source for the example above is shown in Figure 6 - it looks a bit complex on first viewing, but once you examine how it works it's not too bad. Lists of this type are fairly complex compared to most other HTML tags, since they are harder to visualize. A bit of experimentation, however, should ensure that you get the result you want. For example, the New line break in the middle of the HTML source ensures that the embedded list item following it is spaced correctly.

    Figure 6. The HTML source for the unordered list example

    Ordered lists (lists which consecutively number each list item) are not yet supported in JWM, but you can simulate them very easily by selecting Indent from the Lists to set up the indenting and then placing a number (or letter) at the start of each item. This is shown in the example below, with the HTML source code displayed in Figure 7 below.

    How to boil a three-minute egg


    Figure 7. The HTML source for a simple ordered list

    Centering text
    To have a block of text centred on the screen, select the Centre tag from the Alignment tag input button. Insert the text you want centred between these two tags.
    This is an example of centered text

    Entering special characters
    Some entities for special symbols are now interpreted by the browser, allowing such characters as '<' and '>' to be embedded in web pages. These entities can be entered by control-clicking characters on the English and extended European character tables on the Input dialog. Characters which support this feature are shown in blue. An example of the type of HTML generated for these symbols is shown below in Figure 8. Note how the entities are displayed as special symbols in the browser.
    Figure 8. How entities for special symbols are entered and displayed

    Further information
    For more information about HTML coding (including in-depth tutorials), please refer to the many books on this subject available from bookstores.

    A complete HTML 3.2 reference guide is contained in the 'HTML 3.2 reference' folder bundled with this software. The main page of this guide is 'HTML 3.2 reference.html', which can be opened with Netscape Navigator or Internet Explorer.