画像ファイル 画像ファイル
HTML 忠太 ヘルプ
目次
説明

はじめに

「HTML忠太」の特徴

HTML基礎の基礎

基本操作

ファイルの置き方

画面上部のボタンの説明

各メニューの説明

ファイルメニュー

現在のタブにファイルを開く

プロジェクトを開く

新しいタブを挿入

新しいタブを挿入してファイルを開く

ファイル名の変更

上書き保存

名前を付けて保存

プロジェクトの保存

全て初期化

テンプレートの保存

テンプレートの呼び出し

印刷

終了

基本事項

リンクの注意

自動作成

自動作成の書式

自動作成自動実行

自動作成

自動作成設定

同じページにリンクに変更

元に戻す

切り取り

貼り付け

検索

置換

改行マーク挿入

改行マークの自動挿入

スペース挿入

スペースを全て削除

タグを大文字に

タグを小文字に

特殊文字の変換

タグの色分け

全て選択

全て消去

編集2

スペース挿入

改行挿入

段落設定

位置設定

文字を大きく

文字を小さく

太文字(ボールド)

色パレット表示

色の説明とパレットの使い方。

タグ辞典を表示

文法チェック

リージョン説明表示

リージョン選択範囲 表示

リージョン選択範囲 非表示

リージョン 全て 表示

ヘッダー、フッター 非表示

ヘッダー、フッター 表示

インデント実行

インデント解除

インデント設定

簡単作成

初期化及び基本スケルトンの挿入(例文入り)

初期化及び基本スケルトンの挿入(例文無し)

改行マークについて

スペースの挿入

タイトルをいれよう

見出しの文章を設定したい

背景色と文字の色を決めよう

余白を設定しよう

コメントを入れよう

段落を設定しよう

まとめて位置を設定しよう

ソースの並びをそのまま表示しよう

フォントを指定しよう

文字の大きさを変えよう(絶対値の指定)

文字の色を部分的に変えよう

文字を強調しよう(普通の強調)

文字を強調しよう(より強い強調)

フォントの形状を変えよう

ちょっと高度に

罫線を入れよう

画像を挿入しよう

項目をリストにしよう

リンクを設定しよう

リンクを使ってメールを送ろう

同じページの中にジャンプさせたい

他のページの中にジャンプさせたい

テキストをスクロールさせよう

テーブルを作ろう

入力フォームを作ろう

フレームを作ろう

BGMを鳴らそう

ムービーを再生させよう

バックグラウンドの画像を設定しよう

ドキュメントタイプを記述しよう

ドキュメントタイプを記述しよう

スタイルシート

CSSの説明

CSS定義ファイルを挿入する(例文付き)

CSS定義ファイルを挿入する(例文無し)

スタイルシート対応の例文を挿入する

リンクを設定しよう

CSSビルダー

ページ単独のスタイル

限定範囲のスタイル

インラインスタイル

CSSチューター

プリビュアーをブラウザーに変更

ブラウザーの一斉読み込み

ブラウザーの一斉解除

お気に入りの整理

リンク先の列記

フォントの設定

フォントA

フォントB

フォントC

フォントD

解説フォントの設定

ヘルプ

ヘルプをie(エクスプローラー)で表示

HTMLヘルプ目次

総合ヘルプ(HTML版)

編集モードの説明

リージョン機能の説明

スタイルシートの説明

CSSビルダーの説明

CSSプロパティ・バリューの説明

カラー忠太の説明

バージョン情報


はじめに
「HTML忠太」は多機能のHTMLのソースエディターです。「忠太」とは英語のTUTORから取ったものです。
「HTML忠太」を使うと全くHTMLのことを知らない人でも1日で簡単なホームページを作ることが出来ます。
更に「CSSチューター」によりスタイルシートは2日でマスター出来ます。
HTMLの編集にはリージョン機能が使用できます。リージョン機能により、ドキュメントファイルの
必要な場所だけ表示して編集が出来ます。
上級者向けには使い易いHTMLのソースエディターとして、又内蔵のブラウザーでインターネットから
直接HTMLのソースを読み込み、リンク等の分析ツールとして活用できます。

「HTML忠太」の特徴
HTML忠太には次の特徴があります。
・メニューに従って操作していくと知らず知らずのうちにHTML言語を習得できます。
・見易い画面と簡単なプレビュー機能、タグを挿入してすぐにプレビューが可能です。
・プロジェクトを使った一括のソース管理が可能です。、
・タグや変数を色分けして見易くしてあります。
・リージョン機能によりテキストの必要な部分だけ表示して編集が出来ます。
・テキストファイルからHTMLドキュメントを自動作成します。
・「CSSチュートリアル」でスタイルシートは2日でマスター出来ます。
・テンプレートの作成読み込みが可能です。
・基本的な操作にはヘルプ画面がついています。
・複数のテキストを同時に編集できます。リンクやフレームの作成には最適です。
・文字の検索や置き換えが簡単に出来ます。
・タグ辞典がついています。タグ辞典から直接タグが打ち込めます。
・解らないタグは、タグを選択してタグ辞典を立ち上げるとそのタグの解説を見ることが出来ます。
・タグ辞典の書き換えが可能です。
・リンクなどが簡単に書き込めます。
・簡単テーブルモードでテーブルが簡単に作成できます。
・簡単フレームモードでフレームが簡単に作成できます。
・内蔵のプレビュアーをブラウザーに変更できます。
・複数のホームページを一度に違ったブラウザーに読み込むことが出来ます。
・ブラウザーに読み込んだホームページのHTMLのソースをエディターに読み込むことが出来ます。
・ブラウザーに読み込んだホームページのリンクの一覧を表示することが出来ます。
・リンクの一覧からリンク先のホームページをブラウザーに取り込むことが出来ます。
・ブラウザーから取り込んだリンクをHTMLのソースの中から検索することが出来ます。
・ブラウザーやほかのテキストからダイレクトの文章を貼り付けることが出来ます。タグの挿入に最適です。

