HTML ファイルを書いてみよう (Windows/7/8 編)

画面ビデオ(ビデオは2011年版ですので現在よく利用されてるコンピューターとはすこし違いがあります):
  1. JavaScript 入門その1, Mac/Safari (YouTube)
  2. JavaScript 入門その1, Win/IE (YouTube)

いわゆるホームページ(webページ)は HTML (電網文書記述言語)で記述されている. 最近は HTML を自動生成してくれる HTML 編集ソフトを用いてホームページを編集することが多いが, 生の HTML を テキストエディタ で書いてみる ことにより, 計算機, ソフトウエアの原理の理解が一歩すすむであろう.
HTML には JavaScript なる言語を埋め込むこともできて, 計算もできる. (JavaScript は Java ではない. JavaScript は C 言語風の文法を持つ. JavaScript はホームページの記述に補助として利用されてる言語.) これについては JavaScript を Windows で試す を参照.
HTML は Windows に標準で付いて来る メモ帳 (notepad) で書き, ホームページ等をみるためのブラウザである インターネットエクスプローラ で仕上りをみることができる.

Mac の場合は標準で付いて来る テキストエデイット でプログラムを書き, ホームページ等をみるためのブラウザである Safari で実行させることができる.

このページではその手順を次の HTML を例として説明しよう.

Mac の方は こちら ご覧になってから, 下をご覧下さい. 

<h1>
  始めてのHTML (見出し)
</h1>
HTML を始めて書いてみます.
HTML を始めて書いてみます.
HTML を始めて書いてみます. <br>
より詳しい HTML の解説は 
<a href="http://www.kanzaki.com/docs/htminfo.html"> 
こちら </a> を参照.

  1. HTML では < と > で囲まれた記号 ( タグ とよぶ) は特別な 意味をもち, そのまま表示されない. 
      <h1>     (開始タグ)
    と 
      </h1>    (終了タグ. 対応する終りの印として / が付く)
    はその間にある文章を見出しとして大きい字で表示せよという意味である.
  2. 改行の位置はブラウザが自動的に決定する. 
      <br>
    は強制的に改行するためのタグである.
  3. 他のページを参照する(リンクする)には上の例の真似をして書く. 上の例では "こちら" をクリックすると属性 href で指定した場所のページを開く. <a> をアンカータグとよぶ. 詳しくは タグと属性の説明 を参照.
言い訳: "始めて" は "初めて" だけど, まちがったまま screen のコピーをとったので 修正せず.

1. メモ帳 (notepad) の起動

スタート, プログラム, アクセサリ, メモ帳と起動してもよいが, Windows 7 では図のように スタート, プログラムの検索, でメモ帳を起動してみよう.

Windows 8 では図のように右からスワイプインしてチャームメニューを出し検索 でメモ帳を起動.
(1) (2)

2. メモ帳 (notepad) への HTML の入力

タグはかならず半角英数字で入力すること. 日本語モードになっていたりするとエラーの原因となる.
タグは一字一句間違えないように入力しよう. 一字間違えただけでも表示が変になる.

3. HTML の保存

ファイル名はかならず .html でおわらないといけない. ピリオド以下の名前を拡張子と呼ぶ. メモ帳(notepad)の標準状態では拡張子 .txt が自動的に付加されてしまう. これをさせないために図のように, "全てのファイル" を選択し, .html を付加する. 我々の例では, デスクトップにファイルを保存するものとする.


4. 保存した HTML の仕上りをみる.

3 で正しく拡張子が .html になっていればアイコンは 図のように "e" マークが付く. これをダブルクリックまたは開けばプログラムが実行される.

5. 保存した HTML の修正

仕上りは図のようになるはずである. もしこのような実行結果にならない場合は メモ帳(notepad)に戻り間違いを修正して, メモ帳で ファイル, 上書き保存 してから, 図のようにインターネットエクスプローラの更新ボタンをおす.

もしメモ帳をすでに終了していたら, 下の図のように test.html のアイコンで右ボタンをクリックして, プログラムで開くを選択し, メモ帳(notepad)でこのプログラムを開く. 図のようにnotepadが出現しなかったら "プログラムの選択" を用いて, メモ帳(notepad) を選ぶ (なおワードを使って編集してはいけない).

課題1

自分が便利だと思うページを二つ以上紹介する HTML ファイルを書きなさい. アンカータグ <a> の利用を試みること. 短い紹介文をかならず加えること.

解答例 
<h1>
  雨雲の様子をみる
</h1>
天気は西からかわります. でかける前に現在雨雲がどのくらい近付いてるか
知りたいとおもったことはないですか? そのときは
<a href="http://www.tenki.jp"> 
こちら </a> をみましょう.

