Tutorial 2: Page layout with HTML and basic topics like tables, lists, images and text formatting.

You will learn here

• Formatting of Document Contents Without CSS.
• Insertion of Tables with the Table-Dialog.
• Insertion of Links with the Link-Dialog.
• Insertion of Lists with the List-Dialog.
• Insertion of graphics with the Graphics-Dialog.
• Using the Color-Dialog and the Color-History.

Prerequisites

• You are familiar how to create a project with (X)HTML-Format and you know, that you can define in this project a central CSS-definition file .
• You know how to use the "Document Creation Dialog" to generate a new HTML-page with (X)HTML-Format and you also know that the definitions set up in this dialog are valid also for the generation of new HTML files with the function "New Document: fast".
• You still have available the project generated in the last session, or, if not, you have another project in which you have generated a central CSS file.

If one ore more of the prerequisites are not fulfilled, you should first work through Tutorial 1: First Steps.

Which Other Tutorials Exist ?

There is currently an ongoing process in expanding the tutorials offering. Actually there are available the following tutorials for HTML-Editor (X)HTML-Format:

• Tutorial 1: First Steps. Here you find everything about directory structures, project management and maintenance functions of (X)-HTML-Format, and how to establish the basic framework for new web pages.
• Tutorial 2: Page design and more. Here you find how to format text, how to create tables and lists, and how to embed graphics and images.
• Tutorial 3: CSS, Code-Snippets and Other Functions for Advanced Users. This tutorial comprises professional functions offered by (X)HTML-Format.

Tutorial Start

In Tutorial 1: First Steps you learned, how to create a project and how to generate HTML documents.

Take this project and create two new files in two different sub-directories of your project and add these files to your project via the "+" button. If you have followed Tutorial 1: First Steps. You am able to create the following files:

"./" stands for the root directory of your project, under which you can find all your project files. This directory will become later on also the root of your Internet domaine.

./index.htm
./links/index.htm

The file in directory "links" should have the title "Links of Interrest".

After you have created the files and added them to your project, the project view should look similar to the image above.

Formatting of Document Contents Without CSS.

Open now the just created file "index.htm" in directory "links".
You see the basic structure of a HTML-file. The head has already been filled in by the file generation dialog. The content of the HTML document (that is what later on the browser presents), is inserted into the body of the HTML document. This section is of course still empty. Now click with the mouse between Body start tag and Body end tag and enter the heading
"Links for Aquarium Enthusiasts"
The result should look like:

Remark:
To watch the results generated by your input, HTML-Format offers a straight foreward internal pre-view browser and in addition you have the possibility to establish links to your favourite browsers. Up to three links to pre-view browsers can be established. To trigger a pre-view just click onto one of the pre-view buttons:
Most likely you have just linked to one external browser, therefore you should for the moment just use the 2 leftmost buttons. For the moment you also need not to store the content of your document permanently. HTML-Format generates a temporary file with the content shown in your editor pane. You can test the effect of changes without actually saving the content to your project file permanently and by that discarding the original content. If you have typed in a lot of changes, which you do not want to keep, just close the file and re-open ist again.
For small changes it is sufficient to use the "undo" function via the "Edit" menu or via the "undo" button: .

Add some more text below the headline to explain, that you are providing some "links" an interested user may follow.
To insert line breaks use key combination "ctl-enter". To insert a paragraph, you can use "alt-enter". But for paragraphs I recommend to bracket them with the tags <p></p>. This automatically insert a space line before and after the paragraph, so that it appears seperated from the surrounding text.
It is good practise to close in HTML documents all open tags with the associated end tag. But this is background information. If you want to go into such details, please read the SelfHTML documents. The link to it you find the the "Help" menu.

To highlight the text by using a bold font you have to mark the text to be highlighted. Then you have to select in menu "Edit" the "Bold" menu item.

The result should look like:

