2
Put your text in the edit box (it's after step 4, below). You can type the words in, or copy and paste them from somewhere else.
The edit box has a default height of 30 lines. If you need more, click on the 'increase height' button; this will increase the box height to fit your text. Repeat as often as you need.
Click here to see the special note about text
CLOSE
Text
Any formatting the text may have had will be lost when you paste it into the box below. By default, browsers display the text in a continuous fashion; any new lines are ignored. The browser has to be told how you want the text to be displayed. You do this by adding special formatting instructions (known as markup) to the text. Step 3 tells you how to do this.
3
Now format the text. The formatting options are contained in drop-down lists. For your convenience there are two sets of lists - one at the top of the edit box and one at the bottom.
To format the text, select a piece of text by using the mouse, and then choose one of the formatting options in the drop-down list. Formatting code will appear at the beginning and end of the selected text.
Click here to see the special note about formatting
If you want to change your mind about the formatting, select the text again INCLUDING the formatting code and choose 'remove' from the drop-down format list.
Side-box: You are able to put text and/or pictures in any combination inside a side-box that can be positioned to the left or the right of the page. The picture can be to the left or right inside the box.
Select the item you want to be inside a box and then choose the appropriate box option from the drop-down format list. The height of the box will automatically fit the content.
For a picture, type in the file name (including the '.jpg', '.gif' etc at the end.) To specify the size, do the following: after the file name, leave a space and then add either "width=" or "height=" (without the quote marks), followed by a number (the size in pixels).
Then select the whole text and choose the appropriate image option from the drop-down list. If you do not specify a height or width, the picture will be displayed at its full size.
Click here to see the special note about images
CLOSE
Images/pictures
The browser has to know where the picture is; by default the browser expects the picture to be in the same folder as the page on whch it is to be displayed.
So, if the picture is not in the same folder as the page, you will also have to include the folder name in the file name. For example: if the picture is in a folder named 'images' which is itself in the same folder as the page, and the picture is called 'pic1.jpg': you must type in: images/pic1.jpg
New line. Click here to see the special note about new lines
CLOSE
New lines
A gap is left between the paragraphs. If you want a larger gap between 2 paragraphs, type a space, select it with the mouse and choose paragraph from the drop-down format list.
If you want a smaller gap (such as the one above this paragraph), select the last character on the upper line and then choose 'new line (after)' from the drop-down format list; this will add a line feed after the selected character.
Text will, by default, wrap around a box or an image. This is not always what you want. The 'force new line' option allows you to make the following item start on a new line, below whatever went before it.
Bulleted lists. Click here to see the special note about making lists
CLOSE
Bullet lists
To make a bulleted list:
- Remove any existing bullets.
- Select the text of the first item using the mouse.
- Choose 'list-line' from the drop-down formatting list.
- Repeat the above steps until all the items in the list have been formatted.
- Select ALL the list items INCLUDING the |li| formatting code at the beginning and end.
- Choose 'list-block' from the formatting list.
The list-block formatting code is important. Although the list may appear to be displayed correctly
in your browser without it, there is no guarantee that other browsers - now or in the future - will display it correctly.
4
When you have finished formatting, click on the 'view webpage' button. Open the tab containing the webpage. (Remember- this may be in a new browser window).
Refresh/reload the page (eg function key F5). You will see the result in your web page. To make further changes, go back to this page and repeat steps 2 and 3 until you're happy with the result.
Note about web browsers
Web browsers can be set up in a number of ways and some of these are under the control of the user.
One of the most important settings is whether javascript (called active scripting by Microsoft) is enabled or not. This program uses JavaScript and so it must be enabled on your browser. Note, however, that the pages produced by this program do not use JavaScript.
Another difference is how the browser displays a new page - it could be in a new tab or in a new window. Furthermore, the browser may switch to the new page and display it straightaway, or it may continue showing the old one.
When you click on 'view webpage', the new page will be loaded in place of the old page but the browser may still be displaying the old page!. To to see the new page, you need to refresh the page (use function key F5 or the reload button on your browser). This depends on the browser.
This program has been tested in the following systems
Windows XP:
- Internet Explorer 8 (new window, popup warning, refresh needed)
- Firefox 3.6
- Google Chrome
Windows 7:
- Internet Explorer 9 (tab; refresh needed)
- Firefox 7 (tab; refresh needed)
- Google Chrome (v14;popup warning; new window)
- Safari (v5.1:no popup warning; tab)