変換ボードHELP

 使い方                                                       　　TOPへ
　変換ボードは左側が「メモ帳」、右側に「インターネットブラウザ」画面になっています。
変換ボードの初期設定ではブンちゃんの実験を再現します。「実行ボタン」を押して下さい。

「実行ボタン」：　「メモ帳」画面への入力結果を「インターネットブラウザ」画面に表示します。
　　　「クリア」：　「メモ帳」と「インターネットブラウザ」画面を白紙にします。
　　「リセット」：　初期設定に戻ります。
　　　「HELP」：　「変換ボードHELP」を開きます。

「クリア」で画面を白紙にしてから、学習したいタグをドロップダウンリストから選択して、「メモ帳」画面に移します。実行ボタンで、そのタグの働きを「インターネットブラウザ」画面上に見る事が出来ます。
ドロップダウンリストから連続してタグを選択して、表示させることが出来ます。
色、サイズなどの属性指定を自分で変えて、実行することができます。
自分でタグ、属性を入力して、実行ボタンでその確認表示をすることが出来ます。

 操作の例                                                         TOPへ 
1.　 「クリア」で画面を白紙にします。
2.　 テキストのドロップダウンリストから font を選択します。
3.　 「メモ帳」画面に<font olor='red' size='3'>xxfont</font>と表示が出ます。
4.   xxfontという文字列をcolor='red' size='3'の指定で表示せよの意味です。
5.　 実行ボタン⇒「インターネットブラウザ」画面で確認します。
6.　 再度、テキストのドロップダウンリストから font を選択します。
7.　 「メモ帳」画面に<font olor='red' size='3'>xxfont</font>が追加されます。
8.　 追加された<font olor='red' size='3'>xxfont</font>の前で改行します。
8.　 color='red'をcolor='green'　 size='3'を size='7'に変更入力します。
9.　 実行ボタン⇒「インターネットブラウザ」画面で確認します。
10.　テキストのドロップダウンリストから 水平線 を選択します。
11.　<hr size='3' witdth='500' align='center' color='teal'>が追加されます。
12.　実行ボタン⇒「インターネットブラウザ」画面で確認します。
13.　size='5' witdth='100' align='left' color='silver'に変更入力します。
14.　実行ボタン⇒「インターネットブラウザ」画面で確認します。

この様に、xxfontの文字列がどう変化するかを知るとfontタグの役割と働きを理解することが出来ます。
「メモ帳」画面で改行した時、「インターネットブラウザ」画面では改行されないことも分かりました。ドロップダウンリストから 改行を選んで実行するとどうなりますか。いろいろな所に空白を打ち込んで「インターネットブラウザ」がどう反応するかも試してください。

 概要                                                          　　  TOPへ
　メモ帳で入力した文字列は通常、ファイル名の後に .txt という拡張子が付けられて保存されます。
全く同じメモ帳で入力した文字列をファイル名の後に .htm または .html という拡張子を付けて保存することが出来ます。ファイル名を変更する機能を使ってtxtをhtmに置き換えることも出来ます。
コンピュターは拡張子を見て、動作させるプログラムを選択します。拡張子が.txt であればメモ帳プログラムを起動させますし、拡張子が .htm であればインターネットブラウザプログラムを起動させます。
インターネットブラウザプログラムは、入力した文字列のなかで "<" と ">"  に挟まれた文字列を見つけ出した時は、特定の処理をして、それ以外の文字列はそのまま表示するように動作します。"<" と ">" に挟まれた文字列はタグと呼ばれ、インターネットブラウザプログラムに対し、特定の処理を指令する働きをします。まとめると、下表のようになります。

タグは通常、開始タグと終了タグのペアで構成されます。
<h1>……</h1>のように開始タグ<h1>と終了タグ</h1>で見出しとして表示させたい文字列をサンドイッチします。<p>あいう……わをん</p>では文字列の段落の始まりを示す開始タグ<p>と段落の終わりを示す終了タグ</p>が使われています。単独タグの時もあります。<br>は改行を示しますが、終了タグはありません。水平線<hr>も終了タグはありません。
　　　ブンちゃんの一言：どんなタグがどの様な働きをするのか知りたい

水平線<hr>には<hr size="3"  color="red">のなかのsize="3"ように線の幅を指定するサイズ属性、color="red"のように線の色を指定するカラー属性を細かく指示することも出来ます。タグの種類に応じて、さまざまな属性が用意されています。属性の指示を省略した時は、インターネットブラウザプログラムの既定値が使われますので、必要な属性だけを指定すれば済みます。
　　　ブンちゃんの一言：各タグにはどんな属性があるのか知りたい

インターネットブラウザプログラムは次のように働きます。

1. HTMLファイルの先頭から順に読み込み、開始タグを見つける
2. 開始タグと対応する終了タグを見つける
3. 開始タグと終了タグの間の文字列を表示する
4. 開始タグ内に記述された属性に応じて、表示を補正する
5. 単独タグがあった時はその処理をする　

 どんなタグがどの様な働きをするのか知りたい                   TOPへ
　変換ボードは上のようなブンちゃんの要望に応えるためにつくられたものです。
変換ボードは左側に「メモ帳」画面、右側に「インターネットブラウザ」画面を配して、メモ帳で入力した文字列がインターネットブラウザでどのように表示されるかすぐ見る事が出来ます。
「メモ帳画面」に入力したら「実行ボタン」を押せば、即「インターネットブラウザ」画面に結果の表示です。
「クリア」ボタンはメモ帳画面と「インターネットブラウザ」画面を白紙にします。
「リセット」ボタンは初期設定に戻ります。

テキスト、テーブル、フォーム、image/linkの表示があるドロップダウンリストからいろいろなタグを選択して、「メモ帳画面」に移すことが出来ます。実行ボタンを押して、その実行結果が「インターネットブラウザ」画面に表示されます。属性や文字列を自分で変更入力をして、どのようになるか知ることも出来ます。xx…と書かれた部分は自分で変更入力すべき個所です。属性で ="**"の**の部分も変えてみてください。

 各タグにはどんな属性があるのか知りたい                           TOPへ
　テキスト、テーブル、フォーム、image/linkの各ドロップダウンリストにあるタグは基本的なものを集めましたが、その他のタグは実際にはあまり使用する必要性がなく、通常のホームページは作成できます。デザイン上の細かい要求は基本的なタグの属性の指定で対応することが出来ます。
属性とその指定値はどんなものがあるのかは下記ページの表に説明があります。

　ホームページを作る
　他のページを作る
　表を使う
　リンクを張る