Tutorial 1: First Steps. (Project initialization and document creation) with HTML-Editor: (X)HTML-Format 8

You will learn here

• A little theory first: General Exploitation of the Functions of (X)HTML-Format.
• Creation of a Suitable Directory Structure for your Internet Site:
• Creation of a New Project Using the Project Definition Dialog.
• Creation of a new HTML Document with the Document Creation Dialog and Adding the Document to a Project.

Which Other Tutorials Exist ?

• 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.

General Exploitation of the Functions of (X)HTML-Format

Before we start with the tuorials, we first have to say something about the theory behind the HTML-Editor (X)HTML-Format. But don't be afraid, this is very limited, and soon after that you learn by example, so that you can easily understand how to perform day to day web design jobs with HTML-Format.

With (X)HTML-Format you use a powerful HTML-Editor comprising a lot of professional functions. But the editor is still easy to use and is therefore a good choice for beginners. You can even use it in schools and training seminars.

Working through the following sections you learn the basics of this HTML-Eitor.

Areas of the (X)HTML-Format Window

The Menu and the Button or Tool Bar

The menu presents all functions available within (X)HTML-Format. Due to that you probably will use the menu less frequently than the button respectively tool bar which presents only the most frequently used functions.
The menu items show also the accelerator keys, you can use for a lot of the most frequently used functions. It is worth while to make yourself familiar with these accelerator keys, because they provide the fastest access to a function.

The button (or tool) bar provides function groups in order to allow a fast selection of a specific function. Pre-view and file functions are always available at the left of the tool bar, HTML functions and wizards are grouped at the right side of the tool bar.

The Project and File Pane

To the left of the editor pane you can present the project and file pane. Via the menu item "View" you can show or hide this pane.
The project and file view is used to switch between files rapidly. In the "project" tab you can select a project with all its files, and in the "opened" tab you can switch between all currently open files of the project. In the windows environment you also can add files to a project via Drag&Drop. Or you can simply open them.
Within each tab you get a "search" () and a "replace"-button (). Via these buttons you can start a search and/or replace process which includes all files shown in the presented files list. The search result will be presented in the third tab titled "Search result". You also can switch rapidly between the files in this list.

Help

HTML-Format comprises integrated comprehensive help. If you have a problem this is the preferred location to get assistance. In addition to this help function, you also can incorporate the HTML documentation "SelfHTML" into HTML-Format. To do that simply select in menu "Help" the menu item "SelfHTML" and select the "index.htm" file of SelfHTML in the system file dialog, that opens.
Finally you can find in the "Help" menu internet links to the tutorials and other help sources.

Tag-Completion

To reduce typing, HTML-Format offers the function tag-completion. If tag-completion is enabled, the associated closing tab is automatically generated, as soon as the open a tag is entered completely.

Via the "options" dialog you can specify, whether you want completion for all tags or only for selected tags. A set of tags can also be excluded from completion. In addition you can select, if completion shall only be performed, if no text follows the open tag. This make sense, because it is very often the case, that you reformat HTML-source code. In this case the closing tag should appear after the text.

Tag Insertion

HTML-Format inserts tags in 2 different ways. Either you select an existing text und you then select via the button bar, the menu, or via acceleration keys the command. Or you first select the desired tag (the command) and you enter the text afterwords.

For each selected way, HTML-Format works different. If you first specify the desired tag, the cursor for text entry is positioned between opening and closing tag or at a position you most likely have to enter information.
If you mark a section of existing text, and then determine the tag, the cursor is positioned after the closing tag, so that you can enter additional text straight away.
Tutorial 3: CSS, Code-Snippets and Other Functions for Advanced Users teaches how you can customize this approach.

Acceleration Keys

HTML-Format offers for most of its functions acceleration keys. If you are one of those persons, who like to ease the operation, you will like these acceleration keys. You just have to memorize the keys for your most frequently used functions. You find the available keys via menu item "shortcuts" in the "help" menu.

Creation of a Suitable Directory Structure for your Internet Site

Now, after all these basic things, it is time to perform something useful.

The basis of every homepage is a suitable directory structure in order to store the various components clearly. Besides easy maintainability, meaningful directory and file names contribute also to the generation of a well organized index system for seach engines. If keywords, search engines are after, also appear in file names and in the path to a file, the URL gets a higher relevance and shows up higher in the hierarchy of search results. But please do not merge all your keywords into your path. Search engines have sophisticated algorithms and don't like to be cheated.

Here a good example of an intelligent directory structure of a web page for aquarium enthusiasts:

"./" stands for the root directory, which contains all other directories, and which finally will also represent the root for your internet domain.

./
./grafic/catfish/
./grafic/perch/
./fish/socialbehaviour/
./fish/treatment/
./fish/deseases/
./aquarium/
./links/

