Many people searched for some kind of PlainHTML tutorials, so here it is.

HTML code presented here is XHTML 1.0 . This tutorial may require a minimal HTML knowledge. PlainHTML uses the caret and selection as reference point for inserting tags from the Tag Palette.

Getting started

Start PlainHTML, click File -> New… and select HTML document icon. A new empty document will be created for you.

Fig. 1. The Tag Palette

Now, on the tag palette, select the HTML tag, and click on the HTML Skeleton Code button [alternatively: Hold the Crtl and Alt keys and hit the H key].

Fig. 2: The HTML Skeleton Code tool

This will show you a window with basic HTML body properties, such as title, colors, background-image, etc. Fill in the desired fields, and click OK. The empty structure of the HTML document is created.

Now, it’s time to add some text: Select the Format tab on the Tag palette and click on the button, and adjust it’s properties (alignment and class – the later is for CSS), and click OK. You will get an empty <p></p> tag in the cursor position. Move the cursor between the “><” characters and type or paste your text. If you pasted the text, all formatting will be cleared. My text is “The quick brown fox jumps over the lazy dog. This will be a link. I should insert an image after this.“. You may break this text apart if it is too long. So,

Move the caret to the point where you want to break the line, hold the Shift key and hit the Enter key.
This will break the line in the code and insert a line break tag (<br />).

Now, we want to change the font of a part of our text: Select a part of your text, click on the Format Tab, and select the font ( ) tool [Alternative: Ctrl+T]. Set the Font face to monospace and font style to bold. set it’s color and size. The selected text will be enclosed in formatting tags with parameters set.

Fig. 3.: The Tag Inspector in action

Now, let’s change the color you set before. Hold the control key and click inside the formatting <font ... tag. The lower part of the Tag Inspector bar (it is located on the left side of the window) is now filled with parameters and values. Select the color parameter. See Fig. 3.
The color parameter becomes editable and a palette button appears on it’s right end. Click on it and pick another color. You can also change it by typing a new color value and pressing Enter. Don’t care about the double quotes, as the program handles them well (if one or both of them are missing, the program inserts them automatically).

Inserting or creating a link

The steps are the same, only difference is, that if you want to “linkify” a text, just select it before th following steps. If you want to insert a link, just move the caret in to position. and follow the next steps.

1. Select the HTML tab

2.Click on the Hyperlink ( ) tool

3. If the “Link title” field type your text (this will be the link text)

4. In the “File” field type the URL or file name you wich to link to (you can browse for files with the folder button)

5. Select the target (_blank stands for new window, the other three things are for frameset environment)

6. In the “Relative to” field select “Not related (external)”

7. Click OK

Inserting an image

1. Move the caret where you wish to insert your image.

2. Select Insert Tab, and click on the Insert Image ( ) button.

3. Browse for the image, set dimensions, alternative text, alignment, border and click OK

Conclusion

When you finished it, your code may look like this:

      PlainHTML tutorial materials
 
     The quick <strong><span style="font-family: Monospace; color: #944922; font-size: x-small;">brown</span></strong> fox jumps over the lazy dog.
     <a href="http://www.beerwin.com" target="_blank">This will be a link</a>.
     I should insert an image after this.
     <img src="Y:\Ervin\blog\phtut\img.jpg" border="0" alt="this is an image" />

And the page should look like this:

Bookmark It