HTML基礎の基礎
インターネットなどのWEBページはHTMLで書かれています。"HTML"はHyper Text Markup Lnaguageの
頭文字をとったものです。直訳すると" 組指定の為の超越した言語となります。
"これから作ろうとするのはHTMLのソースと呼ばれるものです。
ソースはテキスト文で書かれ、ノートパッドなどで作成、編集が出来ます。
HTMLのソースをインターネット ・エクスプローラー(ブラウザーといいます)等で表示させると、
ソースの中に書かれている表示指定により様々な表示を行います。
表示指定は"< >"この様なタグと呼ばれる"<"と">"で挟まれた文字によってなされます。
たとえば、"<CENTER>HTML忠太</CENTER>"とソースの中に記述すると"HTML忠太"の文字を真中に、
行揃えしなさいということになります。
すなわち "<CENTER>"と"</CENTER>"の間の文字をブラウザーに対して中央に行揃えしなさい
と指令をしていることになります。
<CENTER>に対して </CENTER> のように"/"が入ったものはエンドタグと呼ばれ最初の<CENTER>の
有効範囲を表します。
<BR>改行タグのようにエンドタグ(</BR>)の無い物も有ります。タグは大文字で書いても小文字で書いても
かまいません。基本的なタグ <HTML></HTML>, <HEAD></HEAD>,<TITLE></TITLE>,<BODY></BODY>
<HTML> </HTML>タグはこの文章がHTML言語で書かれたものであることをブラウザーに知らせます。
HTMLは一番頭に<HTML>を置き一番最後に</HTML>を置いてソース全体を挟みます。
<HEAD></HEAD>はドキュメントのタイトルや製作者等の情報を表します。
<TITLE> </TITLE> はタイトルを入れようの項目を見てね。
<BODY></BODY>タグは実際に表示させる文字を挟みます。
「HTML忠太」はタグの大文字小文字を混在させています。統一させる場合は「編集」メニューで
全て大文字にしたり、小文字にしたりする事が出来ます。

基本操作

画面のコマンドボタンの下にあるシステム手帳の耳のような部分はタブと呼びます。
タブによって画面を切り替えます。タブで四角の中にAが入ったマークはHTMLのソースが、
虫めがねのマークの入ったタグはそのタグの左側のソースの「プリビュアー」が入っています。
一つのHTMLのテキストに対してこの2つが対になっています。まず画面のテキストに何か
書き込んで、虫眼鏡をクリックしてみてください、画面の色が変わって、書き込まれた文字が
表示されると思います。これはHTMLのテキストがプリビュアーに表示されました。
プリビュアー上では編集は出来ませんあくまでも表示のみです。
実際はHTMLには文法があります。初級者の方は「簡単作成」に従って文法を理解しましょう。
「プリビュアー」はインターネット・エクスプローラーと同じ表示をしますがHTMLのテキスト
に対してはより高速に表示をします。通常はHTMLのテキストを編集しながらこの「プリビュアー」
で確認を行ます。
(注)ヘルプの中でHTMLのソースと言ったり、テキストといったり、ドキュメントと言ったり
していますがみんな同じ意味です。正確にはHTML言語のソースコードと言うことになります。

ファイルの置き方
この項目がわからない人は飛ばしましょう。
画像や音やムービーを貼り付けたい人は読みましょう。
HTMLに画像や、音や、ムービーを貼り付けたい人は、HTMLのファイルとは別に、画像や音や
ムービーのファイルをどこかのフォルダーに置かなくてはいけません。あなたがもしこう言った
ことに詳しくなかったら今作っているHTMLのソースファイルを一度「名前を付けて保存(A)」
で保存しましょう。
保存するファイルは、まだ何も書き込まれていないこれから作成するソースでもかまいません。
「HTML忠太」はそのHTMLのファイルのフォルダー(ディレクトリー)をデフォルトつまり
画像などのフォルダーが設定されなかった場合のフォルダーとします。そしてこれから貼り付け
ようとする画像や、WAVファイルをこのフォルダーに置きます。
フォルダーとはデーターや画像が置かれている場所の名前です。エクスプローラーで見る
「マイドキュメント」なんかがフォルダーです。
フォルダーには別のフォルダーを入れることが出来ます。これを階層構造といいます。
何もテキストが読み込まれない状態では、デフォルトのフォルダーはTUTOR.exeが置かれている
フォルダーになります。
何かファイルを読み込んだ状態ではそのファイルが置かれているフォルダーが現在のフォダーになります。
次のようなフォルダーを考えて見ましょう。(解り易いようにフォルダーには\をつけてあります。)
c:-----\tutor---tutor.bmp
...................|---\tutorsorce---tutor1.html
...............................|\tutorback----tutor.bak
...................|---\tutorimage---tutor1.gif , tutor1.jpg
...................|---\tutorwav-----tutor1.wav , tutor2.wav
現在作成しているファイルがtutor1.htmlとします。tutor1.htmlから見てほかのファイルをどのように
表すか示します。tutor1.htmlはフォルダー"tutorsource"の下にあります。tutor.bmpは\tutorsourceと
並びに、すなわちtutor1.htmlの上のフォルダーに有ります。この場合、tutor.bmpはtutor1.html
からみて、"../tutor.bmp"と書きます。つまり一つ上のフォルダーは"../"と表します。
tutor.bakは\tutorsourceの下の\tutorbackに有ります。この場合は"tutorback/tutor.bak"と書きます。
tutor1.gifは一つ上に戻って"../tutorimage/tutor1.gif"と書きます。
この表し方は、tutor1.htmlから見た相対パスを表していますので、「相対パス」と呼ばれます。
この方法は便利で、ホームページ作成用のコンピューターに\tutor以下のフォルダーを作成して、
このフォルダーごとホームページにアップロードすればリンクなどを書き換えることなくアップロード
が完成します。
一方ファイルを絶対位置で指定する方法もあります。
"http://www.tutor.co.jp/tutor/tutorback/tutor1.html"
等と絶対のパスで指定します。このれを「絶対パス」による指定といいます。
これらのことが良くわからない方は、全てのファイルをtutor.htmlと同じフォルダーに入れます。
こうすると、tutor1.jif , tutor1.wav等と単にファイル名を書くだけでフォルダーを設定する
必要はありません。


