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 文書を作成

まず最初に，ネットワークディスク内など，適当なところに bosei_html というフォルダを作成します．このフォルダの中に以下の説明を読みながら自分用の HTML 文書を作成します．

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

このファイルが index.html の雛型です．このファイルを以下の説明を読みながら自分のページにふさわしいものに書き変え，上記で作成した bosei_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 文書は完成です．この文書を bosei_html フォルダ内の index.html として保存してください．

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

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

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

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

Windows クライアントからのファイル転送には Ws_ftp というソフトウェアを利用すると便利です．「スタート」，「プログラム」，「ネットワーク」，「WS_FTP」，を選択して起動します．

起動したら「Host Name/Address:」に WWW サーバである bosei.cc.u-tokai.ac.jp を入力します．計算センターの場合，「Profile Name:」で bosei を選択すると上記名前が自動的に入力されます．「User ID:」に自分のユーザ名，「Password:」に自分のパスワードを入力します．「Anonymous」チェックボックスがチェックされていないことを確認し，「OK」ボタンを押します．うまくログインできると左に手元のマシンのファイル，右に WWW サーバ上のファイルが見えるはずです．右上の「Remote Site」欄が "/home/username" となっていることを確認します（"username" は自分のユーザ名です）．次に左側に自分の作成した "bosei_html" が見えるようにドライブ，フォルダを選択します．表示された "bosei_html" をクリックし，選択します．この状態で真中の「->」ボタンを押してください．「Do you want to transfer the selected folders and their contents?」と聞かれるので「はい」を押します．これで HTML 文書の転送が終了しましす．

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

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

lesson 3 第 3 回