第１回ＨＴＭＬ講習会のまとめ（訂正版）
（注：この報告書は講習会の出席、欠席にかかわらず全所員にお配りしています）
７月１１日はたくさんお集まりいただきありがとうございました。
会場スペースの関係で画面をよくご覧になれなかった方もおられたようで申しわけあ
りませんでした。もし、ご不明な点、質問などありましたら遠慮なく中村までお問い
合わせください。個人的にご指導いたします（火、水、金と勤務しております）。な
お、８月５日から一ヶ月ほど不在にします。そのかわりに７月２２日から８月４日ま
では毎日出勤しておりますので、どうぞどうぞこの機会にホームページを完成させて
ください！！！
次回講習会は７月１８日（金）です。できるだけテキストファイルを作成の上ご参加
ください。なお、７月２５日（金）、８月１日（金）も引き続き開催予定です。
以下は第１回講習会で説明したことのまとめです。当日お配りしたプリントに一部誤
植がありましたので、補足説明を加えて訂正版を発行させていただきました。
ＣＯＥ非常勤研究員中村美奈子
http://www3.aa.tufs.ac.jp/~minako/
minako@aa.tufs.ac.jp
# （電話がつきました！）
０.個人のホームページのＵＲＬはこうなっています。
外www（ＡＡ研ＨＰのトップページ）のＵＲＬ…http://www.aa.tufs.ac.jp
内www（個人のホームページ）のＵＲＬ…http://www3.aa.tufs.ac.jp または
http://www-aa.aa.tufs.ac.jp
＊各ユーザの個人ホームページは内wwwであるwww3に置く。
＊今後「w3」が「www」の略称として使われる可能性もあるため、「www3」に「www-a
a」という別名を用意した。
＊外wwwは外部からのアクセスに対して、内wwwへの目次を提供してリンクを張るのみ
とし、具体的なコンテンツは、内wwwに置く。
個人のホームページは次のようになる。
旧 http://www3.aa.tufs.ac.jp/~minako/
（http://www3.aa.tufs.ac.jp/~minako/index.html）
新 http://www-aa.aa.tufs.ac.jp/~minako/
（http://www-aa.aa.tufs.ac.jp/~minako/index.html）
＊
index.htmlはホームページのトップページ（インデックスページ）の指定で、省略可
能（打ち込まなくてもindex.htmlと認識される。）
＊「~」（チルド）+自分のID（メールアドレスの名前の部分）が自分のアカウント名。
＊近日中に旧サーバ（
www3）から新サーバ（www-aa）へ移行するが、www3、www-aa、どちらでもアクセス可
能なので、既存のホームページは変更不要（つまり、一つの同じサーバが２つの名前
を持っているという状態）。ただし、これからページを作る人は、新サーバ名www-aa
を使用することを推奨する。
１.ホームページの階層を作る（実演で説明しました。詳しくは、私のホームページ
をご参照ください。）
○ファイルは拡張子「.html」を付けて保存する
（注）拡張子は「.html」で統一する。リンクの都合もあるので、「.htm」は使わな
いように。
○タグ（<>で囲んだもの）は半角（１バイト文字）で入力する。なお、タグに使用す
る英字は大文字、小文字どちらでも有効（大文字と小文字の区別はされない）。
２.必須タグ
… これで囲んだ部分がＨＴＭＬとしてブラウザに認識される
…
ヘッダにはそのページのタイトルを入れる。
＊ブラウザのヘッダにタイトルとして表示される。（本文には表示されない）
＊ブックマークに加える時のタイトルになる。
＊検索機能について：タイトルにキーワードを入れることにより検索が可能になる。
AA研のホームページでは、地域別検索により個人のホームページやプロジェクト研究
会のページへアクセスできるようにする予定。
よって、タイトルには、必ず地域名、国名を半角英字（１バイト文字）で入れて検索
にヒットするようにすること。キーワードはindex.htmlと該当ページ（自分の研究の
紹介ページなど）につける。
（例）Balinese dance page,southeast Asia,Indonesia,Bali
地域が特定されない場合はcross cultural
などキーワードを工夫する。地域以外にもページの内容を表すキーワードがあれば記
述する。
「タイトルが長くなりすぎてみっともない」という意見についてですが、今のところ
解決策がありません。とりあえずみっともなくならない程度にキーワードを入れてく
ださい。
… これで囲まれた部分が本文となる。
背景色の指定。指定しない場合はネズミ色で表示される。「#ffffff」は16進法の「
白」。その他、blue,pinkなどの色の名称での指定も可能（ただし制限有り）。（16
進法の色指定については、マックには「Hex
color」というフリーソフトがあるので希望者は申し出てください。また、町田先生
のＨＰに色見本がありますのでそちらもご参照ください）
背景画像の指定（imageフォルダーの中のBACK181.gifというファイルを指定。指定先
を「""」で囲む）
（これは次回、リンクのところでも説明します）
TEXT=標準のテキスト色（指定しない場合は黒で表示される）
LINK=リンクがかかっている部分のテキスト色（指定しない場合は青で表示される）
ALINK=リンクがかかっている部分をクリックした状態の時の表示色
VLINK=すでに見たことのあるページにかけられたリンク部分（指定しない場合は紫で
表示される）
＊指定しない場合のリンク色はブラウザの初期設定による。リンク色の設定は、背景
色との関係で青や紫が見えにくい（または色合いが悪い）場合に設定する。（テキス
ト色も同様）
3.テキスト（フォント）の表示
…
見出しタイトルの表示。H1が最大H6が最小。
… 文字サイズの表示。３が標準。数が増えると大きくなる
一文字ごとの表示サイズの指定が可能。
… 指定部分の表示を太字（ボールド）にする
… 指定部分の表示をイタリックにする
…
指定部分のフォントの表示色を#FF0000にする。
＊ブラウザに表示させるフォントの種類の指定は見ている人のブラウザの設定による
ため制作者側での設定は不可能（インターネットエクスプローラー3.0以降では一部
可能）。
4.レイアウト（テキストおよび画像）
…
「
邪道のタグ！ 囲んだ部分のテキストのレイアウトがそのまま表示される。便利です
！」…と言ってしまったのですが、このタグは峰岸、豊島両先生よりストップをかけ
られてしまいました。システム的に問題が起こるそうなのでどうか使わないでくださ
い。
強制改行。改行させたいテキスト末尾に付ける。（戸締まりのタグは必要なし）改行
を指定しない場合は、見ている人のブラウザの画面の大きさに合わせて勝手に改行さ
れる。
… 改行の禁止。画面の大きさに合わせて改行させたくない場
合に用いる。例えば見出しなど。見ている人は画面を横にスクロールして見ることに
なる。
または
…
パラグラフの指定。囲んだ部分が段落として認識され最
後に一行改行される。だけでも一行改行のタグとして使用可能。
… センタリング。指定した部分をセンタリングする。
横線（水平線）。sizeで太さを指定できる（しない場合は２ピクセルの細い線）。wi
dthで幅の設定ができる。％の他にピクセル数での指定ができる。幅の設定をしない
場合は画面いっぱいに表示される。
＊テキストにスペースを挿入させたい場合は「全角スペース」で打ち込んでください
。半角の場合はたくさん打ち込んでもスペース一つ分しかマウントされません。
第２回（予告）
（前回の復習）
5,リンクを張る
............
6リストを作る
6,画像を貼る
7,額縁に写真を入れる
（ TABLEタグについては次週）
＊ＦＴＰの仕方については次回にします。ホームページが完成した方には個人的にお
教えします。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
以上
練習問題：とりあえず、「●」の部分に適当なテキストを入れて全て打ち込んでみて
ください。エディタで作成すること。タグは１バイト文字で入力する。ファイル名は
「index.html」で保存する。（「○」の部分は次回説明します）
●●プロジェクト研究会 地域 国名 その他キーワード
●●研究会
●●@aa.tufs.ac.jp
|