画面上部のボタンの説明
各ボタン上にマウスを置くと簡単な説明が出ます。
・ 新規挿入 ----メニュー 「ファイル」の「新規挿入」と同じ動作。
・ 開く --------メニュー 「ファイル」の「開く」と同じ動作。
・ 閉じる ------ソースファイルを閉じるとともにタブも閉じます。
・ 上書き保存 ----メニュー 「ファイル」の「上書き保存」と同じ動作。
・ 元に戻す ----メニュー 「編集」の上書き保存と同じ動作。
・ やり直し ----「元に戻す」を行う前のソースファイルに戻します。
・ 切り取り ----メニュー 「編集」の「切り取り」と同じ動作。
・ コピー -----メニュー 「編集」の「コピー」と同じ動作。
・ 貼り付け -----メニュー 「編集」の「貼り付け」と同じ動作。
・ 検索 --------メニュー 「編集」の「検索]と同じ動作です。
・ 改行を挿入 --- メニュー 「編集」の「改行を挿入」と同じ動作です。
・ タグ辞典 ---- タグ辞典の表を表示します。説明をお読み下さい。
タブ辞典のタグの部分をクリックすると現在のテキストのカーソルの位置にクリックされた
タグが挿入されます。
・ 「太文字」、「斜体」、「下線」、「文字を大きく」、「文字を小さく」は選択した文字の属性を変えます。
・ 左揃え、中央揃え、右揃えは段落<P>とともに使用し<Pと>の間にマウスカーソルを置き実行し、その段落の文字の位置を決めます。
・ 「カラー忠太」起動----文字を選択すると、その文字の色を指定のタグを挿入します。又色の部分"#******"や指定色を選択するとこの部分を指定の色に書き換えます。
詳しくは「カラー忠太」を起動して下さい。
・ 画像の挿入---メニュー 「ちょっと高度に」の「画像を挿入しよう」と同じ動作。
・ 音楽の挿入---メニュー 「ちょっと高度に」の「BGMを鳴らそう」と同じ動作。
・ ブラウザー表示---選択しているソースをインターネット・エクスプローラーで表示します。
・ このボタンを押すとテキストのバックカラーが薄い青から薄い黄色に変わります。
この状態で、ほかのホームページやノートパッドなどで開いている文章の貼り付けたい部分を選択し、
コピーをするとその時点で選択した文字列が「HTML忠太」のカーソルがある部分に挿入されます。
また 「HTML忠太のカーソル」のある文字列が選択されていてしかも他の文章の選択された文字が
<title> </title>のようにタグとエンドタグがある場合は「HTML忠太」の選択した文章をタグで挟みます。


各メニューの説明
プルダウンメニューの説明を行います。


ファイルメニュー


現在のタブにファイルを開く
現在のタブにファイルを開く
HTMLのソースを読み込ませていタブをクリックしてプルダウンメニューの「開く」クリックすると、
ファイル読み込みモードとなります。


プロジェクトを開く
「HTML忠太」は'****.tur'というファイルに同時に読み込みや書き込みを行いたいファイル
名を書きこむことによりプロジェクト形式でファイルの読み書きが可能となります。
***などんな名前でもかまいません拡張子は'.tur'としてください。
c:\mydocument\html\tutor001.html
c:\mydocument\html\tutor002.html
c:\mydocument\html\tutor003.html
c:\mydocument\html\tutor004.html
のように読み込ませたい順番フルパスで記述します。


新しいタブを挿入
プログラムを実行するとはじめにテキストタブとプリビュアーが表示されます。
二つ目以降のテキストを編集したい場合に使用します。
挿入されたテキストは'$$$001.html'のような名前が自動的に付けられます。
練習でなくて正式なHTMLのソースを作ろうとするときは、この状態で「名前を付けて保存」
を実行し正式な名前を付けることをお勧めします。
正式な名前を付けておくとリンクなどの設定時にファイルの指定違いが起こりにくくなります。


新しいタブを挿入してファイルを開く
新しいタブを挿入して、ファイルを開くモードとなります。


ファイル名の変更
現在開かれているフォルダーのファイル名を変更します。


上書き保存
選択されたタブのファイルを上書き保存します。


名前を付けて保存
選択されたタブのファイルを名前を受けて保存します。


プロジェクトの保存
現在開かれている全てのHTMLのソースファイルを全て保存します。現在開かれているファイル名が
$$$000.html
$$$001.html
$$$002.html
$$$003.htmlのような名前の場合$$$の部分がプロジェクト名に、たとえばプロジェクト名が
tutorの場合
tutor000.html
tutor001.html
tutor002.html
tutor003.htmlのように置き換えられます。


