TOP

Basic HTML Markups and Program usage.

This document can be viewed either with Picardy 3, or another text editor, or with a web browser. Viewing with a browser will make it easier to read but viewing with Picardy 3 will help you to learn HTML. The best way to learn HTML is by viewing other documents in text form.

As of release 0.25, the version number will increase by 0.01 for each function regardless of whether I release it for each function. Bug fixes will increase it by 0.01 also but if I fix a bug when I add a function it will still only increase by 0.01. I figured I needed to do this or I would never reach version 1.0

Program Options
  • In the options menu you can set different options for using Picardy 3. You can choose to have "Word Wrap" on or off. "Off" is the default. To do this click on the sub-menu arrow and choose which you want.

  • You can set up which browser you would like to use to test the HTML documents you write. To do this click this option and type in the full path (including drive) and filename of your browser or as of v0.58 you can click on "Browse" and choose the file.. Setting this should be one of the first things you do if you want to be able to test your documents.

  • You can set which font you want the edit field to be. You can choose from Times Roman, System Proportional and Courier. The size of all of them is 10 for now. The default is Times Roman. To do this choose the Text Font sub-menu arrow and choose the font you want to see. Note this will have NO effect on the HTML document. At this time you can't set the document font. This is only for personal preference and readability.

  • You can choose to have advanced tags turned on or off. "On" is the default. What this is exactly is, for the <body> and <hr> tags there are options that can be set. Some people don't use these. You can choose to have the program just print the tag without allowing you to set the different options. Or you can choose to have the program allow you to set the options.

  • With v0.58 you can now have a basic HTML template created for you. You also have the ability to turn this feature off from the options window if you don't want it.

  • With v0.58 you can maximize and resize the program window and you can have the Size and Position saved when you close the program. Plus, for some reason if you maximize it and close then reopen it it doesn't show as being maximized so you can't click the restore button to reset the size. For this reason I added a "Reset Original Window Size" option.

  • With v0.58 you can now set, from the Options window, the drive type, either FAT or HPFS. This was done so that the file Opening, Saving, or Selecting has the correct extension.

  • Regarding Links and Images, you can now browse to choose a file from a drive. If you do this you can set an option making these files Relative or not Relative to the HTML file. If you set them as not Relative you can set an option saying whether you want the drive name (ie c:\) included. You can also set the text type, Uppercase or Lowercase for the files. OS/2 defaults to Upper but you can choose what you want for easier moving etc. Also for all the Links and Images there is a Drop down list where every link or image is put so if you want to use it again in that session you just browse the list. You can also set an option to save these LInks and Images between sessions and have them always available.

  • Please note that all of these options will be saved and will stay the same when you restart the program.

    • Beginnings

    Please note that this document shows the basics of HTML markup and goes somewhat beyond what a beginner would need to know to use Picardy 3. Most everything is done for you just by pushing a button or selecting an list or menu item. Also most all of the tags can be chosen after selecting the text that you want marked-up. In other words if you select text then choose a heading the heading tags will be placed around the selected text. There are a few things this won't work with though and your selected text will be replaced. These things are the <hr> ;, <p> and <br> tags as well as everything in the sub-menus in the Forms and Tables menu items. Most of the time it wouldn't be necessary anyway.

    There is now a basic HTML template created when a new file is opened. You can turn this feature off if you desire. If you want Body options you will either need to turn it off or delete the body tags automatically created and click the Body button to set the options (see below). Use the tag <title> </title> to designate the title of a document as seen in the Bar at the top of a viewer. You will also need to use the < head> < /head> to designate this as the heading of the document. It is best to type the "title" select it then push the corresponding button. Do this first with the < title> then the < head>.

    The next thing to do is fully write the document. When you are finished select all of the text except the Title and then push the <body> button to designate the selected text as the body of the document. There are different options for the body that you can set at this time. You can designate a background color or background image, what color you want the text, links, visited links, and active links. You can now choose from the list of colors and the #f?????? will automatically be placed so you don't have to know the #f??????. Please Note that not all of the colors are here. Many colors have a number of Hues (ie blue1, blue2, ...). I only usually did the first Hue.

    You should then select the entire document, use the "Select All" menu item in the "Edit" menu, and click the < html> button. This will designate the document as an HTML document. The < body> and < html> buttons can be done as the first thing but make sure that EVERYTHING is kept between the < html> tags, or that all of the text you want as the body is kept between the < body> tags.

    All of the actual tags can be designated by all Upper Case or Lower case letters. This program uses all Lower Case letters and at this time you can't switch to Upper Case. This is not a big deal.

    Two of the most important tags are < br> and < p>. The <br> tag designates a line break. You need this any time you want a break in the text. Most browsers will do word wrap, but if you don't want something to span the entire screen use the <br>. You can also use the < p> tag. This one is mainly used at the beginning or end of paragraphs but can be used after single lines also. The < p> tag is useful because it automatically inserts a line break and an empty line after the text. To do the same thing with < br> you would need to put a < br> at the end of the line and another to insert a blank line. If you don't want the blank line between your text just use one < br>.

    Horizontal Rules

     Above and below this text are Horizontal Rule lines. Click the < hr> button to set this. < hr> is the tag to set this if you were to type it.
    You now have the ability to set options for the Horizontal Rule. You can set it's size in pixels, it's width in either pixels or a percentage of the page size, and it's alignment; either left, center, or right. To set these make sure the "Advanced Tags" option under the "Option" menu is set to "On".

    Headings

     The following are the different "Headings" designated by selecting from that list box. You can select the sext you want to markup and then choose the heading type and the text will be surrounded by the tags.

    Heading 1 - the largest - designated by < h1> < /h1>

    Heading 2 - designated by < h2> < /h2>

    Heading 3 - designated by < h3> < /h3>

    Heading 4 - designated by < h4> < /h4>

    Heading 5 - designated by < h5> < /h5>
    Heading 6 - the smallest - designated by < h6> < /h6>

    Basic Styles

     The following are "Basic Styles" designated by selecting from that list box. Note that Emphasis and Strong Emphasis are interpreted differently by different browsers, sometimes they are only bolded or italicized sometimes both sometimes something other. With these you can select the sext you want to markup and then choose the style and the text will be surrounded by the tags.
    This is Bold - designated by < b> < /b>

    This is Italic - designated by < i> < /i>

    This is Underlined - designated by < u> < /u>

    This is Emphasis - designated by < em> < /em>

    This is Strong Emphasis - designated by < strong> < /strong>

    Centering
    This is Centered - designated by < center> < /center>

    Note: Most of the above tags, Headings, Styles, and Center, can be combined. You can't use more than one heading on the same text. Also sometimes combining tags can be redundant, ie most headings are bold already. Center can be used on any text, be it tagged or not.

    Lists

     You can also create different types of lists in your documents. All items in a list, these can be test items, links to other places, or images, are designated by the < li> tag. You can select the text you want to be an item and then push the < li> button and the text will be preceded by the tag. Except in the Menu list you can put lists within lists. Please note that not all browsers view these the same way.

    There are five different list types at this time:

    Links and Images

     To add a link or and image to your document just press the "Link" or "Image" button. These are basically self explanatory and I won't go into all the specifics and guidelines.

    With the links if you want to create a link to a file in the same directory as the one you are putting the link on is in choose the "File" option. You can choose the "Web Document" option but you will have to type in the FULL address each time, with the "File" option you can just type the file name.

    If you want to create a link to a section on the same page, for example from an index, then choose the "Anchor" option. You will need to create the anchor at the section you want to link to. To so this click the "Anchor" button and type in the same name you put for the link. Here is an example of this that will take you to the top of this page. View this document in a text editor to see how this is done. TOP

    With Images you do not need to use all the options that are available. Some browsers don't even support the Size, height width, options. If the image file is in the same directory as the document then you only need put the filename, otherwise you need to put the whole path. You should choose and alignment, even though it isn't necessary. This will align the image to one of these positions with the text it is next to. If there is no text then this isn't necessary. You should always try to put in alternate text especially if it is a link so that if someone who doesn't or can't load images won't miss out on your page. If you don't put alternate text in Picardy 3 will put in double quotes so that if someone can't or doesn't want to see images will at least see nothing.

    YES you can make images links. This is now very easy. Just check the box in the image window that says "Check if this is a link.". You will be presented with the Create Link window, complete this as above, click OK, then click OK on the Image window and it will all be done for you.

    Other Styles

     The styles menu provides you with more style options. Most basic documents will not use these. All of these may not be supported by all browsers (especially by IBM's Web Explorer for OS/2). Because of the infrequent use of these I will not go into detail as to what they are for. Some of them are self-explanatory. There are examples of all of them below.

    This is a Citation - designated by < cite> < /cite>

    This is Typewriter - designated by < tt> < /tt>

    This is BlockQuote - designated by < blockquote> < /blockquote>

    This is an Address - designated by < address> < /address>

    This is Code - designated by < code> < /code>

    This is Variable - designated by < var> < /var>

    This is Keyboard - designated by < kbd> < /kbd>

    This is Sample - designated by < samp> < /samp> 

    This is Preformatted - designated by < pre> < /pre>

    This is another Definition style - designated by < dfn> < /dfn>

    This is Superscript - above the normal line - designated by < sup> < /sup>

    This is Subscript - below the normal line - designated by < sub> < /sub>

    This is Strike Out - designated by < strike> < /strike>

    &... Chrs

     The items in this menu are used when you want to show these particular characters in an HTML document. Because the greater than and less than signs are used in HTML markup these special characters are needed. The other two aren' usually necessary but some browsers won't view them correctly.

    As of release 0.25 I have added a number of tags for use in Scandanavian countries. Please email me if you would like others added.

    With version 0.58 I added the Non-Breaking Space, Copyright, and REgistered Trademark characters.