download :
(+/- 650 Ko with
this Howto) :
HTMX.dmg.gz

I tried to make this sofware as safe to use as possible. However no software is bug free and I cannot take any responabilities for problem or damages you endure while using HTMX...

HTMX is a little and basic html editor, not "wysiwyg" at all, build to create a personnal web page without having to deal too much with html tags.
This soft must be use "in parrallel" with your browser in order to verify, progressively, the result of your insertions (blocks, text, images, urls, "html windows", movies, tables) in the page.
Thanks: to the participants of Macgeneration's forums (www.macgeneration.com) and in particular to Gwenhiver.

This soft has been created (at 99%) with applescript language.

System requirement : Mac Os 10.1.3 and a sceen 1024 by 768 px.

(Sorry for this translation, as you will see, i don't speak wery well english.)

This version give you (at least try to give) the ability to build your page using "blocks" : a kind of "containers" ready to receive your insertions. This "blocks" will allow you to "design" your page...

Now, page parameters are distributed under 5 tabs :
- "Content" : it's the main tab because here you build the "body" of your page with your insertions (text, images, urls...),
- "Text style" : here you choose characteristics for the 5 available text style in HTMX (and also url's colors),
- "Page & blocks" : here you choose characteristics for your page and blocks,
- "Table" : here you can prepare html tables,
- "Option" : here your can give other informations concerning your page and also save your page in separated .css and .htm files.
- and one more tab to create a page with frames.

Drawers at right let you give parameters for each kind of insertion.

Before, it's "recommended" to draw what you want to get...

With this soft, you can not create blocks of any size, anywhere : size of each kind of blocks is calculated by HTMX using your page size and block definition.
To define blocks size you must choose (in "Page & Blocks" tab) :
1- page's left margin size,
2- page's width size,
3- size of block's "padding",
4- size of block's border,
5- size of block's margin,
6- and clik on the big button at the bottom of the tab to ask HTMX to calculate and show the result.

(in this tab, your can also choose background colors for page & blocks. Caution: many Mac or PC browsers do not recognize the "transparent" color)

The soft show you width of each kind of block (height depend only of the content of the block) :
- "page width" block,
- "1/2 page" block,
- "1/3 page" block,
- "2/3 page" block,
- "1/4 page" block,
- "3/4 page" block.

This "html window" show you an exemple of blocks size :
(as you can see it, blocks are not designed to be imbricate the ones in the other except in some particular cases described later...)

(Every kind of block has the same padding, border, margin, background color and border color but your can but you can punctually (for one block) indicate another background color and another border color using buttons at the bottom of "Blocks" area in "Content" tab.)

For information, block width appears too in the "Blocks" area of "Content" tab.

From now you've got 6 kind of blocksadapted to your page : blocks like "1/2 page lft." will go at the left of your page, those like "1/2 page rt." will go at the right of your page, those like "1/3 page c." are not centered in the page but will go at the right of the previous "1/3 page lft." ...

(not very important : you can also create blocks with the width you want ("free size left" & "free size right") but always without padding nor borders.)

Whatever you want to insert in your page, you will have to insert it in a block...
To use a block you must :
1- choose the size and the position of your block in the area "Blocks" of "Content" tab,
(2- perhaps choose a specific background and border color for this block),
3- click on the large button "Open" on the right of "Blocks" area,

Htmx then adds the "code" for an open block in the area "HTML (body of the page)".
From now, you can add insertions you want.

When you've filled your block with your insertions, you must "close it".
The application let you choose 2 ways of closing your block : a simple "Close" and one "Close +/" (Close and "next below"): in this last case, no other data will come at left or at right of the block; your next insertion will be placed below (HTMX always close the last right block this way).

The "prefabricated" blocks of this soft are not designed to be inserted one in another (the result can be really strange) with the exeption of the following cases for which HTMX preserves block's width and margin.

• a block "width page" can contain:

- 2 blocks "1/2 page" (a block "1/2 page lft." and a block "1/2 page rt.")
- 3 blocks "1/3 page" (a block "1/3 page lft.", a block "1/3 page c." and a block "1/3 page rt.")
- and 4 blocks "1/4 page" (a block "1/4 page lft.", 2 blocks "1/4 page c." and a block "1/4 page rt.")

• a block "2/3 page" can contain 2 blocks "1/3 page" (a block "1/3 page lft." and a block "1/3 page rt.")

• a block "1/2 page" can contain 2 blocks "1/4 page" (a block "1/4 page lft." and a block "1/4 page rt.")

• a block "3/4 page" can contain 3 blocks "1/4 page" (a block "1/4 page lft", a block "1/4 page c." and a block "1/4 page rt.")

In order to help HTMX schematizes your work in the drawer "diagram":
[ b11: indicate a block "width page" opened,
[ b12: indicate a block "1/2 page" opened on the left (of the page),
[ b22: indicate a block "1/2 page" opened on the right,
[ b13: indicate a block "1/3 page" opened on the left,

[ b23: indicate a block "1/3 page" opened on the right of the previous block,
[ b33: indicate a block "1/3 page" opened on the right,
[ b46l: indicate a block "2/3 page" opened on the left,
[ b46r: indicate a block "2/3 page" opened on the right,
[ b14: indicate a block "1/4 page" opened on the left,
[ b24: indicate a block "1/4 page" opened on the right of the previous block,
[ b34: indicate a block "1/4 page" opened on the right of the previous block,
[ b44: indicate a block "1/4 page" opened on the right,
[ b68l: indicate a block "3/4 page" opened on the left,
[ b68r: indicate a block "3/4 page" opened on the right,
[ bl: indicate a block "free width" open on the left,
[ Br: indicate a block "free width" open on the right,

]: indicate the closing of a block,
] /: indicate a "closing+next below" of a block,

The small button "Rd" (under the button of the drawer "diagram") enables you to update this area after your manual corrections of HTML code : this update is rather long (it lasts, for example, more then 1 minute for this "howto"...) : during this time a window "... in preparation" appears, "attached" to the main window.

If you add contents (texts, images...) outside a block:
- for the text, it will be aligned as you chose in the tab "Text style" but without padding... with strong risk of scattering in all the page.
- for the images, movies, "HTML windows" and tables: they will be centered in the page.
(the § above is outside a block, the block which precedes it is "closed+/ ...next below")

The size and color values you've choosed in tab "Page & blocks" can be modified when you want, your page will reflect this changes (except the background and border color of those for which you chose a specific background and border color).

The blocks cannot be inserted in the page in any order, you must start at the top of the page (at left or right).
If you want to create and fill a whole column on the left before adding a another column on the right, open your block column at the beginning of the document and close it only at the end of the column : do not try "to pile up" blocks from top to bottom but give them a "block-frame" which can remain invisible if it's color is the same as it's background...

- choose a name for your page, a sentence of description and some key words summing its contents as well as possible,
- choose the language used in the page,
- if you want, you can change color and alignment of the 5 styles of characters when they are used in a table...

5 different styles are available by default : Page title, Title, subtitle, text and note.
Each style have the same parameters:
- the font : to choose in a list for most current or indicate a particular font by clicking on "or:" button and by indicating its precise name... (more you choose a "rare" font minus your page will have chance to be correctly design on another configuration),
- size of this font (caution: in this version the size is defined in pixels !),
- the color of the text (among 16 preset or indicate, by clicking on "RGB", a value RGB in %).
- alignment (left, right, centered or justify),
- "alternatives": bold("g"), italic("i"), underline("s"),
- and line-height (in % of the size of the font).

For urls, choose their colors for the 3 "states": not visited, visited and mouse over.

The names of the styles are indicative, you can modify them to adapt them to your needs.

You will find, on the right of the area "Text insertion" of the tab "Content", a cursor allowing you to select one of the 5 styles (default : "text" to "note") which you defined in the tab "Text style".

The choice of the style must be done before the click on the square button "arrow" (also on the right of the area of insertion) which translates and adds the text in the area "Html : body of the page": there can be only one style for the totality of the area of insertion.
Important: the styles text, subtitle and note does not cause a jump of line between your various additions of text contrary to the styles Page title and Title.

"specific" color and alignment:
By default, it is the color chosen for the style which applies but, before the clik on on the square button "arrow", you can choose to punctually modify this colors via the button "color specific". This color could not be modified any more (except erasing the html tags in the area "body of the page"...).
Idem for "specific alignment ".

By default, there is no dot before a paragraph (§), but you can choose to add some by clicking on the box "1§=1dot" (do not leave empty lines between, before or after your §, else they will also have a dot).

The choices of a specific color, a specific alignment and addition of dots are automatically unselected after the click on on the square button "arrow".

During the "translation" a progress bar appears on the right of the button "arrow" : let the "translation" finish before other actions on the soft.

- click on the button "Image", the drawer asking you what to insert appears on the right :
- tell the name of the file concerned e.g.: image.jpg in the area "file",
- you can add an alternative text which will appear in the event of trouble with the image file... in the event of the page is readed by a browser that do not load images...
- it's better to sized its images to the size of the targeted block but if you do not have the software to do that, you can force your image to adopt a size by fixing its width (and/or its height). With one of these two constraints the image keeps its original proportions, with both; it is likely to be deformed.
- choose if you want that this image as also a targeted file (another HTML page, another image...) and indicate its name in the text area...
- if you want that this file appears in a particular "HTML window", indicate the reference of this "HTML window" in the area "reference of the HTML window as target :" (for more explanations see the chapter "V/Create a page of summury")
... and click on the button "arrow" (on the left of the drawer "image") so that the application adds the html codes in the "body of the page".

If the width of the image is lower than the size of the block which receives it, the image will be centered in the block.

To a web adress :
- click on the button "Url" to open the url's drawer,
- select "a web page("www...")" in the "Type" menu,
- tell the name of its "source" file, (e.g.: www.thisite.com/) in the area "Url" (do not add "HTTP://" before, HTMX add it),
- tell, in the aera "text in the page" the text of the url that appears in the page,
- you can add a comment that some browsers show in "help bubble" when the mouse is over the url,
- you can indicate a reference in the area "reference of the HTML window as target :" so that the source of the url is showed in a specific window... (see the chapter "V/Create a page of summury" for more explanations),
... and click on the button "arrow" on the left of the drawer "Url" so that the application adds the html codes in the "body of the page".

Idem to insert a url "a file (relative url)"...
It is the kind of url which should be used to target a second page of your site; ex. "mypage2.htm".

Idem for the insertion of a mail address:
e.g.: mymail@here.fr: a click on this url will launch the mail software of the reader.

- click on the button "Movie" to open the drawer,
- tell the name of the file, e.g.: mymovie.mov in the area ".mov :",
- tell its size (width and height are necessary),
- choose the options of presentations: automatic starting or not, "controls" of reading or not (if so, HTMX adds 16 pixels to the height),
- not all the configurations and browers are compatible with movies inserted this way : give an alternate text indicating, for example, where to find the necessary Quicktime extension.
... and click on the button "arrow" on the left of the drawer "Movie" so that the application adds the html codes in the "body of the page".

You can add to your page a window showing another HTML page :
- click on the button "Windo." to open the drawer,
- indicate which HTML file to show initially in this window,
- indicate an alternate text that the incompatible browsers with these "HTML window" will show ,
- if you want to use this "HTML window" as target for an url, you must name it : indicate in the area "referred as target :" the name you chose for this window (without accents nor spaces): see chapter "V/Create a page of summary" for more explanations,
- indicate the size of the window in pixels,
- and click on the button "arrow" on the left of the drawer "Windo." so that the application adds the html codes in the "body of the page".

Here for example a window of 350 by 150 pixels showing a HTML page that contains some children's drawings :

Click on the tab "Table".
The addition of a tables is different of the other kind of insertions: first, the table created is not directly added in your page but appears in the window "TABLE: complete area" of the tab "Table" so that you can fill it by the addition of text/images/urls/movies (coming from area" HTML" at the bottom of the tab) then, copy/paste the resulty within the "body of the page" of tab "Content".

Caution: the data of the tab "Table" are not saved by HTMX in its file ".htmx" (Save htmX file...).

In the drawer Url (and in the drawer image when image has also a target) the area "reference of the HTML window as a target" enables you to show the "source" file of the url (or the image) in a particular window :

- if you tell : "_ blank" (without the quotation marks) in this area ; the "source" file of the url is showed in a new window opened by the browser,
- if you tell : "_ top" (without the quotation marks) then the file is showed in the same window as the url and replace all its content.
- if you do not tell anything in this area, by default, the browser shows the "source" file in the same window as the url (if the url is in a "HTML window", only the contents of this "HTML window" are replaced).

Now it remains me to create the pages "mypage1.htm" and "mypage2.htm", pages which will be showned in the "HTML window" of right when the reader clicks on the url "my page 1" or "my page 2" of left...

1- select tab "frames",
1- choose a model (2 or 3 frames)
3- chosse a name for this page (appears at the top of the browser window),
(also choose to show borders and to allow users to modify their size)
4- for eatch frame, choose size (pix. or %), scrolling or not, a html file to show and a "target name" (to use in drawer Url : "reference of the html window as target").
5- clik on "save as..." to save an ".htm" file for this page of frames parameters.

(to have a frame "fixed" :
- define it's size in pix,
- select button "elastc" for the other frame.)

- create 2 files : an html file (.htm) readable by browsers, its name is by default "index.htm" and an htmx file (.htmx) readable only by this software.

To note :
- the name of the html file appears at the bottom of HTMX window
- the button "Save" in bottom right of the window of HTMX is usable only after a first recording via "Save as.." in menu "file".

During the time of preparation, a window "... in preparation" appears, attached to the main window.

Caution: the opening of such a file causes the erasing of the work in progress!

The files "htm" as those created by HTMX are composed of 2 parts: the HTML contents and the styles definitions. The part describing the styles can apply to all the pages of your site without having to be included in any page :
1- create your page in the usual way ("Save as..." of menu "HTML file" then the button "Save"...)
2- at the end of your work : save your choices of styles (contents of the tab "Text style", "Page and blocks" and table options of tab "Options") in a file whose extension must be ".css" via the button "Save styles..." of the tab "Options".
3- record your HTML file in progress in another file ".htm" via the button "Save page as..." of the tab "Options" without forgetting to associate to him a file of style (.css) by indicating its name (e.g.: "mystyles.css", the file must be in the same folder as the page) in the area "Name of the style file (".css") to use :".

HTMX is not able to read again a file of style ".css", it is strongly recommended to save your choices of style via a file ".htmx" as model in order to be able to re-use it to create your various pages.

(Howto made with HTMX 2.7 - Grenoble (France))