Powered by SmartDoc
<< J10124「コンピュータI（GJ0124コンピュータ初級）」/（6/30,7/7）Webページ作成 >>

9 （6/30,7/7）Webページ作成

9.1 Webページ（HTML）入門

「計算機利用の手引き」の付録Dも参照すること．

HTML (Hyper Text Markup Language)＝ハイパーテキスト(リンク)＋データの意味をマークする言語

HTMLのお約束;どんなHTMLファイルでも以下の基本構造を持っています．

リスト 9.1.1 HTMLの基本構造
<html>
  <head>
    <title>
	  Webブラウザーのタイトル行に表示される見出し
    </title>
  </head>

  <body>

    ここに本文を書く。

  </body>
</html>

つまり、

というわけです。

木構造というのは、

html-+--head----title
     +
     +--body-+--h1
             +--hr
             +--address

のように、木が根っこから枝分かれしていくようにHTMLの構造が枝分かれしていくことを示します。右側の細い枝別れは、その左側の大きな枝分かれをまたぐことはありません。

ですから自分でHTMLを書こうという人は、上記の内容をあらかじめ書き込んであるHTMLのテンプレートを作っておくと便利です。授業で使っているXEmacsは大変賢いので、拡張子がhtmlのファイルを新たに作成すると、自動的に上記のような内容を埋め込んでくれます。(この賢さがEmacsのすごさです。EmacsはLispプログラミング言語を持っているので、いろいろ賢いことができます。)

リスト 9.1.2 XEmacsが自動的に補うテンプレート
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">
    <title></title>
  </head>

  <body>
    <h1></h1>



    <hr>
<address><a href="mailto:nabe@twcu.ac.jp">Takayuki Watanabe</a></address>
    <p>
<!-- Created: Mon Apr 15 13:29:50 JST 2002 -->
<!-- hhmts start -->
<!-- hhmts end -->
    </p>
  </body>
</html>

XEmacsが作るファイルは以下の点が最初に説明した基本構造と異なっています。

9.2 初めて作るWebページ

  1. xemacsを起動する．
  2. Openアイコンをクリックして，（或いは「ファイル」メニューから「ファイルを開く...」を選んで）first.htmlというファイル名でファイルを開く．
  3. 初めてxemacsでHTMLを編集する場合，あなたのメールアドレスを聞かれるかもしれない．その場合，最初のあなたのメールアドレスを確認する質問には[Enter]を押し，次のこのアドレスをこの後も使うかというy/nの質問にはyで答えること．
  4. 以下の例のように適当にtitle要素やh1要素などを書き込む．
  5. Saveアイコンをクリックして保存する．
  6. Netscapeを立ち上げて，「ファイル」メニュー，「ページを開く...」と選んでから，「ファイルを選択...」をクリックしてfirst.htmlを選択して開く．
  7. するとNetscapeにあなたが作ったWebページが表示されるはず．
  8. おめでとう．初めてのWebページができました．修正作業もして見ましょう．
  9. first.htmlに手を加えて書き換えたら，まずxemacsで保存し（Saveアイコンをクリック），次にNetscapeの「再読込」ボタンをクリックするとHTMLファイルの変更がNetscapeに反映されるはず．（Netscapeのバグのせいか，画像ファイルの変更などが反映されない場合がある．その場合は一度Netscapeを終了してからもう一度立ち上げるとうまくいくはず.）
リスト 9.2.1 初めて作るHTMLの例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">
    <title>渡辺のWebサイト</title>
  </head>

  <body>
    <h1>渡辺のWebサイト</h1>
      <h2>初めての授業</h2>

<p>今日はじめて、東京女子大学で授業をしました。</p>

    <hr>
<address><a href="mailto:nabe@twcu.ac.jp">Takayuki Watanabe</a></address>
    <p>
<!-- Created: Mon Apr 15 13:29:50 JST 2002 -->
<!-- hhmts start -->
<!-- hhmts end -->
    </p>
  </body>
