三木研究室基礎ゼミ「Homepage作成」
第一日目
1.Homepageを作るということ
2.HTMLファイルの作成
3.FTPの使い方(uploadの方法)
| 1.Homepageを作るということ |
担当：浜崎雅弘(tg0012@mail4.doshisha.ac.jp) |
■■■Homepageゼミの目的と概要
三木研究室では，研究生全てにHomepageの作成を義務づけています．今回のゼミでは，三木研においてなぜHomepage作りが義務とされているのかを理解し，三木研の研究生として必要最低限の内容のHomepageを作成する能力を身に付けることを目的としています．全二回のゼミが終わった時には，受講者全員が自分のアカウント内にタイトルページを作成して，自己紹介および研究報告を載せたWEBサイトをuploadし，更新・管理することができるようになる事を目標としています．
第一回目は三木研におけるHomepage作成の意義と簡単なHTMLファイルの作成法，そしてWindows標準搭載のFTPソフトであるFTP.exeによるuploadまでを解説します．Htmlファイルの作成とFTPによるファイルのuploadは実際の実演も行います．受講者は次回までの課題として自分のアカウント内のpublic_htmlディレクトリにindex.htmlファイルを作成してuploadをします．
第二回目は，実際にHomepageを持って管理しつづける際に注意しなければならない点を解説します．具体的に言うとUNIXのセキュリティ技術とWWW上の情報公開におけるプライバシー問題等の留意点です．さらに多くの人に見てもらえるHomepage作りのコツや，日進月歩のWWW技術の紹介なども行いたいと思います．第二回目の課題として各自がWEBサイトを作る事を考えています．
予定としてはこのHTMLゼミは二回で終了です．が，HTMLやupload,UNIXのセキュリティ技術等の，三木研でのHomepage作成に関して必要最低限である技術の習得が全体的に不十分だと思われた場合，第三回も開きたいと思っています．
■■■今回のゼミで覚えて欲しいこと
・LaTexで作った研究結果をページにupload出来る．
・研究室内での役割における仕事の報告にHomepageを利用出来るようになる．
−ＨＴＭＬを書けるようになる．
−見やすいページデザイン作成法を覚える．
−ＷＥＢサイトを管理出来るようになる．
・Homepageでの情報発信について理解する．
−ＷＷＷメディアの特徴を理解する．
−ホームページの取り巻く状況を理解する．
■■■三木研でのHomepageの目的
三木研究室では研究室のHomepageを通じて，研究内容などの紹介を行っています．これは他の研究室でもよく行われていることですが，三木研究室ではさらに研究生全員にHomepageを作ることを義務づけています．今回のゼミはHomepage作りの最低限の能力を身に付けることが目的ですが，なぜ三木研ではHomepageを作ることが義務づけられているのか，まず紹介したいと思います．
・自分の研究を世界に発信する．
これから我々学部生は，１年かけて(院へ進む人は３年かけて)研究をするわけですが，自分の研究結果はおおいに世に知らしめるべきものだと思います．現在では，自らの研究成果を世に知らしめる道は学会での発表だけではありません．多くの価値ある文書がWWW上から発信されています．
・お互いの研究を理解する手助けをし，研究生としての交流を促進する．
研究生同士はお互いに別々の研究をするために，相手の研究について詳しく知ることが出来ません．全体ゼミ等でおおよその進行状況が伝えられるとはいえ，それだけで相手の研究について考えるだけの情報が伝わるわけでもありません．Homepageを使えば，相手の研究について(時には近況について)，自分の好きな時間に，好きなだけ知ることができます．
・自らのアンテナを広げるための一つのツールとする．
現在のＷＷＷでは，ページをＵＰすればほぼ確実にサーチエンジンに登録されます．キーワード検索型の巡回ロボットを使ったサーチエンジンが多く存在するからです．ロボット型のサーチエンジンは，巡回ロボットがpageにアクセスしてキーワードを抽出し，サーチエンジンを作成します．つまり，自分のページは自然とWWWという百科事典の目次に掲載される訳です．その百科事典を使ってあなたの研究テーマについて調べたら，あなたのページがその目次に出てくるわけです．あなたのページにたどり着いた相手が，同じように研究をしている人ならば互いに情報交換をし，研究活動にいかせるかもしれません．場合によっては熟知した技術者がすばらしい助言をくれるかもしれません．まったくの初心者が見た場合，思いがけない質問によって新たな刺激を与えてくれるかもしれません．WWWにHomepageを作るということは，全世界に広がるInternetというNetworkを利用して自分のアンテナを世界に広げることを意味しています．
・研究生活中の思い出作り．
三木研究室では全員に研究報告書および月例発表の内容をuploadする事を義務づけています。そして、卒業時には全学生のHomepageを一枚のCD-ROMに収録します。このCD-ROMはそのまま三木研全員の一年間にわたる研究生活の総記録となります。多忙な研究生活の合間にHomepageを作るなんて・・と思われるかもしれませんが、この１年を振り返るとき、卒業アルバムではわからない、研究室での本当の思い出を残すアイテムとなる事は間違いないでしょう。
補足：WWWにおける情報発信
■■■ＷＷＷにおける情報発信
WWWはとてつもなく広い世界です．そんな世界の中で，何も考えず単に作ってみただけのHomepageではあっという間に埋もれてしまいます．埋もれてしまったHomepageはWWWにとってただ邪魔なだけの存在です．自分の作ったものが邪魔物扱いされるのはあまりにもさみしい話です．そうならないためにも意義のある発信をすることが大切です．
・ＷＷＷというメディア
WWWは今までにない，新しいメディアです．そのスタイルは多発信多受信かつ双方向です．今までは我々が発信できる相手は極めて限られていましたが，このWWWの登場によって，我々は始めて(局所的ではあるけれども)一対多通信における発信者になれたわけです．WWWは今までの通信とは大きく異なる存在なのです．電話のようわかりきった相手に伝えるものではありません．テレビのように与えられた情報を視聴者として眺めているだけしかないものでもありません．我々はこれらのことをよく考えて，WWWというメディアを扱わなければなりません．
・意義ある情報発信
では意義のある発信とはどのようなものを指すのでしょうか．誰もが知りたがるような特ダネを我々は持っているでしょうか．多くの人はそんなものは持っていません．しかし実際にはそんなものは必要ありません．WWWは一対多の通信ではないからです．あくまで多対多の通信なのです．個人的な日記をつづっただけのpageでも，友人があなたの近況報告代わりにそこに訪れるのなら，それはきっと意義のあるHomepageです．WWW上に受信者は無数にいますが，同時に発信者も無数にいます．そんな状態で全員をこちらに振り向かせる事は不可能な事です．誰か一人でも振り向いてくれたなら，そのHomepageは十分に成功といえるのではないでしょうか．Homepageを通じての情報発信において必要な事は，全員に価値ある情報を提供する事ではありません．確実に存在する誰かに価値ある情報を提供する事が必要なのです．
・WWWでの真の情報発信
先に延べたように，WWWは多発信多受信双方向のメディアです．ただ発信しただけではWWWを使い切っているとは言えませんし，ただ受信しただけでも同じです．発信し受信し互いに情報を交わし合う，そうやって始めてWWWというメディアを利用していることになるのではないでしょうか．Homepageを持つという事は，WWW上における発信の手段の一つに過ぎません．誰かのページの掲示板に書き込むのも立派な情報発信でしょうし，質問メールに答えるのも情報発信です．誰かのHomepageを見てちょっとした感想を送って，それが次の更新に反映されたら？それも立派な情報発信ではないでしょうか．必要な事はWWWの情報の流れに自分も積極的に参加していく事だと思います．
|
| 2.HTMLファイルの作り方 |
担当：赤塚浩太(tg0002@mail4.doshisha.ac.jp) |
ここでは、htmlファイルの作り方について、以下の順に説明します。
- Htmlファイルの基本的な仕組み
htmlファイルは、どういう仕組みか学びます
- Htmlファイルを作成するソフト
htmlファイルは、何で書くのか学びます
- Htmlファイルの具体的な書き方
htmlファイルの具体的な書き方はどうするのか学びます
- 構造について
htmlファイルの基本的な構造について、学びます。
- 本文について
<BODY>タグ内の本文には、どんな決まりで何を書けばよいか学びます。
- リンクとは
リンクタグについて、他のタグより少し詳しく学びます。
- タグの紹介
２００種類程もあるタグの一部を紹介します。
- エラーなどその他の留意点
文法エラーを起こしたらどうなるのかなどを学びます。
Htmlファイルは、すべてテキスト（メモ帳で読める形式）でできています。その中に、タグと呼ばれる実際には表示されない形式を設定する部分と、実際に画面に表示される文章の部分があります。図１に簡単な例を示します。
<HTML>
<BODY>
HTMLファイルの作り方
</BODY>
</HTML>
|
ＨＴＭＬファイルの作り方
|
| 図１-a | 図１-b |
|---|
図１-aに示したのが、htmlファイルの中身です。図１-bに示したのが、aのhtmlファイルを表示させたものです。先に述べたように、表示されてない部分が、タグと呼ばれるものです。タグは、普通の文章と区別するために、すべて<>で囲まれています。そして、多くのタグには、始まりタグと終わりタグがセットであります。図１の例では、タグは、<HTML><BODY></HTML></BODY>の４つありますが、このうち、<HTML>タグと</HTML>タグ、<BODY>タグと</BODY>タグをそれぞれセットで使います。もちろん、<HTML>タグが始まりタグで、</HTML>タグが終わりタグです。タグはこのようにそのタグで囲んだ文章に意味をつける為に用いる事が多いです。
先ほどの例を、少しだけ変えてみましょう。（図２）
<HTML>
<BODY>
<B>HTMLファイルの作り方</B>
</BODY>
</HTML>
|
ＨＴＭＬファイルの作り方
|
| 図２-a | 図２-b |
|---|
htmlファイルの方を見てもらうと解るように、文章を<B></B>でくくってあります。図２-bを見てください。文字が太くなってるのが解るでしょうか？そうです。<B></B>タグは、囲んだ文字を太字にするという意味のタグなのです。
htmlファイルは、このようにタグと文章の組み合わせでできていることを、解っていただけたでしょうか？
では、このhtmlファイルは、何を用いて作ったらよいのでしょうか？Htmlファイルを作るには、いくつかの方法があります。
- ・エディタで書く
- エディタを使って、タグも文章もすべて自分で書くという方法です。かなりめんどくさいですが、専用のソフトを必要とせず、しかも全く制限が無いので、時間さえ気にしなければ、もっとも良い方法です。いわゆる、プログラムを書くような感覚で、htmlファイルを書いては、ブラウザでチェックということになります。
- ・ＨＰ作成ソフトを使う
- ホームページ作成専用のソフトを使う方法です。専用ソフトは、以前は使いものにならなかったのですが、最近は性能も上がり、十分実用に耐えるものになってきました。ワープロソフトのように、実際に表示されるページを直接書く感覚で、書くことができます。複雑なことをせず、早く書きたいならば、この方法がよいと思います。
- ・ワープロソフトを使う
- ワープロソフトの中には、htmlファイルでの保存ができるものがあるので、それを利用する方法です。ただし、できあがるhtmlファイルが、予想外のものになったり、画像ファイルを多用するので、非常に重いページになったりと、実用レベルのページは作れないと思います。htmlファイルを作るソフトとしては、おすすめできません。
今回のゼミでは、簡単なhtmlファイルの作成を目標としていますので、「エディタで書く」を解説していきます。
先にも述べたように、エディタでHtmlファイルを作成する方法を説明します。
とりあえず、最低限の構造を理解しなければ、全く書けませんので、まず説明します。説明とともに、もっとも簡単なHtmlファイルを作ってみましょう。
- まず、エディタ（無ければ、メモ帳でも可）を起動します。
- １行目に、<HTML>と書きます。これは、htmlファイルの開始を宣言します。これがなければ、そのファイルはhtmlファイルとは見なされずに、たんなるテキストとして扱われてしまいます。
- ２行目に、<HEAD>と書きます。図１．のサンプルでは省略したのですが、通常、htmlファイルの先頭には、ヘッダと呼ばれるものを書きます。ここにはタイトル等、ページに関するその他の情報を書きます。
- ３行目に、<TITLE></TITLE>と書きます。先に述べたようにタイトルを書きます。タグの間にタイトル名をはさんで書きます。
- ４行目に</HEAD>タグを書いて、ヘッダ部の終わりを宣言します。
- ５行目に<BODY>タグを書いて、本体部の開始を宣言します。
- ６行目から、本文になります。
- 本文が終わったら、</BODY>タグを書いて、本体部の終了を宣言します。
- 最後に、</HTML>を書いて、htmlファイルの終わりを宣言します。
図３に、実際の様子を示します。
<HTML>
<HEAD>
<TITLE>ここにページのタイトルを書きます</TITLE>
</HEAD>
<BODY>
ここに本文を書きます。
</BODY>
</HTML>
|
図３．htmlサンプル |
これだけ覚えれば、とりあえず、テキストだけのhtmlファイルは書くことができます。
| 表４．色一覧 |
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#AAAAAA
|
赤
緑
青
黄
水色
紫色
灰色
|
#AA0000
#00AA00
#0000AA
#AAAA00
#00AAAA
#AA00AA
#888888
|
暗赤
暗緑
暗青
暗黄
暗水色
暗紫色
暗灰色
|
ただし、このままでは、背景の色が、灰色（ブラウザによって異なるかもしれない）になってしまいます。そこで、<BODY>タグに属性（オプションのようなもので、タグに細かな設定などを付け加えます）を設定します。先ほどのサンプルの<BODY>タグを、<BODY BGCOLOR="#FFFFFF">に書き換えてみます。こうすることで、背景色を白色にすることができます。他にも、#FFFFFFを表４のように変えることで、背景色を好みの色に変えることができます。もちろん、表４以外の、微妙な色も可能ですが色の仕組みについては、ここでは省略します。
それでは、本文の書き方について、解説しようと思います。本文とは、<BODY></BODY>で囲まれた部分をさします。といっても、普通の文章を書くには、先に述べたサンプルの<BODY></BODY>内に、普通に文章を書けばよいのです。
ただし、一つだけ重要な事があります。それは、改行です。htmlでは、改行は明示的に与えない限り、行われません。たとえば、図５のようなhtmlは、予想と全く異なった結果になります。
<HTML><BODY>
昨日はTEXのゼミだった。
トラブル続出で大変そうだった。
今日は何も起こらないといいのだが。
</BODY></HTML>
|
昨日はTEXのゼミだった。トラブル続出で大変そうだった。今日は何も起こらないといいのだが。
|
図５．改行指定のないhtml |
そこで、改行タグである、<BR>タグを付加します。このタグは、数少ない、閉じなくて良いタグです（</BR>はない）。図６に、改行コードを付加したhtmlを示します。
<HTML><BODY>
昨日はTEXのゼミだった。<BR>
トラブル続出で大変そうだった。<BR>
今日は何も起こらないといいのだが。<BR>
</BODY></HTML>
|
昨日はTEXのゼミだった。
トラブル続出で大変そうだった。
今日は何も起こらないといいのだが。
|
図６．改行指定のあるhtml |
これで、普通のテキスト文章は、書けるようになりました。
htmlには、他にも様々なタグが存在し、文章を装飾して、見栄えのするホームページを作るのに、役立っています。文章を装飾するタグについては、後でもう一度触れますが、ここで例として、<CENTER>タグを紹介しておきます。これは、予想されるとおり、センタリングを行うタグで、このタグで囲まれた文章などを、中央を中心に持ってきます。図７が、その例です。
<HTML><BODY>
次の時間はプレゼンのゼミだ。<BR>
いったいどんなことをやるのだろう？<BR>
プレゼンのゼミの前にゼミがあるのはおかしいような<BR>
<CENTER>１９９９／０４／１２<BR>
２１：３４<BR>
赤塚浩太</CENTER>
</BODY></HTML>
|
次の時間はプレゼンのゼミだ。
いったいどんなことをやるのだろう？
プレゼンのゼミの前にゼミがあるのはおかしいような
１９９９／０４／１２
２１：３４
赤塚浩太
|
図７．<CENTER>タグの例 |
本来、リンクも<BODY>タグ内に本文として記述されるので、３．２．でまとめて述べるべきなのですが、htmlファイルのもっとも重要な特徴であるので、ここで少し詳しく述べます。
htmlファイルが他のどんな形式より優れている点は、先にも述べたリンク機能です。リンク機能とは、ＷＷＷを閲覧したことのある人ならば、すでに理解していると思いますが、現在のファイルと異なったファイルを表示するボタン（正確には文字列）を埋め込む機能です。
みなさんが作るホームページが、一つのファイルでおさまるならば、問題はないですが、たいていの場合複数になります。これらをたどるためのものが、リンクです。また、自分のページに関連のあるページにリンクを張ったり、自分の好きなページのリンク集を作ったりするのも良いでしょう。
この、リンクは、<A>というタグで実現されています。文法は次の通りです。
|
|
<A>
の文法 |
<A HREF="http://mikilab.doshisha.ac.jp">mikilabへジャンプ</A>
HREF=""には、リンク先のアドレスを書きます。
|
アドレスは、通常ブラウザで入力するホームページアドレスと同じです。
どのような仕組みで実現されてるかというと、<A>タグで囲まれた部分を、見る人がクリックすると、ブラウザ（ネスケやエクスプローラ）が、<A>タグのHREF部分を読みます。そして、そこに書かれてる場所のhtmlファイルを自動的に表示することによって、リンクが実現されているのです。
ここで、１つ重要なことがあります。リンクのはりかたです。リンクを張るには、アドレス欄にリンク先のホームページのアドレスをすべて書く絶対アドレスと、自分のページの場所をもとにして場所を書く相対アドレスがあります。
絶対アドレスはいわば、「奈良県生駒郡安堵町の赤塚」という指定で、一方相対アドレスは、「同じ町の松田さん」というような指定です。自分のいる場所がわかってるのに、わざわざ「奈良県生駒郡安堵町の松田さん」と指定する必要はないのです。
また、ホームページ全体を移動させたりするときなどに、絶対指定ではアドレスをすべて変更する必要があり、非常にめんどくさいことになります。一方、相対アドレスであれば、変更する必要は無い場合が多いのです。
自分のページ内を、相対アドレスで書く利点は、他にもいろいろありますが、とりあえず、みなさんは、必ず、相対アドレスで書いてください。これは、研究生全員のページをＣＤ−ＲＯＭ化する際に、絶対アドレスではリンクをたどれなくなるからです。
たとえば、[http://mikilab.doshisha.ac.jp/~kouta/]にある[index.html]というファイルから、同じく[http://mikilab.doshisha.ac.jp/~kouta/]にある[report.html]というファイルにリンクを張る際は、必ず、<A HREF="report.html">レポート</A>のようにリンクしてください。
<A HREF="http://mikilab.doshisha.ac.jp/~kouta/report.html">report.html</A>としてはいけません。後者のように絶対アドレスによるリンクを行うと、WWW上以外でページを見ようとしたときうまくリンクをたどることができなくなってしまいます。
リンクについては、自分のページにディレクトリ構造を組み込んだ場合などは、多少複雑になりますので、ｆｔｐ等の話とともに、次回以降にお話ししたいと思います。
ここまでで、htmlの具体的な書き方の説明は終わりです。最低限これだけ知っていれば、テキストだけのホームページは可能です。しかし、せっかく、２００種以上のタグがあるのですから、利用しない手はありません。さまざまなタグを利用して、すばらしいhtmlにしてください。
| 表８．ここで紹介しているタグ一覧 |
| 文章を装飾するタグ |
<FONT> |
| <B><I><U> |
| <SUP><SUB> |
| 画像関係のタグ | <IMG> |
| テーブル関係のタグ | <TABLE><TR><TD> |
| その他 | <PRE><HR> |
先にも述べたように、htmlには２００種以上のタグがあるのですが、すべてを解説していては、紙面も時間も足りません。そこで、ここでは、基本的なタグのみを紹介します。
ここで紹介しているのは、表８のタグです。
文章を装飾するタグは、タグに囲まれた文章に、タグで指定した装飾を施すものです。
- 文字の大きさや、色についてのタグ
-
文字の大きさや、色を指定するには、<FONT>タグを使用します。
文法を以下に示します。
<FONT>
の文法 |
<FONT SIZE="+1" COLOR="#FF0000">少し大きくて赤色の字</FONT>
SIZE=""には、現在のサイズから大きくするには＋、小さくするには−を指定します。＋−の指定の後に、どれだけ大きくするかの数字を書きます。
COLOR=""には、何色にするかを書きます。色の指定は、前述の通りです。
|
- 太字、斜体、アンダーライン等についてのタグ
- 文字を太字・斜体・アンダーライン・上付・下付にするには、それぞれ以下のタグを用います。
<B>太字になります</B><I>斜体になります</I><U>アンダーラインになります</U>
<SUP>上付になります</SUP><SUB>下付になります</SUB>
これらのタグは、もちろん組み合わせて使用することができます。例を図９に示します。
ここは、普通の文字です。
<FONT SIZE="+1">少し大きくしました。
<FONT COLOR="#FF0000">色も変えてみました。
<B>さらに太字です</B></FONT>
色のタグまでを閉じて、少し大きい文字に戻しました。
<I>斜体です。
<FONT SIZE="+1">さらに大きくしてみました。
</FONT></I>
<SUP>上</SUP>付と<SUB>下</SUB>付を使ってみます。
L<SUP>A</SUP>T<SUB>E</SUB>X
・・・ちょっと違うな。</FONT>
もとにもどしました。
|
ここは、普通の文字です。
少し大きくしました。
色も変えてみました。
さらに太字です
色のタグまでを閉じて、少し大きい文字に戻しました。
斜体です。
さらに大きくしてみました
上付と下付を使ってみます。
LATEX・・・ちょっと違うな。
もとにもどしました。
|
| 図９．文字装飾タグの例 |
|---|
ただし、組み合わせて使用するときに、重要な注意事項があります。これは、すべてのタグに言えることですが、タグを閉じるときは、必ず最後に開始したタグから閉じなければならないということです。つまり、<B><I>太字で斜体</B><I>はだめということです。これは、結構間違いますので気をつけてください。
ほとんどのホームページには、画像があります。ここでは、画像を扱う方法を述べます。
画像を扱うタグは、<IMG>タグです。このタグは、<BR>タグのように、数少ない閉じなくて良いタグです。タグを書いた位置に画像が張り付けられます。ただし、画像ファイルはgifかjpeg形式でないといけないので、その形式に対応したグラフィックソフトが必要です。画像の作成方法は、紙面の都合上ここでは扱えないので、すでにsample.jpgがあると仮定して、話を進めます。
<IMG>
タグの文法 |
<IMG SRC="sample.jpg" HEIGHT="100" WIDTH="50" ALIGN="left">
SRC=""には、表示する画像ファイルの名前を書きます。
HEIGHT=""には、表示する縦のサイズを、WIDTH=""には、横のサイズを指定します。
省略すれば、元の大きさで表示されます。
ALIGN=""には、画像をどこに表示するかを指定します。
ALIGN="left"とすれば、画像は左に表示され、右側に続きが回り込みます。
ALIGN="right"とすれば、画像は右に表示され、左側に続きが回り込みます。
省略すれば、続きは画像の右下に１行だけ回り込みます。
|
図１０にタグの例と、実際の表示のされかたを示します。
HEIGHT、WIDTHを省略し、ALIGNをleftにした場合です。
この場合、画像ファイルの元の大きさで表示されます。
通常は、この使い方で問題ないです。
|
WIDTH="60"に設定し、ALIGNを省略した場合です。
１行だけ右下に表示され、後は次の行になってしまいます。
WIDTHの設定に合わせて、自動的に高さも調節されます。
|
WIDTH="80"・HEIGHT="20"・ALIGN="right"とした例です。
画像が右端に表示され、文章が左に回り込みます。
また、縦横比を変えて設定したため、変に横にのびた画像になってしまいます。
|
図１０．<IMG>タグの例 |
次に、テーブルについて説明します。
テーブルとは、一般的なワープロでは罫線と呼ばれている機能ですが、htmlファイルでも、罫線を扱うことができます。ただし、いままでのタグに比べて、非常に複雑になりますので、気合いを入れてください。テーブルを実現するためには、<TABLE><TR><TD>の３つのタグを使いこなさなければなりません。まず、<TABLE>タグは、テーブルの開始を宣言します。<TR>タグは、行の開始を宣言します。<TD>タグは、列の開始を宣言します。また、htmlファイルでは罫線は、行・列の順に扱います。簡単な例を挙げると、図１１のようになります。
<TABLE BORDER="1">
<TR><TD>A1</TD><TD>A2</TD></TR>
<TR><TD>B1</TD><TD>B2</TD></TR>
</TABLE>
|
|
| 図１１．テーブルサンプル |
|---|
<TABLE>タグで、テーブルの開始を宣言し、<TR>タグで、１行目の開始を宣言します。そして、<TD>タグで、（１行目の）１列目の開始を宣言します。</TD>タグで１列目の終了を宣言し、<TD>タグで２列目の開始を宣言します。これを、各行ごとに行うことで、テーブルを作っていきます。
テーブル関係のタグには、様々な属性値がありますが、ここでは、必要最低限の数種だけを説明します。<TABLE>タグの属性の一つに、BORDERがあります。これらは、線の形状を決めるもので、すべて省略可です。BORDERは、線の太さを決めます。省略すると０とされるので、線が表示されなくなります。他には、ALIGNタグがあります。これは、すでに<IMG>タグで説明したのと同じ働きをするもので、テーブルを閉じた後の文章が、どこに来るかを示すものです。<TD>タグの属性に、COLSPANとROWSPANがあります。これらは、テーブルの中に、横長のコマとか、縦長のコマを作るのに使用します。例を図１２に示します。
<TABLE BORDER="1">
<TR><TD>A1</TD><TD>A2</TD><TD ROWSPAN="2">ROWSPAN="2"</TD></TR>
<TR><TD COLSPAN="2">COLSPAN="2"</TD></TR>
</TABLE>
|
| A1 | A2 | ROWSPAN="2" |
| COLSPAN="2" |
|
|
図１２．テーブルサンプル COLSPANとROWSPAN |
|---|
テーブルには、他にも背景に画像を張り込んだり色を変えたり、罫線と文字の間を変えたり、さまざまな属性がありますが、今回は省略します。
以上で、だいたいのタグの説明が終わったのですが、最後に３つだけ付け加えておきます。
- 一つ目は、<BODY>タグについてです。あの、１番最初にでてきたやつです。ここにも、属性が設定できます。以下にいくつか重要なものを示します。BACKGROUND="sample"は、背景に画像を指定できます。<IMG>タグと同じく、jpgファイルかgifファイルが指定できます。TEXT="#FF0000"は、BGCOLOR等と同じく、色を設定します。何の色かというと、文章のデフォルトの色です。指定しなければ、黒になりますが、赤にしたり青にしたりできます。LINK="#00FF00"も、同じように色を設定します。これは、<A>タグで囲まれたリンクの色を指定します。指定しなければ、青色になります。
- 二つ目は、<PRE>タグです。これは、ソースとかを乗せるときに便利なタグです。通常、htmlはスペースやタブ、改行を無視しますが、たとえばＣ言語のファイルをオームページに載せたいときに、いちいち改行を加えていては、きりがありません。このタグで囲まれた文章は、テキストエディタで書いたとおりに出力されます。例を図１３．に示します。
<PRE>エディタで書いたとおり
改行や、 空白が実現されます。
</PRE>
| エディタで書いたとおり
改行や、 空白が実現されます。
|
| 図１３．<PRE>タグの例 |
|---|
- ３つ目は、<HR>タグです。このタグも、閉じなくて良いタグで、このタグを書いた場所に横に線をひきます。例を見てもらう方が早いでしょう。この後に<HR>タグを書いています。
こうなります。章の区切りとかに、何かと便利かもしれません。
最後に、エラーについて説明します。
htmlファイルでは、どんなに間違えたタグを書いても、エラーにはなりません。書き間違えて意味不明になったタグは無視されます。これは、設計当時将来も増え続けるであろうと予測されたタグを、どんなブラウザでも実現するためで、意味不明のタグを無視することで、将来増えたタグを無視し、最低限のタグで表示をするための仕組みです。
タグを閉じ忘れたり、>を忘れたりしても、それ以降の文章が表示されなかったり、一部の文章が表示されないだけで、エラーはでません。表示されるはずの文章が表示されない場合、タグが間違っていないかチェックしてください。
| 3.FTPの使い方(uploadの方法) |
担当：堤佳之(tg0101@mail4.doshisha.ac.jp) |
FTP.exeの使い方
実際に作成したホームページを公開するためにはサーバーにアップロードしなければなりません．サーバーとは常時インターネットにつながったコンピュータの事を指します．Homepageが２４時間いつでも見られるのは，サーバーが常にインターネットに接続されているからです．言うなれば，サーバーにアップロード(サーバーのＨＤＤ内に目的のファイルを入れる事)して，初めてホームページは全世界に発信されるわけです．ここではアップロードのための手段として最も基本的なコマンドftp.exeの使用方法を簡単に説明します．また，実際にC:\windows\デスクトップ\html\index.htmlと...\html\images\bg.jpgをmikilab.doshisha.ac.jpにアップロードするときの手順も示します．
- ネットワークに接続
自宅のパソコンから使用する場合はダイアルアップなどでネットワークに接続する必要があります．すでにネットワークに繋がっているマシンならば必要ありません．
- 起動
DOSプロンプトや「ファイル名を指定して実行」で「ftp」と入力して実行すれば起動できます．コマンドの書式は次の通りです．
ftp [オプション] [接続するサーバーの名前]
引数なしで実行するとDOSプロンプト上に次のように表示されます．
このプロンプトが出た状態で使える主要なコマンドを下の表3.1に挙げます．
- サーバーに接続
例えばmikilab.doshisha.ac.jpに接続したい場合には次のように入力します．
ftp> open mikilab.doshisha.ac.jp
タイプミスやサーバーが停止しているなどの障害がなければユーザー名を尋ねられるのでユーザー名を入力し，次いでパスワードを入力します．ユーザー名とパスワードが正しければサーバーへの接続が完了します．
ftp> open mikilab
Connected to mikilab.doshisha.ac.jp.
220 mikilab FTP server (Version 2.1 11/28/97) ready.
User (mikilab.doshisha.ac.jp:(none)): tsutsumi
331 Password required for tsutsumi.
Password: ←パスワードを入力
230 User tsutsumi logged in.
ftp>
|
- ディレクトリの移動
送受信したいファイルのあるディレクトリにcdとlcdを使って移動します．必要があればmkdirコマンドでディレクトリを作成することが出来ます．
ftp> cd public_html
250 CWD command successful.
ftp> mkdir images
257 MKD command successful.
ftp> lcd
Local directory now C:\WINDOWS\ﾃﾞｽｸﾄｯﾌﾟ.
ftp> lcd html
Local directory now C:\WINDOWS\ﾃﾞｽｸﾄｯﾌﾟ\html.
ftp>
|
- ファイル転送モードの決定
テキストファイルを送受信する場合はasciiコマンド，バイナリファイルを送受信する場合はbinaryコマンドを使ってファイル転送モードを決定します．
- ファイルを送受信する
- ファイルを送信する
putもしくはmputコマンドを使用します．次に例を挙げます．
put index.html
mput pic1.gif pic2.gif
- ファイルを受信する
getもしくはmgetコマンドを使用します．次に例を挙げます．
get index.html
mget pic1.gif pic2.gif
ftp> ascii
200 Type set to A.
ftp> put index.html
200 PORT command successful.
150 Opening data connection for index.html (192.168.6.35,1314).
226 Transfer complete.
ftp: 82 bytes sent in 0.00Seconds 82000.00Kbytes/sec.
ftp> cd images
250 CWD command successful.
ftp> lcd images
Local directory now C:\WINDOWS\ﾃﾞｽｸﾄｯﾌﾟ\html\images.
ftp> binary
200 Type set to I.
ftp> put bg.jpg
200 PORT command successful.
150 Opening data connection for bg.JPG (192.168.6.35,1315).
226 Transfer complete.
ftp: 2300 bytes sent in 0.00Seconds 2300000.00Kbytes/sec.
ftp>
|
- サーバーとの接続を切断する
closeコマンドを使用します．
ftp> close
221 Goodbye.
ftp>
|
- ftp.exeを終了する
byeコマンドを使用します．
表3.1 主要なftpコマンド
| open サーバ名 | サーバーに接続する．
|
| close | サーバーとの接続を切断する．
|
| ascii | ASCIIファイル転送モードにする．
|
| binary | バイナリファイル転送モードにする．
|
| ls | サーバーのファイル一覧を表示する．
|
| pwd | サーバーのカレントディレクトリを表示する．
|
| cd ディレクトリ名 | サーバーのカレントディレクトリを変更する．
|
| mkdir サブディレクトリ名 | サーバーにサブディレクトリを作成する．
|
| lcd ディレクトリ名 | ローカルホストのカレントディレクトリを変更する．
|
| !dir | ローカルホストのファイル一覧を表示する．
|
| get ファイル名 | サーバー上のファイルを持ってくる．
|
| mget ファイル名1 ファイル名2 ... | サーバー上の複数のファイルを持ってくる．
|
| put ファイル名 | サーバーにファイルを送る．
|
| mput ファイル名1 ファイル名2 ... | サーバーに複数のファイルを送る．
|
| bye，quit | ftp.exeを終了する．
|
| status | 各種状態を表示．
|
| ? | コマンド一覧を表示．
|
FTPソフトの紹介
ファイル送受信の方法としてftp.exeを紹介しましたが，実際はGUIで操作できるソフトを使用したほうが簡単に出来ます．FTPソフトは窓の杜(http://www.forest.impress.co.jp/ftp.html)などで様々なものが入手できますが，ここでは研究室の公共マシンにインストールされているNextFTPの操作方法を簡単に紹介します．
- メニューで「ホスト→簡易接続」と選ぶ．
- ダイアログボックスにサーバーのアドレスを入力してOKを押せば接続できる．
(サーバーのアドレスはmikilab.doshisha.ac.jpです。)
接続した後の操作はExplorerと同じでドラッグ＆ドロップで行えます．
また，Cosmosサーバーの以下のディレクトリにもNextFtpはアップロードされていますので利用してください．
\\COSMOS\DIA shared\archives\windows\通信関係(ftpとtera term)\nxftp176.exe
