odake's web page >> パソコンで楽しむ >> WebページをHeTeMuLu Creatorで作る
Webページを作るのには、メモ帳などのテキストエディタで一字ずつ入力するよりも、 タグを入力し易いHTMLエディタの方が便利です。今まで「必要な機能はみんなある」と思われる多機能のフリーソフト「HTML Project 2」を長く使っていて、使い方の解説ページも作っていましたが、私の環境で他のアプリケーションとの相性が悪いのか動作が不安定で、突然強制終了してしまうのに悩み、他の誰もが使えるフリーソフトで使いやすいHTMLエディタを探していました。
オープンソースの「KompoZer」というソフトがありました。パッケージソフトのホームページビルダーのように、見たままの形でHTMLのタグに詳しくなくてもホームページの作成が出来る、WYSIWYGといわれている種類のソフトです。これについても私は、ダウンロード・インストール・日本語化と簡単な使い方を別のページ（KompoZerでWeｂページ作成）で紹介しています。
アプリケーションで半自動的にタグを入力できるのは便利ですが、WYSIWYG のソフトは、操作が重複した時など不要なタグが入力されてHTMLファイルが汚れます。タグを直接入力するタグ挿入型の方が綺麗な小回りの効いたページを作ることができますし、HTMLの勉強にもなります。
探して見つかったのがHosiken Labs (ほしけんラボ)で公開されていいる「HeTeMuLu Creator」です。多機能ですがヘルプが追いつかないのかあまり詳しくないので、私も未だ使い方が判らないところが多いのですが、色々試しながらこのページを書き進めていきます。
このページはHeTeMuLu Creator Ver.1.20β2で作っています。
Hosiken（ほしけん）さんが提供しておられます。Hosiken Labs(http://hosiken.jp/) の［開発室］に［HeTeMuLu Creator へてむるクリエイタ〜］のページがあり［特徴］［ライセンス]［ダウンロード］［スクリーンショット］などを見ることができます。
現在のバージョンは、2009年11月に提供された V1.20 Beta 2 です。ベーター版の2番目ですが、前身の HeTeMuLu Writer Ver.2.08a（2003年8月）というHTML3.2 に対応したHTMLエディタがあり、改良を重ねた HeTeMuLu Creator Ver.1.20β2 では、HTML4.01や XHTML CSS に対応し 色々カスタマイズが出来るようになり Windows 2000/XP/Vista/7 で動きます。
作者のページの［特徴］でこのソフトの特徴をつかむことができます。少し拾ってみます。
特徴には書いて無いのですが、キーマクロとカスタムマクロがあり、繰り返して操作する手順を自動化できるようです。キーマクロはExcelのキー記録の様には結果をカスタムマクロに反映させられない別物のようですし、カスタムマクロは、JavaScript 風の DMonkey というスクリプトで、サンプルファイルも見つからず、プログラムの知識が無いと歯が立たず敷居が高くなります。
前に使っていたソフト(THML Project 2)と比較したくなりますが、このソフトの使い勝手は「タグを入れてからテキストを書く」のによいようです。THML Project 2 では初めにテキストがあって簡単なマクロで、タグを入れていくやり方が便利でした。このソフトでもカスタムマクロが使えるとよい方法を見つけられそうです。
HeTeMuLu Creatorはフリーソフトで、個人・業務用に関係なく無償で利用出来ます。ヘルプ（以前のバージョンのヘルプのようです）では寄付を受け付けていると書いてありますがますが、ベクターのシアレジのリンクをクリックすると「受付終了」となっています。
Hosiken Labsの［開発室］［HeTeMuLu Creator］［ダウンロード］からダウンロードします。Version 1.20 Beta 2 (2009/11/12 公開)は、正式版の差分ファイルになっていますので、正式版をインストールした後で差分を上書きすることになります。
ダウンロードは、正式版のVersion 1.10a インストーラ版 (hcre110a.exe / 1,942 KB)とベーター版のVersion 1.20 Beta 2 差分 (hcre120beta2.zip / 1,500 KB)をダウンロードして適当なフォルダに保存します。
また、Vector（ベクター）からもダウンロードできますが、正式版の hcre110a.exe / 1,988,439Bytes / 2004.1.21 と HeTeMuLu Creator (ベータ版 差分)1.20 Beta 2 hcre120beta2.zip / 1,535,754Bytes / 2009.11.11 の両方をダウンロードします。
正式版はインストーラーのない圧縮された hcre110a.zip が別にあります。必要によりデスクトップのアイコンやスタートメニューへの登録を自分で行う場合や、USBメモリ等に入れて持ち歩く場合などで利用できます。
ダウンロードした正式版のインストーラ版 hcre110a.exe は、ダブルクリックするとインストーラーが起動します。インストーラーの無い圧縮されたアーカイブ版 hcre110a.zip をダウンロードした場合は、解凍ソフトで適当なフォルダに解凍すれば使用できます。
ダウンロードしてあるベーター版のVersion 1.20 Beta 2 差分 (hcre120beta2.zip / 1,500 KB)を解凍ソフトで解凍し、解凍したフォルダー中のすべてのフォルダー・ファイル（左に表示）を選択してコピーし、インストールしてあるフォルダー（インストールした場合は［C:\Program Files\Hetemulu Creator］）に貼り付けると上書きできます。
正式版と同じファイル名・フォルダー名で上書きコピーするので、上書きするかどうか確認のウインドウが出ます。
デスクトップにショートカットを作ってあれば、ダブルクリックすると起動します。操作のヒントを表示する［ワンポイント］を閉じて、メニューバーの［ヘルプ］［バージョン情報］をクリックすると、［Version 1.20 Beta2(2009/11/12)］と表示されます。
上からタイトルバー、メニューバー、ツールバーがあり、一番下にステータスバーがあるのは、Windows のアプリケーションに多くありますが、HTMLのタグを入力し易いように、ツールバーの中に［タグ操作］というタブで分類されたバーがあります。
ツールバーの下は縦に2分割され、左が［エクストラバー］で更にタブで［ファイル エクスプローラー］（起動した時に表示されている）を始め6つの機能を切り替え出来ます。右はエディタ部分でこれも複数ファイルをタブで切り替え出来ます。
メニューバー・ツールバーは左上をマウスでポイントすると、マウスポインタが十字の矢印に変わり任意の場所へドラッグして移動できます。エクストラバーはタイトルバーをクリックすると、マウスポインタが十字の矢印に変わり任意の場所へドラッグして移動できます。メニューバーは、移動できない様に固定することができます。手順：メニューバーの［表示］［メニューバーの固定］
このソフトはユーザーが既定値を色々カスタマイズすることができます。画面のカスタマイズは使い勝手に影響しないものもありますが、ユーザーの好みで設定します。
メニューバーの［表示］［動作環境オプション］をクリックし、左ペインの［画面のデザイン］をクリックすると、右ペインで画面のデザインを変更できます。
ツールバーとメニューバーのデザインを設定できます。私はツールバーを［Office 2007 タイプ］に、メニューバーを［オート］にしました。
エディタ部分（編集領域）は複数のファイルを表示出来ますので、ファイル毎に見出し（タブ）が付きます。見出しの位置は選択できます。私はデザインは［タブ］、位置は[上]にしました。
3つのチェックボックス（タブにアイコンをつける、タブを複数行で表示する、ファイル名に拡張子をつける）には、全部チェックを入れました。理由はCSSファイルも表示することがあるのでアイコンを表示し、開くファイル数が多くなったりファイル名が長くなったりすることがありますし、アイコンだけでなく拡張子で区別したいからです。
ツールバーのタグパレットはタグを［カスタム］［フォント］［レイアウト］………などのグループ別に纏めタグで表示を切り替えるようになっています。私は、Office 2007 のリボンの様に、［タブの位置］を［上］にしました。
左のエクストラバーのタブの位置は規定値のまま［上］にしました。エクストラバーを表示させないで、編集領域を広くとりたい場合は、メニューバーの［表示］［エクストラバー］かキーボードの［F4］で、切り替え出来ます。
HTMLファイルを編集する編集領域の表示は、作業能率に大きく影響します。好みと操作性を考えて設定しますが、先ず規定値で使って見て必要に応じて設定していく方が良いと思います。
メニューバーの［表示］［エディタ オプション］の［表示］タブの左の［カラー］でで文字の色を設定できます。［テキスト］［選択範囲］［タブ］［改行］………等一般的なエディタ機能で使う文字種を選択すると、下の［カラーの設定］で文字と背景の色を選べます。
HTMLファイルを編集する時のタグの要素名や属性名・属性の値等の色を設定するときは、［表示］タブの右下の［編集モード固有の設定］ボタンをクリックします。編集モード：HTMLが規定値ですが、メニューバーの[編集][編集モード]でテキストやHTMLの他にPerl等の開発言語を選ぶことができます。
［エディタカラー オプション］ウインドウの［HTML］タブで、タグの両端（<、>）や要素名・属性名・属性値・コメント等の文字の色と背景色を設定できます。
編集時の文字の大きさや文字間隔・行間隔とそれに関連して1行の文字数は、メニューバーの［表示］［エディタオプション］の［表示］タブで、右の［マージン］［フォント］で設定します。1行の文字数は、［編集］タブの［折り返し文字数］で設定できます。
カーソルのある行（編集中の行）にアンダーラインを表示するには、メニューバーの［表示］［エディタオプション］の［表示］タブで、右の［カラー］の［アンダーライン］をクリックし、下の［表示］チェックボックスにチェックを入れます。色は赤色が初期値で変更できます。
ヘルプの“ようこそ”にはこのソフトの主な機能として次の6項目挙げていますが、ずいぶん控え目に書かれています。
私の簡単な補足説明を追加しました。
Version 1.10a (2004/1/3)の readme.txt では、特徴として次の様に書いてあります。前項と重複しているものがあります。
メニューバーの［表示］［動作環境オプション］の［外部ツール］に登録しておくと、HeTeMuLu Creator を使用中に必要がある場合メニューバーの［ツール］［ツールで開く］で他のアプリケーションなどを起動することができます。
［オプション］に入力してある［"%1"］は、起動時のパラメータだと思いますがどういう役割か判りません。］
アプリケーションだけでなく例えば、HTML リファレンスで利用している［とほほのWWW入門］のサイトでは要素・属性のサポート状況を表示していますが、HTMLのバージョンにより非推奨・廃止されたものは積極的に表示されていないため、誤用の恐れがあります。外部ツールで別のサイト（例：(X)HTML4/1.0/1.1 References）を呼び出し調べて確認出来ます。
常用するタグを登録しておくと、属性を含めエクストラバーの［ユーザー登録タグ］の一覧から簡単に入力できます。登録の方法は、メニューバーの［表示］［ユーザー登録タグの設定］のツールバーの［＋］をクリックし、［登録名］［短縮キー］（ショートカットキー）［内容］を入力します。すでに登録したタグを編集することができますし、短縮キーを設定することも出来ます。
コピー（Ctrl+C）貼り付け（Ctrl+V）上書き保存（Ctrl+S）といった Windows のショートカットキーのほかにこのソフトの機能をキーボードで操作できるように工夫されています。メニューバーの［表示］［キーカスタマイズ］をクリックすると、［キーのカスタマイズ］というウインドウが出ます。［コマンド］のリストボックスの矢印ボタンをクリックしてコマンドの種類を選択して目的のコマンドを選択し、下の［割り当て］に［なし］と表示されている場合に新しくショートカットキーを設定できます。[特殊]のリストボックスを開くと、組み合わせる特殊キーを選べます。［キー一覧］ボタンをクリックするとすでに設定されているショートカットキーを見ることができます。繰り返し使う機能のキーを覚えて次第に使えるキーを増やすようにします。
Webページを閲覧するブラウザは、Internet Explorer が最も多く利用されていますが、違うブラウザではどのように見えるのか知っておくことが、Webページ作りに必要です。HeTeMuLu Creator では、A〜Dの4個のブラウザを設定しツールバーのアイコンで起動して表示できます。設定は［表示］［動作環境オプション］の［ブラウザ］を選択します。ブラウザがインストールしてあると[簡単設定]のリストから9種類のブラウザの設定が簡単にできます。
ヘルプによるとテンプレートとは、HTML ファイルを雛型として保存し、その雛型をもとに新規作成できる機能
とあります。同じ文書構造でデザインでページを作るときは雛形を使うと便利です。HTMLファイルをテンプレートとするときは、固定部分を入力しておきページごとに変化する部分がわかりやすい様に表示して保存します。保存はメニューバーの［ファイル］［テンプレート］［テンプレートとして保存］（*.het）でわかり易いファイル名（日本語）で保存し、利用するときは［ファイル］［テンプレート］［テンプレートを開く］で開き、作業に入る前に *.html ファイル（半角小文字）にファイル名を変更すると良いでしょう。
テンプレートの保存場所は、HeTeMuLu Creator をインストールしてあるフォルダの［\HeTeMuLuCreator\Profiles\ユーザー名\Templates\］になります。
ヘルプによるとコンポーネントとは、HTML ファイルを部品として保存し、その部品を現在編集中の文書に挿入できる機能
とあります。どんな使い方をするのが正しいのか判りませんが、例えばこのページの最後にhr要素（水平線）以下は、このサイトでどのページでも使います。<hr><adress>〜</address>をHTMLモードで作り［ファイル］［テンプレート］［コンポーネントとして保存］で保存（*.hec）しておくと、必要の時に、［ファイル］［テンプレート］［コンポーネントを挿入］で入力できます。
コンポーネントの保存場所は、HeTeMuLu Creator をインストールしてあるフォルダの［\HeTeMuLuCreator\Profiles\ユーザー名\Components\］になります。
複雑な操作を繰り返す時、Excelの［キー記録］のようにキーボードの操作を記録し、それを再生することで省力化を行います。Excelのキー記録と違い,マウス操作は記録しなく、記録されたデーターはカスタムマクロには利用できないようです。
キーマクロの記録開始は、メニューバーの［ツール］［キーマクロ］［キーマクロの記録開始］（ショートカットキーは、Shft+Ctrl+M）をクリックします。
停止は、メニューバーの［ツール］［キーマクロ］［キーマクロの停止］（ショートカットキーは、Shft+Ctrl+E）をクリックします。記録は同一のファイルのみの操作で、タブをまたいだ操作は記録できません。
キーマクロの実行は、、メニューバーの［ツール］［キーマクロ］［キーマクロの実行］（ショートカットキーは、Shft+Ctrl+P）をクリックします。
キーマクロで記録した内容を保存しておき、必要な時に読み出して実行することができます。
JavaScript のサブセット（一部）のDMonkeyという言語を使ったプログラムを作ることで、HeTeMuLu Creator の機能を拡張することができるとのことですが、ヘルプによるとJavaScript で簡単なプログラムが組める知識が必要
です。カスタムマクロヘルプとDMonkeyヘルプが用意されていますが、Webで提供されているJavaScriptを解説と首っ引きで利用させていただいている者にとってはとて理解できません。参考になるかとサンプルを探してみましたが見当たりませんでした。
この HeTeMuLu Creator は、タグ入力補完機能とショートカットキーやタグパレットで、タグを入力してから、テキストを書く編集の仕方に適していますが、テキストが先にある場合は、テキストの範囲を選択してからタグを入れるか開始タグと終了タグを別々に入れる必要があります。そんな時に段落にキャレット（カーソル）を入れて、段落の前後にタグを一度に入れられると作業が楽になります。
また、リスト（ol,ul,dl要素）や表（table要素）などもマクロが使えると工夫できそうですが、大きな大きな宿題です。
ここから具体的にHTMLファイルを作ってみます。
具体的な例として、最初は文字だけのページのこのサイトの「パソコンで「困った!!」の助け舟」のトップページを作ってみます。ブラウザでこのページを開いてソースを見ることができますが、これから作るソースと違っているところがあると思います。
色々方法があると思いますが、失敗を少なくするために最初に作業するフォルダを作っておきます。出来れば自分のサイトのフォルダ構成と同じフォルダ構成をマイドキュメントの中に作り、その中に今回の作業するフォルダ（実際にアップロードする元のフォルダになる）を例えばフォルダ名を「help」で作ります。私の場合［D:\My Documents\My Web\html\pc\help\］です。
多くのサーバーで使われているUNIX系サーバーの場合は、フォルダ名・ファイル名に半角小文字の英数文字だけ使え、大文字全角文字は認識できません。
HeTeMuLu Creator では、［エクストラバー］の［ファイルエクスプローラ］のツールバーの右端の［>>］（その他のボタン）をクリックするとフォルダに虫めがねのアイコンの［エクスプローラ］が見えるので、クリックするとWindowsのエクスプローラーが起動します。フォルダを作る場所を選び、メニューバーの［ファイル］［新規作成］でフォルダを作ることができます。エクスプローラを使うとアイコンの順序が変わり常に見えるようになります。
次にメニューバーの［ファイル］［新規作成］かツールバーの［新規作成］をクリック（ショートカットキーは Ctrl+N）すると「（無題）」というタブのついた新しい編集領域が出来ます。ここでHTMLファイルを作るのですが、作業を始める前にファイル名をつけるために保存します。
ファイルの保存は、メニューバーの［ファイル］［名前をつけて保存］（またはツールバーの［名前を付けて保存］）をクリックし、保存するフォルダ（例：help）にファイル名「index.html」で保存します。
ファイルの種類は［htmlファイル］を選択します。［すべてのファイル］にする場合は拡張子［.html］まで入力する必要があります。［index.html］で保存するとブラウザでファイル名の入力を省略して［……/help/］としても呼び出せます。
これでindex.htmlを編集中は［上書き保存］（Ctrl+S）で保存できます。
HTMLファイルについては、この文書でも触れますが、このサイトのホームページ作成入門（古いです）でも説明していますし、HeTeMuLu Creator のメニューバーの［ヘルプ］［タグリファレンス］（Shift+F1）で［とほほのWWW入門］のHTML概要等を参考にしてください。
HTMLファイルは最初の行には文書型定義（Document Type Definition）というHTMLのどのバージョンで書くかを宣言します。次に<html>の開始タグを置き、最後に</html>のタグで閉じます。html要素の中にhead要素とbody要素（フレームを使うときはframeset要素）が入ります。
head要素にはこの文書全体の情報が書かれます。ブラウザでは表示されませんが、ブラウザに必要な情報を伝えます。必ずtitle要素を含める必要があります。
body要素に文書の内容を書きます。
HeTeMuLu Creator では、ページの基本的な骨組みを簡単に入力できます。メニューバーの［タグ］［ページの設定］［HTMLの骨組み］(Ctrl+Alt+D)をクリックするとダイアログボックスが開きます。
［HTMLの骨組み］ダイアログボックスの［ページの設定］タブで、［タイトル］テキストボックスの中に入力した文字列（パソコンで「困った!!」の助け舟）が、head要素の中の必須のtitle要素の内容になります。ページの配色や背景もここで設定できますが、Webページの見栄えについてはスタイルシートで設定することが推奨されていますし、設定しなくてもブラウザの初期設定のままでも今のところ良いので、そのままにしておきます。スタイルシートを別ファイル（*.css）で設定する場合は、下の［その他の設定］［CSSファイル］のチェックボックスにチェックを入れ、右のテキストボックスにCSSファイルを指定します。すでに作成済みの場合は、右端の［…］ボタンをクリックしてフォルダ・ファイルを指定できます。
［HTMLの骨組み］ダイアログボックスの［文書の設定］タブでは、文書タイプ・文字コード・基準URL等を設定します。［文書タイプ］はこの文書の最初の行に書かれる文書型定義で必ず設定します。文書型定義の詳しい説明は［World Wide Web Guide］のページを参照してください。HTMLのバージョンにより書き方が違い、リストの中から選択します。ここでは、W3C の仕様で「推奨しない」とされる要素や属性、フレームを使用しないHTML4.01 Strict（厳密型）のDTD を使うことにして、［ "-//W3C//DTD HTML 4.01//EN"］を選びます。
HeTeMuLu Creator の初期値は、移行型の［Transitional］になっています。iframe要素（インラインフレーム）を使うときはこちらを使うことになります。
［HTMLの骨組み］ダイアログボックスで［OK］ボタンをクリックすると上の囲みのように入力されます。
link要素のCSSファイルのパスが入力されてありません。<meta name="generator" content="HeTeMuLu Creator Ver.1.20β2">とあるのは、「この文書をHeTeMuLu Creator Ver.1.20β2で作っている」という意味です。generator は「生成ソフトウエア」
この状態でブラウザで表示（メニューバーの［ツール］［ブラウザでプレビュー］）してもタイトルバーかタブにタイトルが表示されている白い画面しか見えません。これからbody要素の中に内容を作っていきます。
body要素の中には、ブロック要素とインライン要素が入ります。
HTML4.01 Strict では、body要素の中にブロック要素を直接入れることができ、テキストとインライン要素を直接入れることはできないことになっています。h1〜h6要素とp要素はブロック要素で、インライン要素とテキスト（文章）を内包することができます。
ブロック要素とインライン要素について、HeTeMuLu Creator のヘルプにある、とほほのWWW入門の［HTMLのタグと要素］では、「ブラウザ表示時に前後に改行がはいるものがブロック要素」「前後に改行がはいらないものがインライン要素」と覚えておくと覚え易い、と易しく書いてあります。また、World Wide Web Guide の［HTML の基本的な仕様］では、「文章を構造化する意味をもつ要素」がブロック要素、「論理的な意味を持たせたり修飾を行う要素」がインライン要素、と内容に迫った説明をしています。
ブロック要素は、ブラウザで表示される時はスタイルシートで幅のサイズを決めてなければ、表示範囲の左右一杯の領域を占め、前後（上下）に改行があります。インライン要素はブロック要素の中に入っています。殆どの要素はブロック要素かインライン要素に分かれます。（状況によりどちらかになる特殊な要素がある。）
長い文章は、書き流しておくよりも項目に分かれている方が、読みやすく理解しやすくなります。小さい項目の幾つかをまとめた大きい項目を作ると、複雑な内容を判り易く整理できます。項目には見出しをつけます。
HTMLでは見出しは6段階（h1〜h6）まで作ることができます。ブラウザの機能で段階ごとの見出しに段階に応じて文字の大きさや文字のスタイルが変わりますが、見出しは文書の構造を定めるもので、文字見え方のためにh1〜h6要素を使う事は間違いです。そのような場合はスタイルシートを使用します。
6段階の見出しは、h2要素はh1要素の中に、h3要素はh2要素の中にというように正順に使います。
まず、<body>の次の行に<h1>と入力しますが、この HeTeRuMu Creator ではタグの入力の仕方はいろいろあります。
h1要素のタグと要素の内容を入力して、index.htmlファイルを上書き保存（Ctrl+S）してブラウザで見ると、見出し［パソコンで「困った!!」の助け舟］が表示されている筈です。色や形はスタイルシートで後で飾ることができます。今は文章の構造体を作っています。文書全体の構想が見える場合は、見出しの階層で大体のアウトライン（概要）を作り、その後個々の項目ごとに文章を書き進めるとまとめやすくなります。
今回の［パソコンで「困った!!」の助け舟］のページは、インデックス（目次）のページですから、Word、Excel、Windows、メール、画像処理、サイト外リンクなどの 項目を h2要素にしてあります。さらに細かく分類するときは下のレベルの見出しを作ります。
見出しの下に文書を書くときは、p要素（段落）を使います。テキスト（文章）を入力しただけでもブラウザで表示できますが、文字（句読点も）を並べるだけで、改行は無視されます。HTMLでは見出し・段落・リスト・表のようにそれぞれをタグでマークアップすることで、ブラウザで文書として表示出来ます。
作成中のページ［パソコンで「困った!!」の助け舟］では、h1要素（見出しレベル1）の次に枠の中にページの説明があります。枠は後でスタイルシートで飾ることにして、文章を入力します。このソフトでは、タグを入力してから内容を入力するのに便利に作られていますが、文章が先に入力してあるところへタグを入力することも出来ます。
P要素は開始タグはテキストの前に必ず必要です。HTML4.01 では終了タグ（</p>）を省略することができますけれど、終了位置を明示するため省略しないようにした方が良いと思います。
今作っている「パソコンで「困った!!」の助け舟」のトップページでは、Word、Excel、Windows、メール、画像処理、サイト外リンクなどの 項目を h2要素にしてあり、それぞれの項目の中にテーマのタイトルが箇条書きで書かれ、それぞれのページにリンクが張られています。
HTMLでは、順序（番号）のついた一覧表（Ordered List）の［ol要素］、順序（番号）のつかない一覧表（Unordered List）の［ul要素］、用語を説明する時などに使う定義型リスト（Definition List）の［dl要素］の3つがあります。ここでは順序なしリストの［ul要素］を使います。
なお、一般にはリスト（List）と言われますが、この HeTeMuLu Creator では、［箇条書き］と言います。
ul要素は、項目を並べる順序に意味を持たない場合に使い、ブラウザでは項目の行頭に記号（マーカー）をつけて表示します。
HTMLの書き方は、ul要素の中に箇条書きの項目のli要素を書きます。ul要素の中には1個以上のli要素のみが入り、テキストや他の要素を内包することはできません。li要素の中にはブロック要素・インライン要素・テキストを内包出来ます。
内包される要素は子要素と言い、内包する要素は親要素と言います。親子の関係は、html要素とbody要素、body要素とul要素、ul要素とli要素と言うように決まっています。どの要素がどの要素を内包出来るかは、とほほのWWW入門やWorld Wide Web Guide の要素別の説明を参照。
順序つきリストの ol要素の書き方も ul要素と同じです。定義型リストの dl要素は、dl要素の中に定義される用語の dt要素を（先に）書き、次にその説明文の dd要素を一組以上含みます。
ul要素を入力する場所にカーソルを置き、メニューバーの［タグ］［箇条書き］［箇条書き］をクリックすると、［箇条書きの設定］ダイアログボックスが出ます。ショートカットキーで［Ctrl+Alt+P］を押すか、タグパケットの［テーブル/箇条］タブの［箇条書き<ul>(Ctrl+Alt+P)］をクリックでも、［箇条書きの設定］ダイアログボックスが出ます。
［箇条書きの設定］ダイアログボックスで[項目数]のチェックボックスにチェックを入れて項目数をリストボックスから選んで［OK］ボタンを押すと、ul要素の中に選んだ項目数のli要素の入ったタグが表示され最初のli要素の中にカーソルがあり、続いて内容を入力出来るようになっています。
最初のul要素を入力する場所にカーソルを置くときに、最初の項目のテキストを選択して操作すると、最初のli要素の中に選択したテキストが入っています。
キーボードで1字ずつ入力する場合は、［<ul］と打鍵してEnterキーを押すと、［<ul></ul>］まで入力され、さらに続けて［<li］と打鍵してEnterキーでは、［<ul><li></li></ul>］と入力されカーソルは項目を入力出来るようにli要素の中にあります。テキストを選択してからタグをキーボードで1字ずつ入力すると、Windowsの他の場合と同様に選択したテキストが入力したタグと入れ替わります（テキストが失われます）。
リスト（箇条書き）を入力したら、ハイパーリンクを設定します。この場合はサイト内の別のページへ移動するリンクですから、相対リンクになります。（別のサイトのページへ移動する場合は、［http://〜］のフルのURLを書く絶対リンクになります。）
相対リンクの場合は、作成中の文書のある場所（フォルダ）を基準として、同じフォルダ内の他のページ（ファイル）の時は、そのままファイル名を［a要素］の［href属性］の値に書きます。同じフォルダの中にある他のフォルダ中のファイルの場合は、［XXX/YYYY.html］(XXXはフォルダ名)というようにフォルダ名を［/］(スラッシュ)で区切りファイル名を書きます。一段上のフォルダの場合は、［../YYY.html］と書き、2段上のフォルダでは［../../YYY.html］となります。一段上のフォルダの中の（作成中の文書のあるフォルダと並んでいる）XXXフォルダの YYY.htmlの場合は、［../XXX/YYY.html］です。
相対リンクは作業をしているフォルダ構成がサーバーのフォルダ構成と同じ構成になっていると、プレビューでリンクを確かめる事が出来ます。
例えば、今作っている「パソコンで「困った!!」の助け舟」のトップページのWordの項で、［w007 文書1の上下の余白が見えない］のリンクを入力する場合の手順です。
ページの形を整えるため、このページの作成者を明らかにしたり、作成年月日や連絡方法をページの末尾に記載します。HTMLではaddress要素が用意されています。
本文と区別するため、address要素の前にhr要素（水平の区切り線）を置くと判り易くなります。hr要素はブロック要素ですが終了タグが無く他の要素を内包しません。
address要素は、インライン要素とテキストを内包出来ます。ページ作成者の名前等と連絡方法や公開日などの情報を書きます。HTMLの次のバージョンのHTML5ではこの要素は連絡先を示す要素として定義され、公開日や著作権は別の要素が用意されるそうです。
私は、以前はメールアドレスを直接記載したり、a要素のhref属性で［問い合わせは <a href="mailto:XXX@yyyyy.jp">○○○</a>> まで］とメールソフトを起動出来るようにしていましたが、スパムメールの宛名に利用されやすいので、JavaScript を使いHTML文書からはメールアドレスが見えない様にしています。
なお、メニューバーの［タグ］［レイアウト］［いろいろな水平線］（Ctrl + Alt + H）をクリックすると、［水平線の設定］ダイアログボックスが開き、線の太さ・色・配置などを属性で指定することができますが、HTML4.01 strict では廃止され、スタイルシートで設定することが推奨されています。
address要素の内容がどのページにも同じ場合は、［登録タグ］に登録しておくと、簡単に入力できて便利です。登録はメニューバーの［表示］［ユーザー登録タグの設定］で、追加・編集・削除等ができます。登録されているタグはメニューの［登録タグ］で選択すれば入力出来ます。ショートカットキーも設定できます。
Webページをリンクをたどって閲覧し回っている（波乗りのようにサーフィンという）時、現在のページがどの位置にあるのか。元のページに戻るにはどうしたらよいか。等迷う事があります。袋小路に迷い込んだように、ブラウザを閉じるか［戻る］ボタンを押さないと抜けられなくなるようなページは見る人に親切ではありません。ページを見てくださる人の立場に立ったページ作りが必要です。
今作っている「パソコンで「困った!!」の助け舟」のトップページでは、ページの最初にサイト内のリンクを1行で表し、ページの途中には随所に［このページの最初へ］と同一文書内リンクで最初にジャンプ出来るようにしてあります。飾りのないシンプルなものですが効果があると思います。大きなサイトでしたら、サイトマップ（サイト内の全ページのリンクつきの一覧）があると良いとおもいます。また、長いページでしたらこのページのように目次をつける方法があります。
<p id="nabi">
<a href="../../index.htm">odake's web page </a> >> <a href="../index.htm">パソコンで楽しむ</a> >> <a id="TOP">パソコンで「困った!!」の助け舟</a>
</p>
<p class="right"><a href="#TOP">このページの最初へ</a>
ここまでで一応 HTMLファイルの形ができました。しかし、視覚ブラウザで見ると白色の背景に黒い文字がならび、見出しや段落・箇条書きなどが区別できて、読めないことはありませんが、インターネット上で見るWebページと比べ味気ない感じがします。
その原因は、このファイルの1行目の文書型宣言で HTML4.01 Strict（厳密型）のDTD を使うとし、文章構造に関する要素・属性だけを使い、色などの見た目を整える指定をつかっていないためです。
HeTeMuLu Creator では、HTML4.01 Transitiona（移行型）DTD か HTML4.01 Frameset（フレーム設定型）DTD を宣言して、Strict（厳密型）で「推奨しない・廃止」とされている見た目に関する要素や属性を使用できるように作られています。
では、なぜ、Strict（厳密型）でWebページを作るのかというと、色などの見た目を整える視覚的な情報がHTNLファイルに混在していると情報伝達の妨げとなるからです。Webページを移用する人には視覚が不自由な方もおられます。文書の構造に関する情報と、見た目に関する情報を切り離すことによって、HTMLファイルをわかりやすくすることができます。
見た目に関する情報がカスケーディングスタイルシート（Cascading Style Sheets）です。
カスケーディングスタイルシート(CSS)は3つの書き方があります。
3つの方法が混在した場合は、（要素の中の）style属性に書かれたものが適用範囲が一番狭く最優先されます。次は（HTML文書のhead要素の中の）style要素に書かれたものが続き、最後が別のcss文書に書かれたものです。
いずれの場合もHTML文書中にスタイルシートを使用するときは、
head要素中に meta要素で
<meta http-equiv="content-style-type" content="text/css">
のように記載しておきます。HeTeMuLu Creator で入力するには、head要素内の入力する行にカーソルを入れ、メニューバーの［タグ］［ページの設定］、または（タグパレットの［ページ］）［スタイルシートの設定］をクリックします。
そして、3番目の cssファイルを使うときは、head要素の中へ（help.cssの場合）
<link rel="stylesheet" href="help.css" type="text/css">
と記載します。HeTeMuLu Creator で入力するには、<meta http-equiv="content-style-type" content="text/css">よりも後の行にカーソルを入れ、メニューバーの［タグ］［スタイルシート］、または（タグパレットの［スタイル］）［cssファイルにリンク］をクリックします。
直接要素にスタイルを設定するのですから、作成時は判り易いのですが、要素ごとに記載するためにHTMLファイルが複雑になり、ファイルサイズも大きくなり、ブラウザ表示が遅くなります。一つずつに要素にスタイルを書きこむために小回りは利くのですが、変更するときはすべての要素について書き直す必要があります。
例えばページ全体の背景色を設定するには、body要素に次のようにstyle属性を書きます。
<body style="background-color: #d2fff8;"> 〜 </body>
この場合、[style]はbody要素の属性で、[background-color: #d2fff8;] は属性の値になります。[background-color: #d2fff8;]の部分をスタイルシートでは［宣言ブロック］といい、［:］（コロン）の前の部分が［属性（プロパティ）］で後の部分が（属性の）［値］です。最後の［;］（セミコロン）は<複数の属性と値を一度に指定する時の区切りです。最後のセミコロンは省略できます。/p>
これをHeTeMuLu Creator では、次の様にして入力出来ます。
ここで、［＃XXXXXX］の［X］には、0〜9とA〜Fの16種類の文字が入ります。色のRGB3色を16進数で1色2桁（合計6文字）で表しています。詳しくは古いですがこのサイトの［画像処理入門］のサブページ［色の情報］を参照してください。
HTML文書内の head要素の中に style要素を使い、その文書にある要素に適用するスタイルを定めます。文書の中の要素一つずつにはスタイルを書かなくても文書内では同じスタイルを適用できます。
例えば右の例のように段落の p要素にブロックの上下に2px、左右に10%の余白をとり、行間をとるため行の高さを150%にし、段落の1字目を字下げの設定をすると、この文書中のすべての p要素に適用されます。
style要素には、［type属性］が必須になっていて使用するスタイルシートの種類を MIMEタイプで指定します。具体的には、［<style type="text/css">］と書きます。
以前はスタイルシートに対応してないブラウザを使っている閲覧者のため、style要素の内容をコメントタグ（<!-- 〜 -->）で囲んでいましたが、現在使われているブラウザはすべてスタイルシートに対応していますので、その必要はなくなったと考えてよい状態になりました。
スタイルシートの書式は、セレクタ {属性(property):値(value);}です。
HeTeMuLu Creator で 文書内にスタイルシートをする手順は次の通りです。
ダイアログボックスでは、キーボードから直接編集はできないようですが、HeTeMuLu Creator のエディタ上では直接編集することができます。
前項の style要素の内容を、テキストファイルにして、ファイル名の拡張子を［css］とすれば（たとえば help.css）、cssファイルになります。HTML文書の head要素内の link要素でこのファイルを（パスを含めて）参照すれば、スタイルシートが有効になります。
3つの方法の内優先順位が最も低く、最も手数のかかる方法ですが、一つのcssファイルを複数のHTML文書に適応させることができるので、統一したスタイルのページを簡単に作ることができます。HTMLファイルには見栄えに関する情報はなく、文書構造の情報だけなので、簡潔になります。
cssファイルは一つのHTML文書に1個だけではなく複数リンクさせることができます。全般的に統一するスタイルとそのページだけのスタイルというような使い方ができます。head要素の中のlink要素で指定する時に、後の行に書かれたcssファイルが前の行に書かれたものより優先されますので、そのページだけのスタイルは後の行に書きます。
link要素でcssファイルを指定したページでも、style属性やstyle要素を使う事ができますが、「HTMLファイルは文書構造、スタイルはcssファイル」と役割を分けることの方が効率的になります。
css文書のファイルは、HTMLファイルと同じく文字データーのみで構成されたテキストファイルです。文字コードの他には改行やタブなど文章を作るにに必要な制御コード以外の制御コードを含みません。拡張子が［css］で保存されます。
css文書を作るには、Windows のアクセサリにある［メモ帳］でも作ることが出来ますが、HeTeMuLu Creator を使うと何かと便利です。編集領域（エディタ部分）に、cssファイルと作成中のHTMLファイを読み込んで、タブで切り替えて確認しながら作業を進める事が出来ます。
HeTeMuLu Creator のツールバーの［新規作成］で新しく編集できるタブを作ると、HTMLファイルを作るモードになっています。このままでcssファイルを編集しても不都合は生じないようです。キー入力でcssファイルを作る場合は、編集モードを［テキストモード］に変更するのが正しいのかもしれません。
これで内容はまだありませんが、スタイルシートを設定するcssファイルができました。
今作っている「パソコンで「困った!!」の助け舟」のトップページのHTMLファイル（index.html）へ適用するには、index.html の［head要素］の中の［link要素］の属性の値に入力し
［link rel="stylesheet" type="text/css" href="help.css"］ とします。
help.cssで設定したスタイルをブラウザで表示して確認できるようになりましたが、プレビューで確認しながら入力するとき、ファイルを保存してブラウザに読み込むのは面倒な場合、ブラウザで表示するときにショートカットキーを使い、ファイルを自動保存して表示できます。
以上の設定で、htmlファイルを編集領域に表示している（タブを選択している）時に、ショートカットキーで編集中のページを指定したブラウザで表示できます。cssファイルを表示しているときはcssファイルの内容が表示されます。sccファイルを変更したことをブラウザで確認するには、まずcssファイルを上書き保存か［ctrl+S］で保存した後に、編集領域（エディタ部分）のタブをHTMLファイルに切り替えてからブラウザで表示します。ブラウザで表示するには、次のいずれかの操作をします。
この方法でブラウザを開くと新しいタブで開かれるのが初期値で、回数が多くなると沢山のタブが出来てしまいます。（ブラウザ起動時のオプションで、新しいページを開かないで更新する方法があると思いますが、私は判りません。）それを避けるには、面倒でも編集したcssファイルを保存してからすでに開いてあるブラウザの［最新の情報に更新］をクリックします。
実際にページに背景色をつけてみます。今はまだ help.css に何も設定してない（スタイルシートを設定してない）ので、ブラウザの初期値の［白色］になっています。
body {
background-color: #d2fff8;
}
help.css には、右のように入力されている筈です。5.で［複数行で入力する］チェックボックスのチェックを入れなければ、1行に入力されます。好みもありますがどちらが判り易いかにより選択することになります。詳しいことは判りませんが、開発言語でプログラムを書く場合は、複数行で記載する習慣のようです。
プロパティの値の［#d2fff8］を help.css 上で編集しても色を変更することが出来ます。
help.cssファイルを保存して、ブラウザの表示を更新すると、背景色が表示されます。表示された色合いが期待したものでない場合は、help.cssの body{…} のカッコの中にカーソルを入れ、メニューバーの［タグ］［スタイルシート］［セレクタの再編集］をクリックすれば、再編集できます。
第一段階の見出し［h1要素］はページの最初の見出しですので、文章のタイトルに相当します。目立ちやすいようにブラウザの初期値（ユーザーがスタイルを設定してなくても表示されるブラウザが定めたスタイル）でも、大きい文字で太字になっています。画像を使って飾るサイトがありますが、ここではタイトルの「WebページをHeTeMuLu Creatorで作る」の文字をcssファイルの中で次のように設定してみます。
h1 {
color: #139561;
background-color: #88f7db;
text-align: center;
line-height: 200%;
border-width: 5px;
border-style: outset;
border-color: #D8D8D8;
margin-left: 20%;
margin-right: 20%;
}
h2 {
margin: 10px 15%;
color: #009933;
}
help.cssを開き、bodyセレクタの次の行（複数行で記載は4行目）にカーソルを置き、次の操作をします。
［セレクタの挿入］ダイアログボックスでの作業の順序を変えると、結果が設定したものと違う事があるので、最終的にはcssファイルのエディタ画面で確認修正することになります。
h1要素の背景色は、ページ（body要素）の背景色と同じ系統の色で少し濃い色を、前景色（文字の色）は更に濃い色を設定する等、同一系統の色合いにするとページが落ち着くと思います。
[margin-left: 20%;margin-right: 20%;]は、h1のブロックを親要素（body）の幅より左右それぞれ20%短く設定し、ページ幅の60%の長さで左右の中央に表示します。相対的な単位にして閲覧者のディスプレイの画面の幅に柔軟に対応します。［margin:0 20%;］でも同じ結果になります。こちらは［上下は0、左右20%の空白］を設定します。
［text-align: center;］は、中央60%のh1要素の文字を中央に表示させます。［border］はh1要素の枠線です。幅を大きく取ると厚みが大きくなります。[px]はピクセル数でディスプレイの解像度により大きさが違います。枠線の色は指定しなくても多くのブラウザでは灰色になりますが、Internet Explorer 8 などバージョンによって、文字の色が影響する事があるので、明示的に設定しておきます。
ブラウザで確認すると、上下の高さが狭く感じますので、宣言ブロック（中括弧の中）にカーソルを入れ、タグパレットの［スタイル］［セレクタの再編集］で修正します。［書式］タブの［行の高さ］を［200%］としてみます。
第二段階の見出し［h2］についても同様に設定します。
p {
margin: 2px 10%;
line-height: 150%;
text-indent: 1em;
}
日本語の文章は段落毎に改行し、段落の1行目の行頭は一字字下げをするのが普通です。そして行間を少し空けた方が読みやすくなります。また、広い画面の左右一杯に文字が並び1行が長くなった時は、左右に余白を作ると読みやすくなります。これを HeTeMuLu Creator で設定します。
［スタイルシートの設定］ダイアログボックスでは、{margin-top: 2px;margin-left: 10%;margin-right: 10%;margin-bottom: 2px;}と個別に設定しますが、上下・左右がそれぞれ同じ値の時は、直接編集して［margin:2px 10%］と纏めて設定することが出来ます。
cssファイル
div.inset {
border-style: inset;
padding: 3px;
background-color: #bbffcc;
font-size: small;
}
HTMLファイル
<div class="inset">
<p> … </p>
<p> … </p>
<p> … </p>
<p> … </p>
</div>
作成中の「パソコンの「困った!!！」の助け舟」では、まえがきに相当する部分の段落を窪んだ枠線で囲んで本文と区別しています。
複数の要素（ここでは数個のp要素）を纏めてスタイルを設定するときは、［div要素］（スタイルコンテナ）を使い、［Class］名をつけてスタイルを使い分けます。cssファイルのセレクタに要素を指定しないで、ピリオド［.］をつけてクラス名だけでスタイルを設定するとどの要素でもそのclassを使う事が出来ます。要素を指定しピリオド［.］で区切りclassを指定すると、そのスタイルは指定した要素だけに適用できます。
cssファイルでセレクタにクラス名を指定する方法
HTMLファイルでの適用の仕方は、要素の開始タグの中に［<div class="inset">］というように class属性で cssファイルで設定したクラス名を指定します。HeTeMulu Creator では次のように操作します。
head要素中のlink要素で指定されているcssファイルに設定してあるclassがリストに表示されます。クラス名を半角スペースで区切って複数の class を指定することが出来ますが、リストから選べるのは1個だけで、2個目以降はテキストボックスで入力することになります。
dl,ol,ul {
margin-left: 10%;
margin-right: 10%;
}
cssファイルでスタイルシートを設定する時に、違う複数の要素をグループ化して同じスタイルを適用する場合、それぞれの要素を別のセレクタとして同じ内容を繰り返し記述しても良いが、複数の要素を連記し一つの宣言ブロック（属性＋値）で記述することが出来ます。要素をセレクタに［,］カンマで区切り連記し、共通の宣言ブロックを書きます。右の例参照
この場合に［セレクタの挿入］ダイアログボックスの［タグ］リストボックスのリストからは、1個のタグしか選択できませんので、半角カンマとタグをキー入力する必要があります。
セレクタに［.］（ピリオド）に続いてクラス名を使って宣言ブロックを書くと（書式：要素.クラス名 { プロパティ : 値 ; }）、HTMLファイルでclass属性を使いクラス名を指定（class="xxxx"）した要素にそのスタイルを適用します。［.］（ピリオド）の前に要素名がある場合は、その要素に限ってクラス名を使用でき、［.］（ピリオド）の前に要素がない場合は、すべての要素でそのクラス名を使用できます。クラス名をつけたセレクタをクラスセレクタ（Class selectors）といいます。前項のdiv要素の例参照
上記のクラスとは別にここでは使っていませんが、 ［#］（ハッシュ）に続きid名で宣言ブロックを設定することができます。（書式：要素#id名 { プロパティ : 値 ; }）使い方はクラスと同じですが、id名は一文書中一箇所だけ使うことができます。このセレクタを IDセレクタ（ID selectors）、または一意セレクタといいます。id属性はスタイルの設定だけでなく、a要素（アンカー）のリンク先の識別子としても使われます。前記の［ナビゲーション］の［<p id="nabi">］はidセレクタを指定していますが、［<a id="TOP">］はリンク先の識別子として使っています。
そのほかに、セレクタの書き方で、2つの要素の前後関係・親要素と子孫要素・直接の子要素など適用する要素を特定する方法があります。
以上で、［パソコンの「困った!!！」の助け舟］のページが一応出来ました。サンプルファイル：Samplehelp.css、Sampleindex.html
このページではふれませんでしたが、Webページ作りには、他に画像・音声・動画等の挿入や表（テーブル）などがあります。HTML 4.01 のStrict（厳密型）のDTD について書いてきましたが、いまHTML 5.0 の策定が進められており、おもなブラウザは先取りして新しいバージョンに対応しています。HTML 4.01 Strict では使えないインラインフレームが、使用できるようになるようです。そのほかにもマルチメディアのデーターを扱いやすくなる模様です。
HeTeMuLu Creator は高機能で、色々なところに工夫が見られます。使い勝手もよく考えられていますが、ヘルプの内容に今のバージョンにそぐわないと思われる個所があると思います。強力なマクロ機能がありますが、プログラム開発の能力がないと使えません。表（テーブル）はCSVファイルをHTMLに変換するマクロがあると便利だと思います。今後更に充実して頂けるとありがたいと思います。