全て初期化
全てのファイルを閉じて初期化します。表示されるテキストタブは一つだけになります。

テンプレートの保存
よく使うフォームなどを保存します。

テンプレートの呼び出し
保存したテンプレートを呼び出します。

印刷
選択されているソースファイルを印刷します。

終了
「HTML忠太」のプログラムを終了します。

基本事項
HTMLの基本事項を表示します。

リンクの注意
リンクをつける場合の注意事項が表示されます。

自動作成
自動作成モードはテキスト文を自動的にHTML形式にコンバートするモードです。次の動作を自動的に行います。
・ 自動的にHTMLのヘッダーをつけます。
・ <画像 *>*---画像の名前 文章中に"<画像"と">"の間に画像ファイルを置くことにより画像を挿入出来ます。たとえば<画像 tutor.jpg>とすればtutor.jpgの画像が挿入されます。
・ <表>と</表>の間にHTML忠太形式の表を書き込むと表(テーブル)を作成します。表の形式については、「テーブルを作ろう」を参照してください。
・ 自動的に段落を作り、見出しの文を強調文にします。
・ <背景1 *>*---画像の名前 文章中に"<背景1 "と">"の間に画像ファイルを置くことにより左側のフレームの背景を設定出来ます。たとえば<背景1 tutor.jpg>とすればtutor.jpggaが背景になります。<背景2 *>とすれば右側のフレームの背景が設定されます。1、2は半角ですご注意ください。<背景1 *> <背景2 *>の置き場所はどこでも構いません。
・ 自動的に左右のフレームを作成し、見出し文を左のフレームのテキスト文にします。(このヘルプも自動作成モードにより作成されています。原文のtutor.txtが付属していますので参考にしてください。自動作成を試して見る場合は次のようにします。まずメニューの「自動作成」をクリックします、次に一番上の「自動作成自動実行」にチェック(レ)を入れます、ファイルメニューから「開く」でtutor.txtを読み込みます、これで自動作成が始まります。)

自動作成の書式
自動作成モードに変換するテキストファイルは次の書式によります。
・ HTMLのタグは一切使用しません。普通のテキスト文で書きます。
・ 段落を構成する場合は、
段落の見出し1(先頭に空白を入れます)
段落の文章
(空白1行)
段落の見出し2(先頭に空白を入れます)
段落の文章
(空白1行)
.....................
.....................
のように段落と段落の間を1行空けます。段落の先頭の行がその段落の見出しになります。
・ 段落の先頭の行は必ず空白を先頭に入れます。
・ 文章の行はすべて自動的に接続され一行になります、改行はブラウザーにより自動的に改行されます。
・ 文章の行を接続したくない場合は、その行の先頭に空白を挿入した場合はその行は前の行に自動的に接続されません。
・ テキストの読み込みから自動作成を行う場合は現在編集中の全てのテキストが初期化されます。

自動作成自動実行
このチェックボックスにチャックが入っていると、*.txtのように拡張子が".txt"のファイルを読み込むと自動的に、自動作成モードとなります。

自動作成
現在作成中のHTMLのソースをHTMLに自動的に変換します。ソースの記述は上記「自動作成の書式」に従って下さい。ソースはテキストファイルでHTMLのタグを含みません。

自動作成設定
自動実行モードの各種の設定を行います。

同じページにリンクに変更
自動実行モードの自動作成設定の「フレーム」を「上下」に設定した時フレームのリンクは別のファイルに設定されますが、このモードを実行する事により、tutorleft.htmlの中のリンクを自分のページの中のリンクに設定します。

元に戻す
挿入したタグを元に戻します。テキストをエディターで変更した場合は元に戻せません。正し「切り取り」や「貼り付け」は元に戻すことが可能です。

切り取り
選択されたテキストを切り取ります。切り取ったテキストは貼り付けることが可能です。

貼り付け
こぴー又は切り取りをしたテキストをカーソルの場所に貼り付けます。

検索
テキストエディターの検索したい文字を選択するか、検索ウインドウに直接検索文字を入れます。テキストボックスの中の文字を検索します一つずつ検索にチェックを入れると一つずつ検索を全部検索にチェックを入れると一回で全部検索します。一つずつ検索の場合は、検索された文字が反転して場所を示し、次の検索が可能となります。全部検索の場合は検索された文字がピンク色に変わります。

置換
テキストエディターの置換したい文字を選択するか、直接置換ウインドウに置換する文字を入れ更に置き換わる文字を入れます。「一つずつ置換」を選択すると一つずつ確認しながら、全部置換を選択すると一度に全部置換します。

改行マーク挿入
カーソルのある場所に<BR>の改行マークを入れます。

改行マークの自動挿入
インターネットなどから取り込んだファイルで改行が挿入されておらず読みにくいソースコードに改行を挿入して読み易くします。ソースコードに<BR>を挿入するわけでは有りません。表示は全く変わりません。あくまでもソースコードに改行を挿入するだけです。必ずしも読み易くなるわけでは有りません。

スペース挿入
半角のスペースを挿入します。スペースをたくさん挿入するとソースがみにくくなります。^_~;スペース挿入はマウスの右クリックでこの画面を通さずに挿入することが出来ますスペースを消す場合は '&nbsp'を消してね。^_^

スペースを全て削除
ソースファイルのスペースを全て削除します。'&nbsp'を取るわけではありません。表示は全く変わりません。この後改行の自動挿入を行ってテキストを読み易くします。改行マークの自動挿入と同じで、必ずしも読み易くなるとは限りません。

タグを大文字に
選択されていつテキストファイル上のタグを全て大文字にします。

