lesson 3
第 3 回

教科書 p.24 から 2 章終りまで学習し，HTML 文書を作成してもらいます．つぎに教科書から離れて，パソコン上で HTML 文書を作成する方法，WWW サーバへ HTML 文書ファイルを転送する方法についても説明します．

第 3 回の講義メモ(教科書の解説部)

教科書 p.24 から学習します．2 章の次は p.89 の 7 章でハイパーリンクについて学習し，実際に HTML 文書を作成してもらいます．教科書から離れて，パソコン上で HTML 文書を作成する方法，WWW サーバへ HTML 文書ファイルを転送する方法についても説明します．

2 章つづき

2.3

HTML 文書の基本的な構造とルールについて

2.3.1

簡単な HTML 文書の例を挙げる．

例 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <title>
      文書の表題をここに書いてください．
    </title>
  </head>
  <body>
    <h1>
      文書の主見出しをここに書いてください．
    </h1>
    <p>
      自己紹介など，本文を自由に書いてください．
    </p>
    <hr>
    <address>
      XXXX年XX月XX日, XXXX作成
    </address>
  </body>
</html>

字下げを対応させて見ることで次のことがわかる．
- html 要素は大きくわけて head 要素と body 要素からなる．
  - head 要素は meta, title 要素からなる．
  - body 要素は h1,p,hr,address 要素からなる．
HTML 文書は html 要素を根とする木構造で表現できる．正しい入れ子関係になるように注意する．

2.3.2

各要素は中に書けるものがそれぞれ決まっている．この教科書では
- ブロックレベル要素(h1,p,addres など)
- インライン要素(単なる文字列など)
に大きく分類して説明している．
インライン要素の中にブロック要素は書けない．
body 要素の直接の子はブロック要素だけ．

2.3.3

ソースファイルに直接 "<"などの記号は書けない．
それらの文字を決まった文字列で表現するのを文字実体参照という．p.313 に一覧表がある．

2.3.4

HTML では半角スペース，改行は基本的には無視される．
全角スペースは文字と同様に扱われるので注意．

2.3.5

コメントは  で囲む．

第 3 回講義メモ(テスト用 HTML 文書の作成と公開)

ここで一旦教科書から離れます．計算センターの環境を利用して，

パソコン上で HTML 文書を作成する方法
WWW サーバへ HTML 文書ファイルを転送する方法

について説明します．

パソコン上で HTML 文書を作成

まず最初に，Z ドライブ(ネットワークドライブ)に html というフォルダを作成します．このフォルダの中に以下の説明を読みながら自分用の HTML 文書を作成します．

「スタート」，「プログラム」，「アクセサリ」からメモ帳を起動します．冒頭の例 1 のソースコード部分(<!DOCTYPE から </html>まで)をカットアンドペーストでメモ帳に張り付けます．

このファイルが index.html の雛型です．このファイルを以下の説明を読みながら自分のページにふさわしいものに書き変え，上記で作成した html フォルダの中に index.html として保存します．ここからはメモ帳で開いている index.html ファイルを例に，基本的なタグについて説明します．読みながら自分用の index.html に書き換えてください．

ファイル先頭の

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">

は毎回同じものをコピーして使ってください．上記は HTML 4.01 に従う日本語のドキュメントで，文字コードとして Shift_JIS を使うという意味なので，そうでないものを使う場合だけ変更が必要です．

    <title>
      文書の表題をここに書いてください．
    </title>

title 要素にこのページの表題にあたるものを記入します．適当なものを考えて書き換えてください．

    <h1>
      文書の主見出しをここに書いてください．
    </h1>

h1 要素にこのページの主見出しを書きます． h1 見出しの文章の下の階層に小さい見出しを作りたいときはその見出しを <h2> と </h2> で囲み，h2 要素として記述します．見出しは h6 まであり， h の後の数字が小さいほど大見出しであることを意味します．大見出しから順に使います．適当な見出しを書いてください．

    <p>
      自己紹介など，本文を自由に書いてください．
    </p>