</html>

これができたらさらに「利用の手引き」の付録D.2を真似してみましょう．この例では箇条書きを作る<ul>要素が使われています．付録Dには他にも色々な要素が紹介されていますから，興味がある人は「利用の手引き」の真似をして見てください．HTMLのような新しい知識を学ぶときは，まず「習うより慣れよ」です．つまり，人の真似をして自分で作ってみることからはじめることが肝心です．人が作った者を見ているだけでは上手になりません．自分の手を動かして失敗や成功の経験を重ねることが大事です．ある程度経験した段階でHTMLの文法をきちんと学ぶと，文法知識もよく頭に入ってきますよ．

9.3 課題

・上記HTMLに手を入れて簡単な自己紹介ページを作っておく．完成度は問わないので，とにかく書いて公開するという経験をする．

・「利用の手引き」の付録Dを読んでおく．

9.4 WWWの基礎知識

9.4.1 URL

http://www.linux.or.jp/en/index.htmlを例にとって、URLの意味を説明します．

表 9.4.1.1 国を表すトップレベルドメイン名の例
au オーストラリア
ca カナダ
cn 中国
fr フランス
it イタリア
jp 日本
kr 韓国
ru ロシア
uk イギリス
表 9.4.1.2 jpドメインでの組織種別の例
ac 大学，研究機関
co 企業
ne ネットワークサービス組織
go 政府機関
or 各種団体

つまりhttp://www.linux.or.jp/en/index.htmlというURLは、jp (日本で登録したドメイン名)の下のor (各種団体)の下のlinuxというドメイン名の中のwwwと名づけられたWebサーバ上にある、enディレクトリの下のindex.htmlというファイルを、httpプロトコルで表示することを意味します．

9.4.2 ハイパーリンク

HTMLファイル中にURLなどで別のデータ（リソース）の場所を示してやれば，Webブラウザー上でクリックするだけでその場所にジャンプできます．このような機能のことをハイパーリンクといいます．

<a href="http://www.twcu.ac.jp/">「東女のWebサイト」</a>

9.5 もっとHTML

リンクの貼り方や画像の入れ方も説明しましょう．「HTMLの例」（example.html）が参考になると思います.このHTMLファイルのソースは，Netscapeの「表示」メニューから「ページのソース」を選ぶと表示されます.

9.6 そのほか

言語指定

文字コード指定

DOCTYPE宣言

文法

9.7 HTMLページの公開方法

WWW(HTMLファイル)公開時の注意;個人情報を漏らさない、その他

9.8 課題

自己紹介ページを新規作成・公開する．締め切りは7月10日（木）夜．金曜日にチェックする．またHTMLの最初には，作成日付け，学生番号，氏名を必ず記入する．

自己紹介のページのbody要素内には以下の要素を含めること：<p>, <h1>, <h2>, <h3>, <ul>, <ol>, <dl>，東女のトップページへのハイパーリンク．また，表要素やコメントを含めることも望ましい（加点する）．

  1. 端末エミュレータを開く．
  2. ls [Enter]とタイプして，WWW-localという名前のディレクトリがあるかどうか調べる．
  3. もしなかったら，mkdir WWW-local [Enter]とタイプしてこのディレクトリを作る．
  4. もう一度ls [Enter]とタイプして，WWW-localという名前のディレクトリができたことを確認する．
  5. cd WWW-local [Enter]とタイプして，WWW-localディレクトリに移動する．
  6. xemacs selfintro.html &[Enter]とタイプするとXemacsが立ち上がる．
  7. 自己紹介を含むホームページを作成する．できるだけ多くのHTML要素（技術）を盛り込むこと．
  8. Netscapeで，http://www-local.twcu.ac.jp/~x02y001/selfintro.htmlとURLを指定して，Webブラウザーでこのホームページをきちんと表示できることも確認しておくこと．
  9. XEmacsでファイルを修正したときは、XEmacsでファイルを保存（「Save」アイコンをクリック）してから、Netscapeで「再読込」アイコンをクリックして修正済みのファイルをもう一度読み込む．