タグを小文字に
選択されていつテキストファイル上のタグを全て小文字にします。

特殊文字の変換
特殊文字とは、"<",">","&"等でHTML言語で予約語となっているものです。これらをタグとしてではなく文字として入れたい場合は、"<"は"&lt;"を">"は"&gt;"を"&"は"&amp;"を入れます。この変換はソースファイル中の特殊文字を一括で変換します。変換前のソースには変えたくない予約語が入っていてはいけません。

タグの色分け
表示されているタグの色分けを行います。通常は自動的に行われますが、挿入や読み込みで色分けがされなかった場合に実行します。

全て選択
選択されているテキストファイルを全て選択します。

全て消去
選択されているテキストを全て消去します。

編集2
編集2は良く使うモードをファンクションキーに割り付けてあります。
改行、段落設定、文字大などメニューを開いたりボタンを押したりすること無しに、
ファンクションキーで挿入が可能です。

スペース挿入
ブラウザー表示した時スペースが挿入されます。
HTMLテキスト上では &nbsp; が挿入されます。

改行挿入
ブラウザー表示した時、改行されます。
HTMLテキストでは、<BR>が挿入されます。

段落設定
選択された文章の前後に<P>と<P>が挿入されます。

位置設定
選択された文章の前後に<DIV>と</DIV>が挿入されます。

文字を大きく
文字を相対的に大きくします。

文字を小さく
文字が相対的に小さくします。

太文字(ボールド)
文字を太文字にします。

色パレット表示
「カラー忠太」が表示されます

色の説明とパレットの使い方。
光の三原色は RED(赤) GREEN(緑) BLUE(青) ですこの組み合わせで
全ての色が表せます。
HTMLの場合それぞれの色の強さを0から225までの256段階であらわします
つまりこの三色の組み合わせで 226X226X226=16777216色を表すことが出来ます。
ただしし設定は10進法ではなく16進法で表します。
色指定値は「#rrggbb」と表します。
エディターで文字列を選択して「挿入」又はパレットでダブルクリックをすると
テキストの色設定が出来ます。
又既に設定してある色を選択して「挿入」又はパレットをダブルクリックすると、色 が置き換わります。
置き換えの場合は「#ff00ff」のように#から全体を選択してください。
又選択した文字がHTML登録の色の名前の場合色の名前が置き換わります。
下の選択ボックスで名前の挿入か値の挿入かを選択できます。
「基本と合成」「色の名前」「拡張表示] でパレットを切り替えることが出来ます。
「拡張表示」では色をドラッグして混合パレットに置くことにより色を混ぜ合わせることが出来ます。

タグ辞典を表示
タグ時点の表示を行います。

文法チェック
文法チェックはあくまでも簡易チェックです。以下のチェックをします。
1、通常HTML上は半角カタカナは使用できません。
従って半角カタカナが見つかると全角に変換を促します。
全角変換は自動的に行われます。
2、次のタグの終了タグが有るかどうかをチェックします。
<html><head><body><title><address>
<span><div><p><pre><em><strong><sup><sub>
<comment><font><div><center>

リージョン説明表示
次の説明が表示されます。
リージョンとは英語で地方という意味です。編集しているテキストにリージョンを設定する事により
テキストの一部だけを表示したり、部分的に隠したりします。これによりテキスト編集が簡単になります。
又誤編集を防ぐ為に、テキスト文の一部を編集で出来ないように隠したりします。
「HTML忠太」は隠そうとするテキストの文字を<!--Reg001-->等のHTMLのコメント文で置き換えます。
従って隠されたHTML文をHTMLのプリビュアーで見ると隠された部分は、コメントとして無視されます。
ある部分のHTML文の効果を削除してプリビューするときにも、リージョン機能は効果的です。
又「ヘッター、フッター非表示」機能はヘッター、フッターを見えなくしますが、プリビュー
した時にヘッター、フッターが表示されている場合と同じ表示が行われます。
リージョンを設定したままHTMLファイルを保存しても、保存されたファイルはリージョンを解除
した状態で保存されます。(正常に保存されます)。

リージョン選択範囲 表示
テキストの一部を選択してメニューからこの機能を選択すると、選択された部分以外が消えて
選択された部分だけが編集可能となります。
隠された部分にはそれまでのテキストの代わりに <!--Reg001-->や<!--Reg002-->が入ります
そしてこの部分にテキストが隠されていることを示します。

リージョン選択範囲 非表示
選択範囲を非表示にします、非表示にされた選択部分には<!--Reg001-->等が入ります。

リージョン 全て 表示
設定されたリージョンを全て解除し、表示します。
リージョン 選択部分 表示
<!--Reg001-->等を選択して、このモードを選択すると選択された部分のリージョンが解除され
隠されたテキストが表示されます。

ヘッダー、フッター 非表示
<BODY>と</BODY>の外側を全て隠します。

ヘッダー、フッター 表示
隠されていたヘッター、フッターが再表示されます。
「ヘッター、フッター非表示/表示」は特殊なリージョン機能です。通常リージョンの非表示
に設定するとそのテキスト部分はコメントになり、プリビューしたときはその部分が書き込
まれていない状態と同じになりますが、「ヘッター、フッター非表示」はヘッター、フッターが
見えなくなったままでプリビューをしても、ヘッター、フッターの効力は有効になっています。
又「ヘッター、フッター非表示」を実行してもコメント文は挿入されず、単にヘッター、
フッターが見えなくなるだけです。
[お願い]
1、複数のHTMLのテキストを編集し要る時に、プリビュアーでタブを切り替えると背景の色や
画像が正しく表示されない時があります、この時は一度プリビューしたいテキストを
表示してから、プリビューを行って下さい。

