WWWページ作成ヒント集



[ショートカット]--->  1.作成の手引き,  2.リンク集

1.WWWページ作成の手引き

※東北農試研究技術情報科作成のページ(April,1996)から引用

1.1 はじめに

ページ作成にはHTML( Hyper Text Markup Language )を用います。HTMLはタグをテキストに埋め込む方式をとっており、そのタグによって文書の表示方法を指定したり、その中のテキストなどに機能を持たせたりします。
HTMLの仕様は拡張される方向にあり、徐々に変わりつつあります。見かけの良さも大切なことですが、その中身を重視するならばごくわずかの基本的なタグを覚えれば十分対応できると思います。
HTMLで書かれたソースは誰でも見ることができるので、気に入ったページがあったらそれを真似して自分のページを改良していくことができます。ただし、コピーは著作権の侵害(特に画像などについてはあきらかに)となりますので注意してください。 ページ作成に当たってはWWWの仕組みについて若干の前提知識が必要だと思います。

1.2 WWWの仕組み

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などのプロトコルを扱うことができます。

1.3 WWWページの作成

ファイルの置き場所
WWWサーバ(httpd)が動いているサーバマシンに置かなければなりません。東北農試サイトサーバでは /home/www/htdocs がファイル置き場所のルートディレクトリと設定されています。このディレクトリ以下に東北農試ホームページのファイルを置いています。
一般ユーザがページを作成する場合は、ホームディレクトリの直下の pub ディレクトリ、あるいは public_html というディレクトリを作成し、その下に置きます。ディレクトリに実行の、ファイルに読み取りのパーミッション(他人に対する)を付けなければなりません。
以上はHTMLファイルの置き場所であり、CGIプログラムを動かすには、またそれらとは異なる所定の場所に置かなければ動きません。
(注)畜草研の場合は、ディレクトリ名が異なります

主要なタグの解説

  1. HTML言語で書かれていることを示す。 <html>.......</html>
  2. HTML文書はヘッダと本体とに分かれる。 <head>.......</head> <body>.......</body>
  3. ヘッダにタイトルを書かなければならない。 <title>.......</title>
  4. 見出しは文字の大きさを指定でき、太い文字で表示される。上下が1行空く。 <h1>.......</h1> <h2>.......</h2><h6>.......</h6>
  5. 文章中に改行を入れる。 <br>
  6. 文章を段落分けする。1行空ける。 <p> <p>.......</p>
  7. ファイル中のテキストをそのまま表示する。 <pre>.......</pre>
  8. イタリックで表示  <i>.......</i>  <dfn>.......</dfn> <em>.......</em>  <cite>.......</cite>
  9. ボールドで表示  <b>.......</b>  <strong>.......</strong>
  10. 固定幅フォントで表示  <tt>.......</tt>
  11. アンダーラインを付ける  <u>.......</u>
  12. 横罫線を引く  <hr>  <hr noshade size=nn width=nn%>
  13. HTML文書中にコメントを書く  <!-- comment -->
  14. センタリング  <center>.......</center>  <h1 align=center>.......</h1>  <p align=center>.......</p>
  15. インライン画像(文書中に画像を表示)  <img src="path/image-file-name">
  16. 画像の表示できないブラウザのために画像の内容をテキストで表現する。  <img src="path/image-file-name" alt="text">
  17. 行と画像の位置関係を変える。  <img src="path/image-file-name" align="top-or-middle">
  18. 画像へのリンク(HTML文書へのリンク(後出)と変わらない。音声、動画でも同じ)  <a href="path/image-file-name">.......</a>
  19. 背景色の指定  <body bgcolor=#RBG-number>
  20. 背景にイメージを貼り込む(壁紙)  <body background="image-file-name">
  21. 文字の色を指定する  <body text="#RBG-number">
  22. ブリンクさせる  <blink>.......</blink>
  23. 他文書への相対パスによるリンク指定方法。  同じサーバ内でのリンクはなるべくこの方法により行う。  <a href="path/file-name">.......</a>
  24. 他文書への絶対パスによるリンク指定方法。  WWWサーバに設定されているルートディレクトリから記述する方法。  <a href="/path/file-name">.......</a>
  25. 他サーバの文書へのリンク指定法。URLを指定  <a href="protocol://host.domain/path/file-name">.......</a>
  26. 同じサーバ内の一般ユーザ作成文書へのリンク指定法  <a href="/~login-name/path/file-name">.......</a>
  27. 他サーバの一般ユーザ作成文書へのリンク指定法  <a href="protocol://host.domain/~login-name/path/file-name">.......</a>
  28. 文書中のリンクされる場所に名前をつける。  <a name="anchor-point-name">......</a>
  29. 同一文書内でのリンク  <a href="#anchor-point-name">......</a>
  30. 他文書の特定場所へのリンク  <a href="path/filename#anchor-point-name">.......</a>
  31. 番号なしリスト(箇条書き)  <ul> <li>.......<li>.......<li> ・・・・ </ul>
  32. 番号つきリスト(箇条書き)  <ol> <li>.......<li>.......<li> ・・・・ </ol>
  33. 定義型リスト(用語(DT)と定義(DD)からなる。定義部分がインデントされる)  <dl> <dt>.......<dd>.......<dt>.......<dd> ・・・・ </dl>
  34. 整形済みテキスト <pre>.......</pre>
  35. 引用文(インデントされる) <blockquote>.......</blockquote>
  36. 作成者の連絡先を示す。 <address>.......</address>
  37. E−Mailの送付。 <a href="mailto:E-Mail-Address">....</a>


2.リンク集

※下記のリンクは主にYahooから引用しました。

  • 初めてのホームページ講座 - 初心者向けの「逆引きHTMLリファレンス」は、初めてHP作成の参考に最適。そのほかJavaScript、ダイナミックHTML、CSSの解説等。

  • WebSite作成支援 - WWW の仕様を策定している団体である W3C の勧告文書 (Recommendation) に則って HTML, CSS, XHTML を解説。「HTMLスピードラーニング」は初めてHPを作成するとき便利。

  • ホームページ実験室 - ホームページ作りのお手伝い。HTMLの基本からJavaアプレット、Javaスクリプト、VBスクリプトの説明やCGIを使って アクセスカウンターを付ける方法などを説明。

  • とりあえずホームページを作る - HTMLで使われるタグについて簡単に解説。

  • ダサいホームページ作成マニュアル - こんなホームページは宜しくないのでは?という「ありがち」な事例集。ちょっとくだけたサイトだが、初心者には耳が痛い指摘が多い。洗練されたホームページを作りたい人には一見の価値あり。

  • カラーチャート - 約140色カラーサンプルと16進法表記と色名の一覧表示。ブラウザ上でバックグランド色を試すことが出来る。

  • ホームページのためのColoring Room - 画像に頼らず、 色でホームページを彩りたい人のためのサンプル集。自分のイメージに合った背景やテキスト色をコピーしてそのまま使うことができる。

  • The Background Sampler - 壁紙に利用する画像のサンプル集。コピーしてそのまま使うことができる。


    Questions and comments are welcome to Kota Motobayashi.
    2001-9-7