(4) 10/24の授業内容:HTML(1)

HTMLって何だろう

今回から4回の授業を使ってWebページを作成する。まずは関連する用語について確認しておこう。

  • WWW：インターネット上で情報検索を行うサービスのひとつ。World Wide Web（世界中に張られた蜘蛛の巣）の略。多くの人に提供したい情報を一定形式のファイルとして集め、インターネット上にある情報を相互に関連付けて参照できるようにしたシステム
  • Webページ：一般にはホームページと呼ばれるが、厳密には、ホームページは表紙にあたるページ（トップページ）のみを指す。全てのページを総称する場合はWebページと呼ぶ。
  • HTML：Hyper Text Markup Languageの略。WebページはHTML言語を使用して記述される。HTML言語で書かれたファイルはhtmlファイルと呼び、拡張子に.html（もしくは.htm）とつける
  • URL：Uniform Resource Locatorの略。各Webページの住所にあたるもの。例えばhttp://www.koeki-u.ac.jp/naoya/index.htmlなどと表記する。これはkoeki-u.ac.jpのWWWサーバー（コンピュータ）のnaoyaというディレクトリの中にあるindex.htmlという名前のファイルという意味。URI（Uniform Resource Identifier）と呼ぶこともある。
  • ブラウザ：HTML言語で記述された文書を解読し、表示するソフト。Microsoft Internet Explorer、Netscape Navigator、Fire Fox、Opera、Safari、w3m、lynx等々がある。基本的には無料。

準備

自分の学籍番号がc105678であると仮定する。自分用のホームページは

http://roy.e.koeki-u.ac.jp/~c105678/

というURLになる。Webページを表示させるためには、royのホームディレクトリにpublic_htmlというディレクトリ（フォルダ）を作成し、その中に表示させたいファイルを置いておく必要がある。大学でWebページを公開する場合に限らず、自宅で契約をしているプロバイダでWebページを公開する場合も同様にpublic_html内にファイルを置く。

例えばabc.htmlというファイルを作成し、public_html/というディレクトリ内においておけば

http://roy.e.koeki-u.ac.jp/~c105678/abc.html

で内容を表示させることができる。

まず、下記の手順でpublic_htmlというディレクトリを作成しよう。

roy{学籍番号}%mkdir public_html[Enter]

mkdirはmake directoryの略で、mkdir public_htmlでpublic_htmlという名称のディレクトリを作成せよという命令となる。正しくディレクトリが作成されたかを確認するために

roy{学籍番号}%ls[Enter]

と続けて入力してみよう。lsはlistの略で、ディレクトリやファイルの一覧を表示させるコマンドである。一覧の中にpublic_html/があれば、正しく作成できている（UNIXではディレクトリは最後にスラッシュがつく）。

なお、public_htmlの中に置くファイルのうち、index.htmlもしくはindex.htmという名前のファイルだけは特別な意味を持つ。通常は、

http://roy.e.koeki-u.ac.jp/~c105678/abc.html

というように、ファイルの名称を指定しなければ、該当するファイルを表示させることはできない。ただし、index.htmlもしくはindex.htmという名前のファイルをpublic_htmlの中に作成しておくと

http://roy.e.koeki-u.ac.jp/~c105678/

のみ、すなわちディレクトリの名前を書くだけで表示される。これらのファイルは見出しに一般的に表紙にあたるページとして利用されるためである。参考までにindex.htmlとindex.htmの2つのファイルが存在する場合は、index.htmlが優先的に表示される。

確認

ブラウザを起動して、
http://roy.e.koeki-u.ac.jp/~naoya/
と入力しても、
http://roy.e.koeki-u.ac.jp/~naoya/index.html
と入力しても表示されるページが同じであることを確認しよう。

HTMLの基礎の基礎

Webページは、.html（もしくは.htm）という拡張子のつくファイルで作成されており、HTML言語を利用して記述される。HTML言語は、文章の持つ意味を<要素名></要素名>という形式のタグと呼ばれる記号を使用して示したものとなる。ここで、<要素名>を開始タグ、</要素名>を終了タグという。タグの働きを概念的に示すと、下記の通りとなる。

<見出し>授業の進め方</見出し>
<段落>今日からWebページを作成します。<重要>欠席しないように</重要>しよう。</段落>

タグがあらわすのは、開始タグと終了タグにはさまれた文章が持つ意味であることに注意する必要がある。例外的に見栄えを規定する<下線></下線>、<中央揃え></中央揃え>、<赤色></赤色>などのタグもあるが、これらは非推奨タグとされている。タグはあくまでも意味を示すものと覚えよう。見栄えの設定はCSS（カスケーディング・スタイル・シート）を使用する。HTMLのタグとCSSを組み合わせて使用することで多彩なデザインのページを作成することができる。CSSについては再来週に取り上げる。