インデント実行
次のタブのインデント(段落とし)を行います。
<P><BOBY><H?><DIV><TABLE><TR>
段落としを行う為には、HTMLテキストの適当な改行がされている必要があります。
改行が行われていないと、プリビュアーが自動的に改行を行います。
段落としを行っても、ブラウザーで実際に表示される表示は変わりません。
あくまでもHTMLテキストの編集をしやすくします。

インデント解除
全てのインデントを解除します。

インデント設定
一行の最大の文字数を入れます。
半角は一文字は1、全角は2と数えます。

簡単作成

初期化及び基本スケルトンの挿入(例文入り)
選択されているテキストファイルを全て消して例文を挿入します。練習に使います。

初期化及び基本スケルトンの挿入(例文無し)
選択されているテキストファイルを全て消してHTMLに必要なヘッダーなどを挿入します。この後本文は<BIDY>と</BODY>の間に書きます。

改行マークについて
改行マークは<BR>です<BR>を挿入するとその場所で改行します。
改行はマウスの右クリックでこの画面を通さずに
改行マークを挿入することが出来ます。
改行を修正する場合は<BR>を消してね。^_^

スペースの挿入
半角のスペースを挿入します。スペースをたくさん挿入するとソースがみにくくなります。^_~;スペース挿入はマウスの右クリックでこの画面を通さずに挿入することが出来ますスペースを消す場合は '&nbsp'を消してね。^_^

タイトルをいれよう
タイトルはブラウザーのタイトルバーに表示される文字です。お気に入り(ブックマーク)に登録される際のタイトルにもなるから内容を簡単に表そう。入れない場合は、ファイル名がそのままタイトルとなるよ。
(例)HTML忠太

見出しの文章を設定したい
まず見出しにしたい文字をソースに書き込んで選択します。
「実行」を押すと選択された文字を見出しに設定されます。
見出しは前後に空白が挿入され太文字で表示されます。
見出しの文字の大きさは数字が大きいほど小さくなります。

背景色と文字の色を決めよう
この設定は<HEAD>の中に入りテキスト全体の基本的な背景色、テキストの色を決めます。
テキストの色は基本色で部分的な指定が無い場合はこの設定のテキストの色になります。^_^

余白を設定しよう
ページの上の余白と、
ページの左の余白を設定します。
実際に値はピクセルという単位で設定しますが
( )の中にはmmで入れてください、自動的に
ピクセルに変換します。1ヒ゜クセルは 0.34mmです。

コメントを入れよう
コメントを入れると後から見易くなります。
コメントは<!-- と-->で挟みます。
選択されて文章がコメントととなります。
コメント文は、ブラウザーには表示されません。 ^_^

段落を設定しよう
一つの段落は<P> と </P>では挟みます。段落を設定します。選択された部分は段落に設定され、後ろに一行挿入されます段落は設定により、左より、中央揃、右よりの3種類に行揃えを設定出来ます。

まとめて位置を設定しよう
設定したい文字を<DIV> </DIV>で挟みます。段落と同じように位置を設定しますが、後ろに一行空白を挿入しません。位置は設定により、左より、中央揃、右よりの3種類に行揃えを設定出来ます。右は<DIV RIGHT>真中は<DIV CENTOR> 左は<DIV LEFT>とまります。

ソースの並びをそのまま表示しよう
表示したい文字を<PRE>と</PRE>で挟みます。 選択された部分は、HTMLソースの文字の並びがそのまま表示されます。ちょっと邪道ですが便利です。^_^;

フォントを指定しよう
選択された文字列のフォントを設定します。フォントはコンピューターによりインストールされている種類が異なりますので特殊なフォントの場合は何種類か設置します。先に設定されているフォントほど優先順位が高くなります。[フォント選択]を押すと選択画面になります。

文字の大きさを変えよう(絶対値の指定)
まずフォントを変えたい文章をマウスで選択マウスで選択下さい 。 選択された文字の大きさを変えます。文字の大きさは絶対指定と相対指定があります。変えたいサイズを選択してください。数字が大きくなるほど文字が大きくなります。1が最小で7が最大です。

文字の色を部分的に変えよう
変えたい色を入力してください。
色ボタンを押すと色の選択が出来ます。

文字を強調しよう(普通の強調)
選択された文字を<EM>と</EM>で挟みます。
これは普通の強調です。
普通の強調は文字が斜体で表されます。強い強調は「強い強調」を選択してください。

文字を強調しよう(より強い強調)
選択された文字を[STRONG]と[/STRONG]で挟みます。
これは強いの強調です。
強い強調は文字が太文字で表されます。普通の強調は「普通の強調」を選択してください。

フォントの形状を変えよう
選択された文字のフォントの形状を変えます。
変える文字列を選択してください。ボールド(太字)、イタリック(斜体)等など
これらはフォントの物理的形状と言います。^_^

ちょっと高度に

罫線を入れよう
罫線を挿入します、長さの単位は全てmmですが実際はピクセルに自動変換されます。1ピクセルは0.34mmです。
罫線の太さを指定します。
罫線の長さを指定します。
長さはmmか横の画面の%で指定します。
長さの指定が無い場合は、横幅一杯に罫線が引かれます。罫線の色を指定します。
罫線に影をつけるかどうか設定します。

画像を挿入しよう
画像ファイルを貼り付ける為には、貼り付ける画像ファイルが必要です。^_^
 画像ファイルはGIF形式又はJPEG形式の画像です。  画像ファイル 画像ファイルの置き場所は現在のHTMLと同じディレクトリーの場合はそのままファイル名を指定します。