Now go back again to the "Edit" menu and look at the menu item "Bold". You will recognize, that in front of the menu item text an icon is shown. This indicates, that this function also can be found in the button and tools bar.
To achieve the identical result, you just can click the button with this icon.
This is valid for all menu items with an associated icon. In addition you can also use for "Bold" the accelerator keys "ctl-b" ! A lot of additional formatting commands you can use in the same manner. Just experiment a little with the buttons in the the "Format" section of the buttons and tools bar.

Insertion of Tables with the Table Dialog.

Tables can be generated with (X)HTML-Format very easily. We now create a table with two columns and serveral rows. The first row shall be a headline.

To do that, please open the table dialog in the button bar "lists and tables" via button:

Enter a 2 for both, column and rows and click onto headline. The additional settings you may leave as they are. They are axplained later on.
Now click button "Ok".

This is the base skeleton of your table. But in the pre-view you will not yet see something, because there is no content yet. Fill in now the text for the headline. For that you must know, that tables are composed from columns (TH and TD tags) and rows (TR tags). For details please consult selfHTML via the "Help" menu.
Enter now into the first TH-tag the text "Link" and into the second TH-tag the text "Description".
The source code for the first row (line) should now read as follows:

Call the pre-view and have a look of what you have created.

You now see the two words "Link" and "Description" in the table. It is easier to recognize what you see as a table, if we put a border around the cells. To achieve that wie modify the HTML source code a little. Instead of border="0" we now state border="1" in the table tag.

Call again the pre-view. You now see a border around the headline cells. As the table body still is empty, no body is shown.

Insertion of Links with the Link-Dialog.

Now we will insert the first link into our table and then provide a description to this link.

Position the cursor directly after the first TD-tag and select then in the button bar "Insert" the button .
The Link-dialog is opened. Into the top field please enter "http://en.openwebsuite.org" and into the lower field "Description" enter the text: "HomepageHelper.de".
The result should look like this:

Enter into the second TD-tag as description "HomepageHelper.de - The site for the Webmaster" and click again onto the pre-veiw button to watch the result.

In dialog "Insert Link" you may have recognized a button labled "Search". Via this button you can select local files of your web site. The path is automatically stored as relative path to the actual document. You need not care about it anymore.

Now insert two more links of your choice into the table, just to get some more familiar with it.

Insertion of Lists with the List-Dialog.

Besides tables to group and structure information also lists are used very frequently.
You learn now how to create an unnumbered list with several list entries.

Position the cursor below the just before entered description to the link in the previous paragraph and click on button in the button bar segment "lists and tables" to insert the list.

The list dialog opens. Select first the list type "Disk". You may recognize, that there some more list types and enumeration types exist. You may play around with those later on.
Enter as line count the number 3 (Rows) and provide a tool tip text. This text appears under the mouse pointer, if you later on in the browser enter the lists real estate on your screen with the mouse (hover help). The field "Start value" you cannot fill in, because this field is only valid for enumeration types.

After the "OK" button is clicked a source code similar to this will be generated:

Fill now the list by adding a text for each list entry (between the start and end list tag)
The result of the Table row inccluding the list may look like this:

Again have a look at the result in the pre-view browser.

Insertion of Graphics with the Graphics Dialog.

Graphics make a web page more attractive. Without them a web page appear a little boring. Important for graphics on web pages is: a suitable graphics format, a limited real estate for the image on your screen and a reasonably small file size to allow fast loading of the image.

As a rule of thumb can be said: the GIF format for graphics (e.g. cartoons) using a limited palette of colors and homogeneous color areas and the JPG format for photos and graphics with a very big number of colors is a good choice. For line graphics, you also can consider the PNG format which is freely usable and has no copyright restrictions.

In each case a graphics object should be relatively small with respect to storage consumption. Less than 40 KB should be the rule.
It is good practise to generate a thumbnail image for screenshots, which is shown on the screen. To provide the large original image use a link. This allows to load the large file only if the user clicks onto the link.