HTMLファイルの構造

以下がHTMLファイルの基本構造である。HTMLファイルは基本的に<html>で開始し、</html>で終了する。基本的にと書いたのは、<html>の上の行にhtmlのバージョン等を記載する必要があるためである。これについてはCSSの回で説明する。ブラウザで表示されるのはピンク色の<body></body>で挟まれた中の部分のみである。上部の緑色の<head></head>内にはページのタイトルや作成者、文字コード、CSSの設定等を記述する。<head></head>内の記述方法については次回以降に取り上げる。 

<html>

<head>
<title>
Welcome to Naoya's Page!!!!!
</title>
</head>


<body>

<h1>自己紹介</h1>

<p>神田直弥です。宜しくお願いします。</p>

</body>
</html>
  • <html></html>：このファイルがhtmlファイルであることを示す。必ず先頭に<html>をつけ、一番最後に</html>をつける。この中にhead要素とbody要素が記述される。
  • <head></head>：ファイルの中味の概要やタイトル、作成者等を記述する。この部分はブラウザでは表示されない。
  • <title></title>：<head></head>内に記入する。ここに記入された情報がブラウザの左上に表示される。
  • <body></body>：この間に本文を書く。ここに書かれた内容がブラウザで表示される。
  • <h1>：<h1></h1>で囲まれた範囲が見出しであることを意味するタグ。
  • <p>：<p></p>で囲まれた範囲が一つの段落であることを意味するタグ。

これを実際にブラウザで表示させると以下のようになる。

自己紹介

神田直弥です。宜しくお願いします。

HTMLファイルを作成する

htmlファイルの実体は単なるテキスト形式のファイルである。通常テキスト形式のファイルは拡張子が.txtとなるが、これを.htmlに変更しただけである。このため、htmlファイルを作成する上で特別なソフトは必要ない。Windowsの場合、メモ帳などのテキストエディタを使用すればよい。授業ではテキストエディタとしてemacsを使用する。

プロバイダと契約をして、自分のWebページを公開する場合は、自分のコンピュータでhtmlファイルを作成し、それをプロバイダのサーバにあるホーム領域内のpublic_htmlというディレクトリの中に転送する（アップロードする）必要がある。この際にはFTPソフトと呼ばれる、ファイル転送を行うためのソフト（無料でダウンロードできるフリーウェアが多数ある）が必要となる。

大学でWebページを作成する場合は、作成したファイルを転送するのではなく、直接public_htmlの中にファイルを作成することができる。ここではその方法について学ぶ。

  1. ttsshを使用してroyに接続
  2. emacs -nw[Enter]と入力（これでemacsが起動）
  3. Ctrl-x Ctrl-fと入力（ファイルを開く、もしくは新規作成するためのコマンド）
  4. ミニバッファにFind file:~/と表示されるので、Find file:~/public_html/index.htmlと入力しEnter（これはpublic_htmlの中にあるindex.htmlを開けという命令。該当ファイルがない場合は、その名前のファイルが新規作成される。ファイル名はその都度変更するが、public_html/の部分は変わらない）

アルファベットや数字、記号はいずれも半角英数字（直接入力）で入力する必要がある。

ここまでできたら、下記を参考に、赤色文字の部分を適宜変更しながら入力してみよう。

<html>

<head>
<title>
Welcome to Naoya's Page!!!!!
</title>
</head>


<body>

<h1>自己紹介</h1>

<p>神田直弥です。宜しくお願いします。</p>

</body>
</html>

完成したら

http://roy.e.koeki-u.ac.jp/~自分の学籍番号/

をブラウザに入力し、思ったとおりに表示されるか確認してみよう。

課題

来週からは自分で自由なテーマを決めてWebページを作成していく。今回は誰でも見ることができるWebページを作成するため、著作権の侵害に気をつける必要がある。このため調べたものをまとめるようなテーマにする場合は特に注意が必要である。この点を考慮に入れた上でテーマを決定しよう。例えば以下のようなテーマであれば、何かを参考にすることが少ないため、著作権の侵害が起こりにくい。

  • 自己紹介
  • 興味を持った授業の内容と感想
  • 日記
  • ボランティアの体験
  • 町で見かけた変なもの
  • 自分の好きなWebページの紹介

今日の課題：以下の2点についてメールで送る。

  • 作成したWebページのURL
  • 次週以降作成しようと思うWebページのテーマ
  1. 提出先：naoya@e.koeki-u.ac.jp
  2. メールの件名（Subject）：literacy(4)
  3. 提出期限：授業終了時
  4. 電子メールの使い方に自信がない場合：Mewの主要コマンドについてを確認しよう