他のディレクトリーの場合は相対パスを指定します。

項目をリストにしよう
リストとは
・ ほうれん草
・ 大根
・ ねぎ
・ 白菜
こんなのがリストです。・のことをマークと呼びます。
下の選択でマーク有り無しを選択します。マークは3種類あり下の選択で選べます。^_^
・の代わりに数字を使うのが番号順リストです。まず、ほうれん草、大根と言ったような、
リストの項目を入力して、その部分をを選択してください。

リンクを設定しよう
文字や、画像をクリックした時、別のページや別のサイトにジャンプするのがハイパーリンクです。まずテキスト画面でクリックする文字や、画像を選択します。リンク先は、自分のサイト内の別のページであれば、相対パスを、別のサイトへリンクする場合は絶対パスを指定します。例:今自分が作っているホームページと同じパスのページをリンクしたい場合はTemp.htmlのように単にHTMLのファイルを指定します。他のサイトにリンクしたい場合は、http://www.yahoo.co.jp/ のように入れます。「別のウィンドウに表示」にチェックを入れると、リンクをクリックしたときに、別のウィンドウが開きます。

リンクを使ってメールを送ろう
リンク設定を使用してメールの宛先を指定します、実行をクリックするとブラウザー側で設定されているメール用のウィンドウが起動し、アドレスに入れられた宛先が自動的に 挿入されます。

同じページの中にジャンプさせたい
同じページの中の指定個所にジャンプします。ジャンプを指定する文字を選択して、名前を付けます。名前は何でもかまいませんが、同じ名前は使えません。ジャンプ先も同じように文字を指定してジャンプ元と同じ名前をつけます。

他のページの中にジャンプさせたい
他のページの中の指定個所にジャンプします。リンク先は同じホームページ内にある必要があります。ジャンプを指定する文字を選択して、名前を付けます。名前は何でもかまいませんが、同じ名前は使えません。ジャンプ先も同じように文字を指定してジャンプ元と同じ名前をつけます。URLにはジャンプ先のファイル名を入れてください。

テキストをスクロールさせよう
テキストのスクロールのことをマーキーといいます。まずスクロールしたい文字を選びます、次に左右にスクロールか、上下にスクロールかを決めます。次にスクロールの幅又は高さをmmか%で入力します。色々試してベストの位置を決めてね。

テーブルを作ろう
忠太を使えばテーブルを簡単に作ることが出来ます。テーブルを作るには、HTMLテキストの中に
曜日/時間 、月曜 、火曜、水曜、木曜、金曜
1時間目 、国語 、算数、理科、社会、美術
2時間目 、音楽 、算数、理科、社会、英語
3時間目 、算数 、社会、理科、美術、国語
4時間目 、社会 、理科、音楽、美術、算数
の様に縦と横のデーターをテーブルのイメージで","か"、"で区切って書きます。 次のこの部分をマウスで選択して、この画面の実行を押します。 「忠太」はこの表をHTMLの表に書き換えます。 "と"で囲むのはHTMLの仕様ではなく「忠太」の仕様です、 したがってこのままではHTMLはこれを表と解釈しません、 あくまでも「忠太」に依る書き換えが必要です。 データーはこの画面の「テーブルの表示」を押し、 緑色の画面にテーブルを書き込んで、HTMLの中に挿入することも可能です。 HTMLの仕様はテーブルは、横に並べたい項目を一項目ずつ、 <TD></TD>の間に挟んで並べます。 これにより横と横の境界線が引かれます。 縦は横の一行分の<TD></TD>を<TR></TR>で 挟みますこれで横の区切り線が出来ます。これの繰り返しです。 サンプルを実行してソースファイルを見るとその構造がわかります。

曜日/時間 月曜 火曜 水曜 木曜 金曜
1時間目 国語 算数 理科 社会 美術
2時間目 音楽 算数 理科 社会 英語
3時間目 算数 社会 理科 美術 国語
4時間目 社会 理科 音楽 美術 算数

入力フォームを作ろう
ホームページなどのアンケート欄で、見ている人が入力して、ホームページの所有者に送るため
フォームを作ります。書き込まれた文章が、メールによってメール先のアドレスに送られます。送信先には通常自分のメールアドレスを入れます。

フレームを作ろう
ホームページなどでページが左右に分かれているものがあります、これがフレームです。ここでは左右か上下の2つのフレームが出来ます。フレームは通常3つのソースが必要です。1番目のテキストは左側又は上側のソースを、2番目のテキストは右側又は、上のソースファイルを作成又は読み込みます。3番目は自動的に作成されます。「リンクターゲット」の「設定」を丸にして"right"に設定すると左又は上のフレームにリンクを作成したときに表示されるウインドウを設定することが出来ます。たくさんのフレームを作るときはフレームを入れ子にします。

BGMを鳴らそう
ホームページを開いたときに鳴る音楽を設定することが出来ます。音楽ファイルはWAV形式のファイルです。ファイルがこのソースと同じフォルダーにあるときは'***.wav'と名前だけで違うフォルダーに有るときは'\yutor\wav\***.wav'のようにパスつきで指定します。

ムービーを再生させよう
ホームページを開いたときに再生するムービーを設定することが出来ます。ムービーファイルはavi形式のファイルです。ファイルがこのソースと同じフォルダーにあるときは'***.avi'と名前だけで違うフォルダーに有るときは'\yutor\avi\***.avi'のようにパスつきで指定します。