Create in the root directory of your project a "graphics" folder and copy to it a GIF image and a JPG image of your choice. But select reasonable sized ones - with respect of dimension and storage usage.

To embed graphics into HTML documents, (X)HTML-Format offers the grafics dialog with pre-view.

Position your cursor in the TD tag right before the description of a link and click onto button:
The graphics dialog opens. Now click on button "Search" and select in the opening file dialog the image you just have copied to your "graphics" folder.
If you have stored more than one image in the folder, you can click on each graphic to open a pre-view.
Please click onto one graphic and confirm the selection.
The file dialog closes and the object is taken over by the graphics dialog. You see now the pre-view along with the automatically evaluated graphics dimension.
You may be asked, if (X)HTML-Format should convert the path to the object from absolute to relative. You should say yes, If you want to supress this question for the future, you can do this in the options dialog to be called via the "Options" menu and the "Options" menu item.

Now enter an alternative text for the graphics object. This text is shown in the browser, if you move with the mouse over the real estate the graphics object occupies on your desktop, or if the object is not yet loaded completely by the browser.

If you like, you can change the size for presentation. The pre-view is automatically adjusted. If you allow, that the height to width ratio can change (non proportional resizing) you can deselect the associated check mark. (Annotation, the reduction of the presentation size does not change the file size. The resizing is done by the browser just for presentation, after the image has been loaded.)
With the "align settings" you can determine, how the text should flow around the graphics object or if the text flow should be inhibited. In our example select "align=right". This causes the graphics object to be aligned to the right border of the presentation pane and the text flows at the left side of the object.
Finally select the check box in front of "Link" and enter into the associated field the text "http://en.openwebsuite.org". By that the graphics object will be inserted in your document as a link. If you click onto the graphics object in the browser, the associated web page ("openwebsuite.org")is opened.

Now click the button "OK". This will create a tag, that looks like this:

Have a look at the result in the pre-view browser.

Using the Color Dialog and the Color History.

OK, now you are almost done. We just have to talk about the "colors" section in the button and tools bar, which is normally used during HTML document generation pretty frequently.
As colors are very important for a good web design, (X)HTML-Format offers a very convenient support for color definition. Colors in HTML documents normally are represented as a string of hexadecimal figures (hex-values). This hex value is composed like this:
#RRGGBB

RR stands for the red component of the color, GG for the green component of the color, and BB for the blue component of it. With these components you can describe every color available for your screen.

To simplify the color definition, (X)HTML-Format offers a color definition dialog. You can use this dialog in 2 different manners. Primarily for the text formatting, and secondly for color changes.
For text formatting you have to uncheck the checkmark "only hex-value" in the "Colors" section of the button and tools bar.
Mark now a piece of text of your choice and click button
A color dialog opens which allows you to select the desired color. In the preview you can verify the selected color in contrast to a white and black background.
Select now a color and click the button "OK".

As a result you should see a tag similar to this one:

To change a color later on, you just set checkmark "only hex-value" to "on" and than mark the hex value in the document, you want to change, with "#" (the number sign), but without the double-quotes.
Now open the color dialog again. You see, that the color you marked in the document is selected. If you now change the color and click "OK", the color will be changed in the source code and the new color is added to the color history.

Coming Up ...

Congratulations, you have finished this tutorial successfully. You should now be able to create and maintain your own web pages with (X)HTML-Format.
As supplement I recommend to read Tutorial 3: CSS, Code-Snippets and Other Functions for Advanced Users. in which you learn how to create CSS definitions with (X)HTML-Format. It also shows how to exploit the formatting functions as code-snippets, and how to generate them on your own. In addition you learn about the auto-text function and even more details.
But before you read this tutorial, I recommend to first experiment a little with (X)HTML-Format.

Best regards
  Christian Diekmann

All rights on this tutarial belong to Christian Diekmann. You may reuse and distribute it only with written permission of the author.