1.WWWページ作成の手引き |
| ※東北農試研究技術情報科作成のページ(April,1996)から引用 |
WWW( World Wide Web )は、テキストばかりでなく画像、またクライアントにおいてサポートがあれば音声、動画も扱えるハイパーテキストを使った高機能な情報提供システムであります。CGIプログラムを使えば対話的やり取りもでき、情報収集もできます。WWWを実現するソフトウェアは、クライアント・サーバシステムによっており、CERNで最初に作られました。
ハイパーテキスト
直線的な読書を想定しない文書であり、文書本体とリンクから構成されます。文書中のリンクされた場所をマウスでクリックすると関連する他の文書を参照することができます。MS-Windows のヘルプや Macintosh のハイパーカードもハイパーテキストです。
クライアント・サーバシステム
サーバとはサービスを提供するソフト、クライアントとは提供されたものを利用し、ユーザインターフェースとなるソフトです。近年のネットワーク環境下で使われるソフトのほとんどがこのような二本立て構成となっています。
WWWでは、サーバには、NCSA−httpd、CERN−httpd、その他が使われています。クライアントはWWWブラウザと呼ばれ、Mosaic、Lynx、Netscape Navigator、Inernet Explorer その他多数あります。
URL( Uniformed Resource Locator )
ブラウザでWWWページをオープンするとき、また他のWWWサーバにあるページ、ファイルをリンク付けするときに用いる表記法で、情報のアドレスと言うことができます。URLの一般形式およびその例は次のとおりです。[ ] 内は通常省略され、必要なとき付けます。
scheme://host.domain[:port]/path/file-name[#anchor][?keyword]
http://www.aist-nara.ac.jp/IS/home-en.html
---- ------------------- ---------------
↑ ホスト名.ドメイン名 ↑
プロトコル名 ディレクトリとファイル名
接続プロトコル
WWWページを表示するには、「パソコンなどローカルマシンのブラウザがURLでもって接続し、get要求を出す。リモートのサーバはHTML形式のデータを返す。ブラウザは受け取ったデータを処理して画面に表示する。」という手順をとります。このときに使われるプロトコルがhttp( Hyper Text Transfer Protocol )です。
ブラウザは、WWWのプロトコルhttpばかりではなく、gopher、ftp、mail(SMTP)、news(NNTP)、telnetなどのプロトコルを扱うことができます。
ファイルの置き場所
WWWサーバ(httpd)が動いているサーバマシンに置かなければなりません。東北農試サイトサーバでは /home/www/htdocs がファイル置き場所のルートディレクトリと設定されています。このディレクトリ以下に東北農試ホームページのファイルを置いています。
一般ユーザがページを作成する場合は、ホームディレクトリの直下の pub ディレクトリ、あるいは public_html というディレクトリを作成し、その下に置きます。ディレクトリに実行の、ファイルに読み取りのパーミッション(他人に対する)を付けなければなりません。
以上はHTMLファイルの置き場所であり、CGIプログラムを動かすには、またそれらとは異なる所定の場所に置かなければ動きません。
(注)畜草研の場合は、ディレクトリ名が異なります
主要なタグの解説
- HTML言語で書かれていることを示す。 <html>.......</html>
- HTML文書はヘッダと本体とに分かれる。 <head>.......</head> <body>.......</body>
- ヘッダにタイトルを書かなければならない。 <title>.......</title>
- 見出しは文字の大きさを指定でき、太い文字で表示される。上下が1行空く。 <h1>.......</h1> <h2>.......</h2> : <h6>.......</h6>
- 文章中に改行を入れる。 <br>
- 文章を段落分けする。1行空ける。 <p> <p>.......</p>
- ファイル中のテキストをそのまま表示する。 <pre>.......</pre>
- イタリックで表示 <i>.......</i> <dfn>.......</dfn> <em>.......</em> <cite>.......</cite>
- ボールドで表示 <b>.......</b> <strong>.......</strong>
- 固定幅フォントで表示 <tt>.......</tt>
- アンダーラインを付ける <u>.......</u>
- 横罫線を引く <hr> <hr noshade size=nn width=nn%>
- HTML文書中にコメントを書く <!-- comment -->
- センタリング <center>.......</center> <h1 align=center>.......</h1> <p align=center>.......</p>
- インライン画像(文書中に画像を表示) <img src="path/image-file-name">
- 画像の表示できないブラウザのために画像の内容をテキストで表現する。 <img src="path/image-file-name" alt="text">
- 行と画像の位置関係を変える。 <img src="path/image-file-name" align="top-or-middle">
- 画像へのリンク(HTML文書へのリンク(後出)と変わらない。音声、動画でも同じ) <a href="path/image-file-name">.......</a>
- 背景色の指定 <body bgcolor=#RBG-number>
- 背景にイメージを貼り込む(壁紙) <body background="image-file-name">
- 文字の色を指定する <body text="#RBG-number">
- ブリンクさせる <blink>.......</blink>
- 他文書への相対パスによるリンク指定方法。 同じサーバ内でのリンクはなるべくこの方法により行う。 <a href="path/file-name">.......</a>
- 他文書への絶対パスによるリンク指定方法。 WWWサーバに設定されているルートディレクトリから記述する方法。 <a href="/path/file-name">.......</a>
- 他サーバの文書へのリンク指定法。URLを指定 <a href="protocol://host.domain/path/file-name">.......</a>
- 同じサーバ内の一般ユーザ作成文書へのリンク指定法 <a href="/~login-name/path/file-name">.......</a>
- 他サーバの一般ユーザ作成文書へのリンク指定法 <a href="protocol://host.domain/~login-name/path/file-name">.......</a>
- 文書中のリンクされる場所に名前をつける。 <a name="anchor-point-name">......</a>
- 同一文書内でのリンク <a href="#anchor-point-name">......</a>
- 他文書の特定場所へのリンク <a href="path/filename#anchor-point-name">.......</a>
- 番号なしリスト(箇条書き) <ul> <li>.......<li>.......<li> ・・・・ </ul>
- 番号つきリスト(箇条書き) <ol> <li>.......<li>.......<li> ・・・・ </ol>
- 定義型リスト(用語(DT)と定義(DD)からなる。定義部分がインデントされる) <dl> <dt>.......<dd>.......<dt>.......<dd> ・・・・ </dl>
- 整形済みテキスト <pre>.......</pre>
- 引用文(インデントされる) <blockquote>.......</blockquote>
- 作成者の連絡先を示す。 <address>.......</address>
- E−Mailの送付。 <a href="mailto:E-Mail-Address">....</a>
2.リンク集 |
| ※下記のリンクは主にYahooから引用しました。 |