バックグラウンドの画像を設定しよう
バックグラウンドに画像を設定します。一列のみや、繰り返し全面貼り付けなどが選択できます。試してみてね。^_^画像ファイルはgif形式のファイルです。ファイルがこのソースと同じフォルダーにあるときは'***.gif'と名前だけで違うフォルダーに有るときは'\yutor\avi\***.gif'のようにパスつきで指定します。

ドキュメントタイプを記述しよう
画像ファイルを貼り付ける為には、貼り付ける画像ファイルが必要です。^_^
画像ファイルはGIF形式又はJPEG形式の画像です。
画像ファイルの置き場所は現在のHTMLと同じディレクトリーの場合はそのままファイル名を指定します。
他のディレクトリーの場合は相対パスを指定します。

ドキュメントタイプを記述しよう
あなたがとっても厳格な方で、道を曲がる時でも、直角に曲がらなければ気がすまない方ならドキメントタイプを記述しよう。これはこのドキメントがどのHTML仕様に基づいて書かれているかを示すものです。

スタイルシート
スタイルシートの作成を行います。

CSSの説明
CSSとは何か説明します。

CSS定義ファイルを挿入する(例文付き)
スタイルシートのタブが挿入されます。このモードは学習用で、例文が同時に挿入されます。又スタイルシートが挿入されるとともに、現在開かれているHTMLテキストにリンク情報が書き込まれます。

CSS定義ファイルを挿入する(例文無し)
スタイルシートのタブが挿入されます。又スタイルシートが挿入されるとともに、現在開かれているHTMLテキストにリンク情報が

スタイルシート対応の例文を挿入する
CSS定義ファイル(例文付き)と同期したHTMLテキストを挿入します。学習用です。

リンクを設定しよう
作成したCSSファイルのリンク情報をHTMLテキストに挿入します。

CSSビルダー
CSS(スタイルシート)の作成用ウィンドウが表示されます。

ページ単独のスタイル
ページの中に書き込むスタイルの<STYLE TYPE="text/css"><!----></STYLE>が挿入されます

限定範囲のスタイル
限定範囲のスタイルの<SPAN STYLE=" "></SPAN>が挿入されます。

インラインスタイル
インラインスタイルの
STYLE=" "が挿入されます。

CSSチューター
スタイルシート作成の手順を自動的に実行して紹介します。

プリビュアーをブラウザーに変更
選択されているタブのプリビュアーをブラウザーに変えます。変更直後は、'tutor.exe'と同じフォルダーの'TUTORUrl.txt"の一行目のホームページを表示します。

ブラウザーの一斉読み込み
「HTML忠太」の特徴の一つとして「他のホームページから学ぶ」が有ります。'tutor.exe'と同じフォルダーに'TUTORUrl.txt'というファイルを置きその中に、読み込みたいホームページのURLをいくつか書いておけば、このモードを実行することにより書かれたホームページを一斉に読み込みます。チェックしたいホームページをいくつか設定しておくと便利です。読み込まれたホームページは、その横のテキストエディターを開くことにより、HTMLのソースを見ることが出来ます。ブラウザーが表示されているときは、ブラウザーの上にコントロールバーが表示されます。コントロールバーには次の働きがあります。
戻す---一つ前のホームページを表示います。
進む---戻す出戻した場合次のホームページを表示します。
更新---ホームページの再読み込みを行います。
登録---そのホームページを'TUTORUrl.txt'に追加します。
終了---ブラウザーを終了して、プリビュアーに戻します。

ブラウザーの一斉解除
ブラウザーに変更されたプリビュアーを再びプリビュアーに戻します。

お気に入りの整理
ブラウザーのコントローラーにより追加され'TUTORUrl.txt'のファイルの保守を行います。

リンク先の列記
「リンクを列挙しよう」のフレームが現れて現在表示されているホームページを分析して、リンクのホームページをリストに出力します。リストに列挙されたホームページはその行をクリックすることで、ブラウザーに表示できます。「リンクを列挙しよう」の「現在のURLを先頭に」を押すと更にその下のホームページのリンク先が列挙されます。

フォントの設定
エディターのフォントの大きさやフォントの色、テキストのバックカラーの設定。

フォントA
フォントAとバックグラウンドAにHTMLテキストエディターを設定します。

フォントB
フォントBとバックグラウンドBにHTMLテキストエディターを設定します。

フォントC
フォントCとバックグラウンドCにHTMLテキストエディターを設定します。

フォントD
フォントDとバックグラウンドDにHTMLテキストエディターを設定します。

解説フォントの設定
解説のフォントを設定します。全ての解説のフォントが対象では有りません。

ヘルプ
ヘルプの表示いわゆる一般的なヘルプです。

ヘルプをie(エクスプローラー)で表示
この項目にレ点をつけるとこの下のヘルプがインターネット・エクスプローラーで表示されます。
レ点をはずすと「HTML忠太」の中にヘルプが表示されます。

HTMLヘルプ目次
この下のヘルプの目次です。ここからジャンプすることが出来ます。

総合ヘルプ(HTML版)
一番上のヘルプのHTML版です、tutor.exeと同梱のtutor.txtから自動作成したものです。

編集モードの説明
ちょっとわかりにくい編集モードや、「HTML忠太」独自の編集モードの説明が書いてあります。

リージョン機能の説明
使用すると便利なリージョン機能について説明してあります。

スタイルシートの説明
CSSスタイルシートに関して解説してあります。初めての方は一読願います。

CSSビルダーの説明
CSSビルダーの使用法について説明してあります。

CSSプロパティ・バリューの説明
CSSのプロパティーとバリューを列挙して説明してあります。

カラー忠太の説明
カラー忠太に関して説明してあります。

バージョン情報
バージョン情報が表示されます。



画像ファイル