既にあるHTMLファイルを転用したい人
  1. 端末エミュレータを開く．
  2. ls [Enter]とタイプして，WWW-localという名前のディレクトリがあるかどうか調べる．
  3. もしなかったら，mkdir WWW-local [Enter]とタイプしてこのディレクトリを作る．
  4. もう一度ls [Enter]とタイプして，WWW-localという名前のディレクトリができたことを確認する．
  5. cp ほにゃらら.html 　~/WWW-local/selfintro.html [Enter]とタイプする．（つまり，元ファイルの名前をselfintro.htmlに変えた上で，WWW-localディレクトリの下に移動する．）
  6. cd WWW-local [Enter]とタイプして，WWW-localディレクトリに移動する．
  7. xemacs selfintro.html &[Enter]とタイプするとXemacsが立ち上がる．
  8. 自己紹介を含むホームページを作成する．できるだけ多くのHTML要素（技術）を盛り込むこと．
  9. Netscapeで，http://www-local.twcu.ac.jp/~x02y001/selfintro.htmlとURLを指定して，Webブラウザーでこのホームページをきちんと表示できることも確認しておくこと．
  10. XEmacsでファイルを修正したときは、XEmacsでファイルを保存（「Save」アイコンをクリック）してから、Netscapeで「再読込」アイコンをクリックして修正済みのファイルをもう一度読み込む．

9.9 授業後に作業を継続する方法

「授業の後でHTMLファイルの編集をするにはどうすればよいか？」という質問が何件かあったので，以下に作業の手順をまとめます．

  1. 端末エミュレータを開く．
  2. cd WWW-local [Enter]とタイプして，WWW-localディレクトリに移動する．
  3. xemacs selfintro.html &[Enter]とタイプするとXEmacsが立ち上がり，授業で作ったファイルが表示される．
  4. XEmacsで編集作業を続ける．
  5. Netscapeで，http://www-local.twcu.ac.jp/~x02y001/selfintro.htmlとURLを指定して，Webブラウザでこのホームページをきちんと表示できることも確認する．
  6. XEmacsでファイルを修正したときは、XEmacsでファイルを保存（「Save」アイコンをクリック）してから、Netscapeで「再読込」アイコンをクリックして修正済みのファイルをもう一度読み込む．

意図したようにNetscapeで表示されない原因のほとんどは単純なタイプミスです.落ち着いてHTMLの中身によーく目を通してみて下さい．お手本と同じですか?

9.10 注意

宿題（自己紹介HTML）の一覧（学内限定公開）

9.11 世界中に公開する方法

今回の課題はWWW-localディレクトリに置いたので学外からは見ることができません．世界中に公開したい人は以下の作業をしてください．その際，電話番号や住所などの個人情報を書かないように注意すること．

  1. XEmacsでselfintro.htmlを開く.
  2. 学外に公開してもよいように内容を書き換えてから，index.htmlというファイル名でWWWディレクトリに保存しましょう．XEmacsの「ファイル」メニューの下の「新規保存...」を選ぶとファイル名を指定するダイアログボックスが出てくるので，その最下行が~/WWW-local/となっているのを，~/WWW/index.htmlと書き換えてから保存します．
  3. Netscapeでhttp://www.twcu.ac.jp/~x02y001/とURLを指定するとこのホームページが表示されるはずです．
  4. これ以降はXEmacsで~/WWW/index.htmlというファイルを開けばこのホームページを編集できます．

9.12 TWCU外部ネットワークとの接続 (テキスト 17章)

注意

外部からの接続

内部から外部への接続

データのやり取りの仕方(ftp、scp)

<< J10124「コンピュータI（GJ0124コンピュータ初級）」/（6/30,7/7）Webページ作成 >>