<h1>
  計算機関連の調べもの.
</h1>
これは 
<a href="http://www.google.com"> 
google </a> で調べましょう.
用語やソフトの名前だけを入力すると一番いいページがでる確率が
高いようです.

課題2.

数学, 理科, 計算機に関連するページを5つ以上紹介する HTML ファイルを書きなさい. 短い紹介文をかならず加えること.

Q. テキストエディタって何ですか?

A. ファイルは2進数で8桁(8bit) の数字の列にすぎない. 8bitの大きさの数を 1 byte (バイト) とよぶ.
(8という数字は次のように連想記憶で覚えるといいかも:
一週間は7日, 1 byte は 8 bit
8 は 2 の3乗であり, 2進数と親和性が高い. 1 byte = 8 bit は 1週間=7日 みたいに計算機では基本的公式です.)
この言葉を使うとファイルとは byte サイズの数字の列である. 計算機に情報を格納するとき, 情報は数字に変換されてから 格納される.
たとえば音をスピーカーで鳴らすための電気信号は時間を横軸,電圧を縦軸とする グラフとして表現できるが, 一秒を十分細かく分割して, 縦軸の値を数字の列として ファイルに格納しておき, その数字の列をもとにスピーカーを鳴らせば人間の耳には 音として聞こえるであろう. このような形式で音を数字の列として格納したファイルを wave ファイルという.
また画像を細かい点の集まりとみなし, 各点の色を数字で表す ことにより画像を数値の列にできる. この形式のファイルで一番よく利用されているのは BMP ファイルであろう. BMP ファイルではファイルのサイズが大きくなるので, (sin や cos の数学を利用して) 圧縮して格納することも多い. デジカメで利用されているのは このような圧縮形式の一つであり jpeg ファイルという数値化形式を用いている.
ファイルがどのような形式で数値化されて格納されているのか調べるには, Windows の場合, ファイルのアイコンの上で右ボタンを押して "プロパティー" を実行すればよい.

さて文字を数字の列として格納する方法はいろいろあるが, ひとつが国際的な標準規格である文字コード表にしたがって文字を数字に変換する 方法である. たとえばアスキーコード表はアルファベットのための文字コード表である. このアスキーコード表を用いると文字列 
ABC abc
は 
0100 0001   
0100 0010 
0100 0011
0010 0000
0110 0001
0110 0010
0110 0011
と格納される. 0100 0001 が A , 0100 0010 が B, ... なる対応関係がある. ちなみに ABC と abc の間の空白も文字として扱われており, その文字コードは 0010 0000 である.
なお上の表では数を2進数で表しているが, 2進数は桁が多くて読みにくいので 16進数で 書き表すことが多い.
この文字コードで書かれたファイルをテキストファイルとよぶ. テキストエディターとはテキストファイルを編集する ソフトウエアである. HTML や C言語などのプログラムのソースコード, TeX のソースコードは テキストファイルで書く約束である.

HTML タグとは何か?

二つの不等号 < と > で囲まれた部分は(ブラウザで)表示されない. <名前> を 開始タグといい, 開始タグの 名前 の前に / を付加したタグ </名前> を終了タグという. たとえば <abc> に対応する終了タグは </abc> である.

開始タグと終了タグは左かっこと右かっこのように組にして用いられる. たとえば 

 <title>醤油の作り方について</title>
は "醤油の作り方について" が文書のタイトルであることを意味する. なおタイトルはブラウザのウインドーのタイトルバー(上の部分)に表示 されることが多い.

開始タグには属性名とその値の組を付加情報として 加えてよい. たとえば 

 <title dir="rtl">醤油</title>
とするとタイトルは右から左へ表示される. この場合 dir (direction) が属性名であり, 値が rtl である. 

醤油
なお上で "油醤" と表示されていなかったら, ブラウザが右から書く能力がない (右から書くのをサポートしていない)ので, この属性を試してもうまく動かないだろう. このようにブラウザにより処理可能な属性とタグは異なる.

" <a href="http://www.kanzaki.com/docs/htminfo.html"> こちら </a> を参照. " の意味.

表題のように html ファイルに書いておくと, "こちら" をクリックすると, http://www.kanzaki.com/docs/htminfo.html に接続し, ここにあるページを表示する. <a> は アンカータグ とよばれ, クリックして表示するページ(ハイパーリンク先という)を 属性 href で指定する. 属性の値としては画像ファイルや音情報ファイルでもよい. その場合画像が表示されたり, 音が出たりする.

Q. どのようなタグ, どのような属性がありますか?

本格的参考本を一冊だけあげておく.
C.Musciano, B.Kennedy, HTML, オライリージャパン. ISBN4-87311-004-1.