You can create this directory tree with your operating system or using HTML-Format.
HTML-Format itself does not create the tree, but offers the system file dialog which can be used to create the directories. This file dialog opens e.g. if you create a new project. How that works and why you should use this approach will be discussed in the next chapter.

Creation of a New Project Using the Project Definition Dialog.

To keep your web offering together, you should group all your HTML-file in a project. With such a project, you can easily switch between its files. You also can do a search and replace operation over all project files, if you have to apply a global change to your project. An example may be the change of your E-Mail address. In addition you can define for your project a global style template as a .css file. This style sheet will automatically be embedded in every new file as a link. The path to the style sheet will be converted automatically to a relative path.

File Generation

After you started the project generation dialog via menu File->New->Project , the first required activity is to generate a project file via button "Search". Using this dialog you also can create a new directory structure.

Root Directory

Via the file selection automatically the root directory of your project is determined. The root directory will later on become the root directory for your web offering.
All project files should be allocated in the root directory itself or in one of its sub-directories.

CSS Files

Here you can specify the name of a CSS-file which shall function als central style sheet. This style sheet will automatically be incorporated via a relative path into each newly created file of your project. This guarantees, that each file of your project will be formatted with the same style sheet. How to define style sheets will be explained in Tutorial 3: CSS, Code-Snippets and Other Functions for Advanced Users.

Project Name, URL and Description Text

If you have more than one project, you should provide this information. This allows easy identification of the project later on. Of course you can also provide notes to the project. But keep in mind, that this data is stored on the hard disk in non-encrypted form.

Input Completed

Now you just have to press button "OK" and the project is created. If you, as recommended, specified a style sheet, the style sheet file is incorporated as first file into your project.

How to provide the style sheet content is explained in the CSS Tutorial

Adding Existing Files

To add existing files to your project, you can use button "+" in the project view. In the Windows environment you also can drag and drop files into the white area of the project view.

Adding New Files

To add new files to your project you either can use the new file dialog ("File->New->Documents fast" or "File->New->Empty text file") or button "htm" respectively "txt" in the button bar (). After the file is generated, you assign it to your project via button "+" in the project view.

Creation of a new HTML Document with the Document Creation Dialog and Adding the Document to a Project.

To create a new HTML document, it is best to use the file creation dialog. It's result is a file filled with the basic HTML commands, embbedded style sheet (if defined), valid Meta-Tags, and the color definitions for text, foreground, background and links. In addition, you can specify here a background image.

To open the dialog select "File->New->Document dialog"

The Document Creation Dialog

Clicking onto menu item "File->New->Document dialog" opens the document creation dialog. You will recognize, that the author of the document, the path to the document and the colors are already filled in. As author the name of the project owner (see Creation of a New Project Using the Project Definition Dialog.) is used. The colors are the default colors of HTML-Format or (in case you already used that dialog) the colors you have specified during your last usage of this dialog. To save the colors for follow up documents makes sense. This guarantees, that your web site appears homogeneously to the user.

Titles

First you have to choose a title for the HTML page. This title will be presented by the browser later on (exception: frames - see SelfHTML). The title is also important for search engines. Meaningful titles yield a good positioning in the search result. But again, no overkill please.

File Selection

To select the file name for the new document, please click button "Set".
A file selection dialog positioned to the last used directory will be opened. If needed, you have to navigate to the desired directoy (selection of a different directory or generation of a new directory) before you enter the new name for the new file and confirm the entry with "save". The new file is not yet stored. It is just defined and registered to HTML-Format.

Selection of a Background Image

If you want to integrate a background image into your document, you can do that via button "Search". The selected file will be included using a relative path.

Color Selection

With the buttons for color selection a color selection dialog is opened. For the specified part of the HTML page (text (foreground), background, and so on) the desired color can be determined.
In the document creation dialog, the selected colors are presented in a pre-view. By that you can verify, if your selected colors harmonize.

Remark:: The selected colors are kept as basis for future documents. This is valid also for the function "fast creation of a HTML document", wich creates a new document directly (without a dialog).

Description and Keywords

The fields should be filled in. The keywords have to be seperated by commas. Keywords are used by search engines to rank the page.

Creation of a Document

The new document is created and inserted in the "open" list of your project, after clicking "OK". But the document is not yet stored nor added to your project. To store it, select button or select menu item "File->Save file".

Adding the Document to a Project

To add the document to your project, switch to the "Project" view and click button "+".

Coming Up ...

Congratulations, you have finished this tutorial successfully. The additional functions of (X)HTML-Format are as easy as the ones you just learned. To get familiar with them, read the additional tutorials or just experiment a little.

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.