p 要素として本文を書きます． p 要素は段落を表すので複数の段落のある文章ならそれぞれの段落を p 要素として囲みます．通常の文章を p 要素として自由に考えて記述してください．

最後に address 要素に作者と更新日時を記入します．

    <address>
      XXXX年XX月XX日, XXXX作成
    </address>

ここまで変更すれば基本的な HTML 文書は完成です．この文書を html フォルダ直下の index.html として保存してください．保存するとき，「ファイルの種類」欄で「すべてのファイル」を選択することと，"." を含めてファイル名の文字すべてを半角英語で入力することに注意して下さい．

index.html 以外の新しい HTML 文書のファイル，フォルダを作る場合はファイル，フォルダ名を半角英数文字だけで空白も含まない文字列にしてください． HTML 文書ファイルの拡張子は html としてください．

作成した HTML 文書をブラウザで確認します． InternetExplorer であれば「ファイル」，「開く」，「参照」で作成した index.html を開き，正しく表示されることを確認します．これで HTML 文書をインターネットに公開する準備ができました．

WWW サーバへ HTML 文書ファイルを転送

WWW サーバである stud.dm.u-tokai.ac.jp の自分のホームディレクトリ直下に自分の作成した html フォルダ以下を後述の方法で転送すれば WWW 上に公開することができます． UNIX コマンドを理解している人は，好きな方法で必要なファイルを作成，転送し，置き換えてもらって結構です．

ファイル転送には FFFTP というソフトウェアを利用します．以下の手順に従って転送して下さい．

「スタート」->「プログラム」->「ネットワーク」->「FFFTP」を選択して起動します．「メールアドレスを入力してください…」という内容のダイアログが出た場合は「キャンセル」ボタンを押して下さい．
「ホスト一覧」ウィンドウが表示されるので，右にある「新規ホスト」ボタンを押して下さい．
「基本」タブが選択されているはずなので，そのまま以下の項目を入力して下さい．

ホストの設定名

stud

ホスト名(アドレス)

stud.dm.u-tokai.ac.jp

ユーザ名

(自分のログイン名)

パスワード/パスフレーズ

(自分の UNIX パスワード)

ローカルの初期フォルダ

Z:

ホストの初期フォルダ

/

上記操作が終ったら下にある「OK」ボタンを押して下さい．
上記操作が完了すると，「ホスト一覧」ウィンドウに「stud」という計算機が表示されます．「stud」上で右クリックを行い，選択した状態で下の「接続」ボタンを押して下さい．

ログインには数秒かかることがあるのでしばらく待ってください．うまくログインできると左半分に手元のマシンのファイル，右半分に stud サーバ上のファイルが見えるはずです．
左上部の欄が "Z:" となっているか確認してください．なっていなければ覧をクリックし，入力して下さい．同様に右上部の欄が "/" になっていることを確認し，そうでなければ修正して下さい．
左のファイル一覧の中にあるあなたが作成した html フォルダを(ダブルクリックではなく 1 回)クリックして選択してください．青色で選択されたことが表示されます．この状態で上にある絵文字のボタン(アイコン)のうち，上向きの青色の矢印のボタン (アップロード)を押して下さい．これで HTML 文書の転送が終了しましす．上の「接続」メニューから「終了」を選び，FFFTP を終了させます．

すべてが成功すれば，ブラウザのアドレス欄に "http://stud.dm.u-tokai.ac.jp/%7E(自分のログイン名)" と入力することで転送されたウェブページを開くことができます．

第 2 回へ戻る第 4 回へ進む

上の記述は本科目の教科書である神崎正英著，ユニバーサル HTML/XHTML の内容のうち授業でポイントを置いて説明する点を山本が要約，補足したものが含まれます．詳しい内容を必ず教科書で確認してください． Updated in November 10, 2005, schedule, Yamamoto Hiroshi

lesson 3 第 3 回