typing コマンドにある引数を指定すれば、テスト用のテキストを使うことができます。引数は口頭で伝えます。
| テスト用テキストの使用 |
|---|
% typing ないしょ[Enter] |
インターネット上で現在もっとも人気のあるアプリケーションである WWW (World Wide Web) において閲覧されるコンテンツは、ホームページと呼ばれます。 ただし、厳密な意味でのホームページは、 ある単位のコンテンツの集まりの起点となっている コンテンツのことを指します。 これは、例えばみなさんの「ホームページ」は、 みなさんのホームページを開いたときに最初に出てくる画面になります。 したがって、この起点以外のコンテンツを含めた一般的なものを指す場合には、これを Web ページと呼んだ方が正確でしょう。
なお、ここではみなさん自身に関する内容（コンテンツ）を作成しますから、 以降ではその Web ページを指すものとして 「ホームページ」という用語を用います。
Web ページが保存（登録）されている“場所”は、 URL (Universal Resource Locator) という記法 （厳密には URI - Universal Resource Indicator）で表されます （最近は URN - Universal Resource Name という記法も用いられます）。 メールアドレス同様、 既にみなさん自身のホームページの URL が存在します。
| 学生ホームページの URL | http://www.wakayama-u.ac.jp/~ユーザ名/ |
"~"（チルダ）は [Shift] を押しながら [Backspace] の左側にある 0 のキーあるいは ^ のキーをタイプしてください。
では、Web ブラウザ (Netscape) で自分自身のホームページを開いてみてください。
URL を指定して開く方法は 第２回で説明しています。 みなさんはまだホームページを作っていない（ハズな）ので、 "File not found" と表示されるはずです。それでは、自分ホームページの作成をはじめましょう。
| "~"（チルダ）について |
|---|
|
"~"（チルダ）は画面表示に使う字体（フォント）の種類によって、 上の方にあったり、波線だったり、直線だったりしますが、 単に字形の違いですから気にしないで下さい。 "~" は UNIX（というより csh）では“ホームディレクトリ”の意味に使われます。 例えば、シェルで ls ~ というコマンドを実行すれば、 カレントディレクトリがホームディレクトリでなくても、 ホームディレクトリのファイル一覧が表示されます（ディレクトリの読み出し権がなければ表示されません）。 また ls ~guest とすれば、 guest というユーザのホームディレクトリのファイル一覧が表示されます。 これと同様に、URL における "~USER" は、 その WWW サーバにおける USER という利用者のホームページの場所、 という意味で使われています。 |
まず最初に、ホームディレクトリに public_html というディレクトリを作ってください。ディレクトリの作り方は第３回を参照してください。ここで public と html は "_" でつながっていることに気をつけてください。 "_"（アンダースコア）は [Shift] を押しながら右の[Shift] キーの隣のキー（「ろ」）をタイプすれば入力できます。
"publlic" と "html" という２つのディレクトリを作らないようにしてください。もし間違って２つのディレクトリを作ってしまったら、それらを削除して下さい。
| public_html ディレクトリの作成 |
|---|
% pwd[Enter] /home/s3/s075000 ←ホームディレクトリであることを確認 % mkdir public_html[Enter] |
次にNetscape の「再読み込み」ボタンをクリックしてみてください。 今度は "File not found" にはならなかったでしょう？それでは、これまでに課題で作った画像ファイルをこのディレクトリに移動してください。ファイルの移動方法についても第３回を参照してください。
その後もう一度 Netscape の「再読み込み」ボタンをクリックし、これらのファイルが一覧に現れることを確認してください。
public_html を作ると、 ホームページにはそのディレクトリに置かれたファイルの一覧が表示されます。では、ここに自己紹介のファイルを置いてみましょう。カレントディレクトリを public_html に移し、 emacs で profile.txt というファイルを作成してください。
| public_html ディレクトリの作成 |
|---|
% cd public_html[Enter] % emacs profile.txt[Enter] |
一応自己紹介なので、 次のような内容を書いてください（もちろん自分のことを書くように）。
自己紹介 名前 ： 和歌山健太郎 出身地 ： 和歌山県和歌山市 生年月日 ： 昭和52年6月23日 趣味 ： 美食 メッセージ： 美食サークルメンバー募集中 |
書き終わったら C-x C-s をタイプして、 ファイルを保存してください （emacs は終了しないでください）。 その後 Netscape の「再読み込み」ボタンをクリックすると、 ホームページのファイル一覧に profile.txt が現れると思います。 それをクリックして、 自分の自己紹介が表示されるかどうか確認してください。確認できたら Netscape の「戻る」ボタンをクリックして、 ファイル一覧に戻っておいてください。
で、このままだとちょっと味気ないので、 もうちょっと飾りを入れてみましょう。 profile.txt を下のように変更してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Profile</title> </head> <body> <h1>自己紹介</h1> <dl> <dt>名前</dt> <dd>和歌山健太郎</dd> <dt>出身地</dt> <dd>和歌山県和歌山市</dd> <dt>生年月日</dt> <dd>昭和52年6月23日</dd> <dt>趣味</dt> <dd>美食</dd> <dt>メッセージ</dt> <dd>美食サークルメンバー募集中</dd> </dl> </body> </html> |
これを、profile.html というファイル名で保存します。 C-x C-w をタイプし、ファイル名に profile.html とタイプして改行してください。
| -E:-- profile.txt |
| Write file: ~/public_html/profile.html[Enter] |
Netscape の「再読み込み」ボタンをクリックしてください。 ファイルの一覧の中に profile.html が現れたら、 それをクリックしてみてください。 今度はレイアウトされたページが表示されたでしょうか？
では、次に進む前に Netscape の「戻る」ボタンをクリックして、 ファイル一覧を表示させておいてください。
| HTML について |
|---|
|
Web ページのレイアウトは、HTML (Hyper Text Markup Language) というある種の“プログラミング言語”によって制御されます。Hyper Text というのは、文書中に関連する情報への指標（ポインタ）を埋め込んだ、 構造を持った文書のことを言います。Markup というのは、語句などが文書中でどのような構成要素 （タイトル、見出し、本文など）として使われているかマーク付けすることを言います。 このために使われる <head> や <img src="photo.jpg"> のようなものを、 HTML タグ（あるいは単にタグ） と呼びます。 タグに使用する英文字には、大文字／小文字の区別はありません （でも小文字の使用を勧めます）。 |
たいていのホームページでは、 こういうファイルの一覧が表示されることはないと思います。 これを隠す、あるいは自分で一覧のページを作るためには、 そのディレクトリに index.html というファイルを作ります。
emacs で C-x C-f をタイプして、 ファイル名に index.html を指定してください。
| -E:-- profile.html |
| Findfile: ~/public_html/index.html[Enter] |
このファイルには、 次のような内容を書いてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Kentaro's page</title> </head> <body> <h1>和歌山健太郎のホームページ</h1> <p>和歌山健太郎のホームページへようこそ。</p> </body> </html> |
出来上がったら、 C-x C-s でファイルを保存し、Netscape の「再読み込み」ボタンをクリックしてください。これでファイルの一覧を隠すことができたと思います。
| index.html について |
|---|
| Web サーバ（www.wakayama-u.ac.jp のようにホームページを管理するコンピュータ）の設定や種類にもよりますが、 URL がディレクトリを指しているとき （URL の最後が http://www.wakayama-u.ac.jp/ のように "/" で終わっているとき）は、 そのディレクトリに index.html があれば index.html を表示し、 無ければそのディレクトリの一覧を表示します。 |
先ほどのファイル一覧のページのように、 ページ上の特定個所をクリックして、 別のページを表示できるようにしてみましょう。 いま、mule は index.html を編集している状態だと思いますから、 それに下線部のような内容を追加してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Kentaro's page</title> </head> <body> <h1>和歌山健太郎のホームページ</h1> <p>和歌山健太郎のホームページへようこそ。</p> <a href="profile.html">自己紹介</a> </body> </html> |
出来上がったら、 C-x C-s でファイルを保存し、Netscape の「再読み込み」ボタンをクリックしてください。“自己紹介”の文字の色が変わっていると思いますから、 それをクリックしてください。 先ほど作った自己紹介のページが表示されましたか？
今度はホームページに前回作成したバナーを埋め込んでみましょう。emacs で index.html を開きます（既に開かれていると思います）。それに下線部の内容を追加してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Kentaro's page</title> </head> <body> <img src="banner.jpg" alt="和歌山健太郎のホームページ"> <h1>和歌山健太郎のホームページ</h1> <p>和歌山健太郎のホームページへようこそ。</p> <a href="profile.html">自己紹介</a> </body> </html> |
画像ファイル名 banner.jpg は、public_html に入れたバナーに使う画像ファイル名にしてください。出来上がったら、 C-x C-s でファイルを保存してください。 その後、Netscape でホームページを表示させて、「再読み込み」ボタンをクリックしてください。
バナーがホームページに埋め込まれましたか？
画像が大きすぎる場合は gimp や ee を使って画像を縮小するか、不要な部分を切り取ってください。バナーの幅は400～600ピクセルくらいにしておいてください。それでもうまくレイアウトできなければ、もう一度バナーを作り直してください。
あと、デジカメやスキャナを用意しますので、自分の顔写真や自分で描いたイラストなど、独自の素材を使う希望があれば知らせてください。
（１）kadai.html というページを作り、そこに第９回の課題で作成した図を PNG 形式で出力したものを埋め込みなさい。また、ホームページにこのページへのリンクを追加しなさい。
（２）今作った自分のホームページを、 自分なりにアレンジしなさい。
課題ができたら、メールで tokoi@sys.wakayama-u.ac.jp まで知らせてください。私が確認したら返事を書きますので、それ以降は自由に変更していただいて結構です。kadai.html へのリンクなんかははずしておいてください。