Tutorial 3: CSS, Code-Snippets and Other Functions for Advanced Users.

You will learn here

• Creation of CSS Definitions Exploiting the CSS Generator.
• Using Code-Snippets.
• Customization and Optimization of Editor Tags.

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.

Creation of CSS Definitions Exploiting the CSS Generator.

CSS (Cascading Style Sheets) is a feature, that allows you to format your HTML pages according to your own desires. CSS allows to define your own style sheets that are used to format your text.
You may argument, that this can be done without CSS also, e.g. by combining the "font" tag with other tags. This of course is true, but CSS has a major advantage:
You can establish one central CSS file for your project and define inside of it various style sheets used in your project.
If you later on want to change the design of your web site, you have to modify just this CSS file and the changes are applied automatically to all of your project files.
Another advantage is, that in CSS style sheets (called classes) several formatting schemes can be stored, for which you had in plain HTML to combine several HTML tags. This makes the HTML source code simpler and clearer.

You now will learn, how to generate a CSS definition named "cssexample". This definition will format the text as follows:

• Text color: blue
• Text appearance: bold
• Text size: 105% of the standard size
• Font: Verdana, and if not found by the browser: Arial (font rank)
• Frame: top and bottom as normal line; left and right: as dotted line
• Frame color: purple
• Borders: left and right: 5 pixels; top and bottom: 5 pixels
• Margins: text and frame = 5 pixels

Please open now the central CSS definition file of your project. It is called styles.css if you use the default settings of (X)HTML-Format and should be located in the project, you generated in tutorial 1.
If you do not have a central CSS file, select menu item "File->Project description" and enter in the appearing dialog a CSS file. If the file does not exist, it is created and added to the project. Details you find in Tutorial 1: First Steps.
Now position the cursor in front of the end tag </style> in the editor pane and open the CSS generator via the button and tools bar "Insert" and click on button .

The CSS generator dialog opens. It supports you in the generation of CSS classes (style sheets).
You now see the pane under tab "Format" in which you enter the name of the CSS class and in which you can define the text formatting.
Enter here the name of the new element (".cssexample") without the double quotes but with the period at the beginning. The period is important, because it causes the definition of a new style sheet.

Enter now two alternative fonts. You should select them in such a manner, the your preferred font comes first, and the alternative fonts follow. This rank order should guarantee, that your web site looks good even under operating systems, in which your preferred font is not provided. The browser selects in this case the alternative fonts in the order, they are specified.
Select as font size the value "percentage" int the selection drop down list, and enter as value 105%.
To finalize the definition, you have to select the checkbox "Bold" and to press button "Text" to open the color definition dialog to determine the desired color.

The text formatting is done. But we still have to do the borders and margins. To set these parameters, select the tab with the "Borders/Margins" label.
You now see table like arranged fields, most of them disabled by default.
As soon as you mark either checkmark "Borders" or checkmark "Margins" the associated fields are activated.
Now you can specify for a text section top, bottom, left and right margins and borders.
If you don't need that, you can check "common". This will disable the fields for specific positions and it remains one single setting valid for all positions.

Now mark "Borders" and "Margins" and then for "Margins" also set checkmark "common" to marked.
Now select for border top and border bottom the border style "solid" and as border width the value 1 px (pixel). By that you define a solid 1 pixel wide line as border at the top and at the bottom of a CSS formatted text segment.
Select for border left and border right the border style "dotted". By that you define a dotted line as left and right border of a CSS formatted text segment.

For the margins "common" has been selected. Therefore you provide here only a single value one for "margin" and one for "padding". Specify here the value 5 px (pixels).

The source code for the SCC style sheet is now generated and presented in the editor pane. It should look like this:

Usage of CSS Classes in HTML-Documents.

Store (save) your CSS file and create a new HTML document. You will recognize, that the CSS file automatically is incorporated into your document. This is because the project properties state, where the central CSS file can be found.

Now enter the following text into the body of your HTML document:

You now have assigned the CSS class to a Div-tag and to a Span-tag.
Div and Span tags are used in HTML to format text segments exploiting CSS classes. The tags themselves have no formatting specification, they take over the CSS specification.
There exist two different tags, for two different application types.
If you want, that the formatting class treats the text between start and end tag as line text (insert line breaks at beginning and end of the segment), then use the Div tag.
If you want, that the formatting class treates the text between start and end tag as continous text (no line breaks inserted), than use the Span tag.
This is hard to describe. You therefore should just look at the result.
Click on "pre view" and look at the result in your pre view browser. Enlarge and shrink the browser window and see, what happens.

The result should look like:

Example with Div-Tag:

Example with Span-Tag

Using Code-Snippets.

What are Code-Snippets?

One of the most powerful features of (X)HTML-Format 8 are so called code snippets.
Code snippets are simply pieces of source text including also formatting tags.

This may explained using an example.
Take for instance the tag <b></b>. If you insert this tag simply via the clipboard, the cursor is positioned after the insertion always at the first position following the tag. But if you want to mark a piece of text and have the start tag <b> inserted in front of the selected text and the end tag </b> inserted after the selected text the insertion using the clipboard does not really help.

