第07回 - 09年度春学期

XHTMLその1・Web構築実習（FTP）

XHTMLを利用した情報発信

自分で調べたり、まとめたりした情報をWWWを通じて発信するという機会が多くなってきました。そのためにはウェブページを構築して、情報を書き記す必要があります。ウェブページを作成するには、HTMLというマークアップ言語を利用する必要があります。HTMLにはいくつかの規格があります。

この講義では、比較的最近の規格であるXHTML1.0を用いて、ウェブページを作成することとします。XHTML1.0は文書の構造を示すための規格です。また、見栄えに関する情報を取り扱うカスケーディングスタイルシート（CSS)という仕組みを併用することによって、より見やすく、扱いやすいウェブページの構築を目指します。

雛形の活用

最初からすべてのルールを説明して、「さぁやってみましょう」というのは簡単なのですが、それでは途方に暮れてしまうことでしょう。そこで、授業用に簡単な雛形を作成してみました。この雛形を活用することで、自分の発表するべき内容に集中することができます。

雛形をダウンロードするためには、「雛形」を右クリックで「対象をファイルに保存」として、自分のUSBメモリなどに保存してください。

今ダウンロードしたファイルは、圧縮されていますので、解凍する必要があります。sample.lzhをダブルクリックすると、フォルダの中にsample.htmlというファイルがあります。このファイルが雛形の本体です。編集している者の名前やメールアドレスなど、自分用にカスタマイズする部分がありますので、編集をしてください。編集が完了したら上書き保存し、自分のUSBメモリなどの課題作業用フォルダに保存しておいてください。

Webサイトの構造の設計

Webサイトは、通常内容の異なる複数のページから構築されています。ただし、トップページ（入り口のページ）はひとつであり、一般的にindex.htmlというファイル名で作成されます。今回の課題においても、リンク集からは各人のindex.htmlへリンクされますので、間違えのないようにしてください。具体的な内容となるページは、情報の提示の仕方によって、印象が大きく変わります。

  • 直線的
  • 並列的
  • 網目的

というような構造を持つことが多いようです。まずはしっかり情報の構造を書き出し、それらのつながり方とファイル名を決定することが重要です。

ノートなどを用いて網羅的に情報を書き出し、自分の提示する情報が理解され易いように工夫をしてください。Webはその名のとおり網目状ですから、内容によっては注釈だけを別ページに独立させ、本文のページからリンクするという方法も可能です。各人で工夫してください。

雛形の複製

きちんと構造が設計されたならば、先ほど編集したsample.htmlファイルを利用することになります。

この雛形のファイルを、必要となるページ数だけ複製する必要があります。ファイルの上で右クリックし、「コピー」を選びます。続いて、「貼り付け」を繰り返し、必要なだけファイルの複製を行ってください。

ファイル名の変更

複製された雛形は、「コピー〜sample.html」という名前になっていると思います。これではウェブページとして利用できませんので、ファイル名を変更しましょう。名前を変更したいファイルの上で右クリックし、「名前の変更」を選びます。新しいファイル名を入力し、リターンキーを押して確定しましょう。ただし、利用できるファイル名は、半角英数で、拡張子が「.html」となっているものです。たとえば自己紹介であれば、「me.html」であるとか、歴史に関するファイルであれば「history.html」というように、簡潔に内容がよくわかる名前にしてください。



すべてのファイルに適切な名前がつけられましたか？
では最後にもうひとつ雛形からファイルを複製し、index.htmlと改名してください。このファイルが目次兼表紙のような役割になります。

準備はできましたね？　それではそれぞれのページを編集していきましょう。まずは、今名前を変えたそれぞれのファイルを、「メモ帳」で開く場合方法を簡単に説明します。



それでは早速編集を開始しましょう。編集を行うには、XHTML1.0というルールを用いて文章を記す必要があります。詳しくは次回以降に説明を行います。今日のところは、index.htmlをネットに公開するところで完了です。


情報の公開のための準備（早稲田大学編）

手元のコンピュータに編集されたファイルがあっても、それだけでは世界中に公開されたことになりません。そこで、FTPというツールを用いて公開用コンピュータ（WWWサーバ）に転送することにしましょう。早稲田大学の学生の場合、まずは、授業ごとに公開用のフォルダを作成する必要があります。

具体的な作業内容は、PC・ネットワーク利用ガイド2008年版の6章を参照してください。

  1. スタートメニュー＞プログラム＞telnet&ftp＞FFFTP
  2. 自分のメールアドレスと共通したサーバを選ぶ
  3. 接続ボタンを押すと、ユーザ名を求められるので、メールアドレスの@より左側を入れる
  4. パスワードを求められるので入力する
  5. public_htmlフォルダの中に、授業番号のついたフォルダを作成する
  6. 編集したindex.htmlファイルを転送する

FFFTPの利用について

前述のように、起動後に公開サーバに接続するための手続きを行う必要があります。接続したら、左右に分かれたウィンドウが表示されますが、基本的には右側のカラムを用いて転送します。

編集したファイルをウィンドウやデスクトップからFFFTPの右側のカラムにドラッグ＆ドロップすると、転送が行われます。転送し終わったら、ウェブブラウザで更新されたかどうか確認してみてください。

作業のまとめ

作業は「メモ帳で編集→FFFTPで転送→ブラウザで確認」の繰り返しになります。FFFTPでの転送は学内でしかできませんので注意してください。



ネットワークサービス基礎

共同作業としての文書作成（Wiki・Writely・Google Notebook）


参考文献

課題

  • Web構築に必要となるそれぞれのHTMLファイルにおいては、見出し、段落、箇条書き、引用部などについて、編集を続けること。
  • 見栄えについては一切考慮する必要はない。