But exactly this can be achieved with code snippets. As code snippet you define the "Bold-tag" like this: <b>|</b>

The control character "|" specifies, that at it's position the previously selected text shall be inserted, replacing this control character. If you did not mark a text segment, this control character determines the position of the curser.

But code snippets allow even more.
If you want to include a text segment, which has to be modified at certain positions after insertion, you can define that like shown in the following Java-Script example:

You see, that there are "|" control characters surrounding the file specification. This causes, that this code snippet selects the the file specification after insertion. If you now enter something via the keyboard, the selected text will be replaced by your input.

Creating New Code Snippets.

(X)HTML-Format already provides groups of code snippets for CSS, HTML, Java-Script, SSI and XHTML.
But you easily can generate your own snippets and put them into the appropriate code snippet set.
Even distribution of such snippets is easy, because they are all placed in folder "codesnippets" located in the HTML-Format installation directory. The file specifaction (filename with file extension ".csn") determines the snippet group.
You just need to copy this file into the codesnippets folder of another installation.
When starting HTML-Format in this installation, the new file is read and presented for fast selection in menu "Code Snippets".

You now learn, how to generate new Code-Snippets.

Please open code snippet set "Standard" via menu "Code Snippets->Snippet Sets"
This code snippet set most likely is empty, because it shall be used to comprise your favourite code snippets in a random sequence. How to create your own set, we explain later on.
Now select menu item "Code-Snippets->Edit Code Snippets". The code snippet dialog opens.
Click on button "New Tag" and provide as key name "div-separator" in the field popping up and click OK.
The tag is added to the tag list. THe code snippte is still empty. To get is alive, enter the following under "Actual content":

Now save the code snippetwith a click on butten "Save content".

Congratulation, you have generated your first code snippet. Do the same for the following coed snippets.

Code-Snippet Name	Content
div miniborder	<div class="miniborder">|</div>
span miniborder	<span class="miniborder">|</span>

Leave the dialog after you have saved the last snippet via button "Close".

If you now open menu "Code Snippets" you see your three new code snippets as menu items.

Now try "div-miniborder":
You see, that the cursor after insertion is placed inside the tag. Now select a piece of unformatted text of your choice and select the same code snippet again.
You see, that the marked text now is padded with the code snippet.

Generate your own Code-Snippet Set.

To group your code snippets you need to generate an own code snippet set. This is also done with the code snippet dialog. Just click at button "New Set" and provide the name of the new set. Then do the same as you did in the previous example.

Conclusion:
With code snippets you can very easily add your own tags to (X)HTML-Format to enrich it's functionality. Code snippets have no size limit, therefore you can generate even really complex tags.
By the way, I am always interested in good code snippets, if you send your snippets to me, I can expand the library of initially provided snippets for (X)HTML-Format.

Customization and Optimization of Editor Tags.

(X)HTML-Format offers a lot of functions. Most of them are used to generate (X)HTML tags, which may have a relatively complex syntax as well as many attributes.
All tags generated by HTML-Format can be modified. The tags have the same format as code snippets. This simplifies their modification.

You may ask yourself, why to modify existing tags?
Here some examples:

• You have created a style sheet, to which you want to provide defaults for some tags.
• You want to replace a certain tag automatically with another one.
  You can think about the tags "<b>|</b>" to be replaced by "<span class="bold">|</span>"
• You have created a footer to be inserted in each newly created HTML document.
  In this case you had to adjust just the tags named "new_dialog_htm" and "new_quick_htm".
• You want to have the specificaton of how text should flow around images not directly in the tag but in a central CSS file.
  In this case you had to modify the tags named "image_float_left", "image_float_right" and "image_style_default".

We now will, as an example, register a footer for all new HTML documents.
To do that, open the tag dialog via menu item "Options-> Edit editor tags". A dialog similar to the code snippet dialog opens. The only difference to the code snippet dialog is a text pane with the default value for the tag and the related button "Default value".

Use this button, if you want to discard a modification you did in field "Actual content" to reestablish the original default value.

To provide a footer for each newly created HTML document, find the tag named "new_dialog_htm" in the tag list.
This is the source text which is inserted into a newly generated HTML file after you have completed the dialog associated with menu item "File -> New -> Document dialog".
The place holders %1 to %n are replaced by the values provided via the dialog.
Now scroll down in text pane "Actual content" until you see text:

Now click on "Save content".

Now open tag "new_quick_htm" and do the same. The tag "new_quick_htm" is the source text, which is inserted into a new file, when you click button: .

After saving your modifications close the tag dialog via button "Close".

To see the result, just create a new HTML document.

Such auto-text you may also insert via the buttons and into your HTML documents. Using these auto text functions you never need to enter manually the last modification date and time in your documents.

Coming Up ...

Congratulations, you have finished this tutorial successfully. You'r now very familiar with the various functions of (X)HTML-Format 8. The tutorials did not cover every feature of the tool, but I asume, that you'r now in a position to learn the functions not covered by your own easily.
If there is something not 100% clear, please consult the "help" and the "useful hints".
If this does also not help, don't hesitate to contact me via E-Mail.

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.