HTML（HyperTextMarkup Language）プログラムの書き方
HTML文書の全体構造
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
文書本体
</BODY>
</HTML>
記入方法
<タグ名＋“属性値”>文字列</タグ名>
<A href=“URL”>文字列</A>
<A href=“ファイル名”>文字列</A>
タグ名 意味 属性など H1〜H6 見出し 数字の小さい方が大きな見出し P 段落 align=“right”など BR 改行 終了タグなし I イタリック 斜文字 B ボールド 太文字 FONT フォント size, face, colorなど IMG 画像埋め込み src=“ファイル名”alt=“代替文字列”width, height、終了タグなし UL Unnumbered List type=“disc”/”circle”/”square” OL Orderd List type, startなど LI List Item リストの項目 TABLE Table borderなど TR Table Row rowspan(行をまたがる)など TD Table Data align,valign, rowspan, colspan, nowrapなど TH Header ボールドでセンタリング
- クライアント側スクリプト
-JaveScript
-VBScript- アプレット
- サーバー側スクリプト
-ASP (Active Server Pages)- サーバー側プログラム
-CGI (Common Gateway Interface)
-Java Servlet
- METHOD=“GET”の場合
-URLのファイル名の後に付けられる
GET /cgi-bin/sample.cgi?name=Keisuke+Kuwata&age=47&sex=male
-CGIプログラムの環境変数QUERY_STRINGに与えられる- METHOD=“POST”の場合
-CGIプログラムの標準入力に与えられる
URL（Uniform Resouce Locator )HTTPプロトコルでWebサーバにアクセスする場合
http：// user ：password@ www．mickey-son．com ：80 /dir/index．html ユーザ名 パスワード Webサーバのドメイン名 ポート番号 ファイルのパス名 省略可 省略可 省略可
FTPプロトコルでファイルサーバにアクセスする場合
ftp：// user ：password@ ftp．mickey-son．com ：21 /dir/index．html ユーザ名 パスワード FTPサーバのドメイン名 ポート番号 ファイルのパス名 省略可 省略可 省略可
自分のホームページにファイルをアップロードする場合、通常はFTPクライアントというソフトを利用して行う。しかし、出先で借りたコンピューターにそのようなソフトがないという場合、IEを使ってアップロードしたりダウンロードできる。出先で、自分のホームページを変更したいとか更新したい場合に使える。
例えば、FTP接続先が「www.mickey-son.com」、ユーザー名が「whobar」、パスワードが「pass」とする。このとき、次のようなURLをIEのアドレスバーに入力して「Enter」キーを押せばよい。
ftp://whobar:pass@www.mickey-son.com
パスワードが明示的に指定されるのがいやだという場合は、次のようなURLを入力すれば、ユーザー名とパスワードを問い合わせるダイアログが表示され、入力したパスワードは「*」の連続で表示される。
ftp://www.mickey-son.com
なお、いずれの場合も、最後に「/log」のようにFTPサーバー内のパス名を入力すれば、接続後に自動的にそのパスに切り替わる。
ftp://whobar:pass@www.mickey-son.com/log
ftp://www.mickey-son.com/log
接続すると、IEのウインドウにフォルダやファイルが表示されるので、エクスプローラと同じ操作で、ファイルのコピーや削除が行える。
ちなみに、匿名（anonymous）FTPサイトに接続する場合もこの方法が使える。例えば、マイクロソフトの匿名FTPサイトに接続する場合は、次のようなURLを入力すればよい。
ftp://ftp.microsoft.com
クライアント自身のファイルからデータを読み込む場合
file：// localhost/ c：/path/mickey-son．zip コンピュータ名 ファイルのパス名 省略可
メールを送信する場合
mailto： mickey-son@mickey-son．com メールアドレス
ニュースグループの記事を読む場合
news： mickey-son．mickey-son．com ニュースグループ名
CGI（Common Gateway interface）ファイルCGIはWebサーバーから外部プログラムを利用するための仕組みの総称である。JAVAスクリプトは、HTML内に直接記述し、ブラウザがスクリプトを実行しているが、CGIはWWWサーバーがプログラムを実行し、結果を返してくれる。掲示板やアクセスカウンタのように、HTMLだけでは不可能な動的なページを作成することができる。
CGIはあくまで仕組の総称名で実際は、CGIプログラムはC言語で書いてもバッチファイルで書いてもいいが、文字列処理に優れたPerlと呼ばれるプログラム言語で記述されていることが多く、メモ帳のみで作成できるシンプルな言語である。記述したテキストファイルをCGIとしてアップロードしアクセスすると簡単に実行される。
アスキーモード（ASII)で転送しているか。
CGIのファイルはバイナリモードで転送するとエラーになる。FTPソフトで必ずASCII（テキスト）モードに切り替えて転送を行う。
ファイルの拡張子は *．cgi になっているか。
CGIのファイルとして認識させる為には、必ず拡張子を*．cgiにする。
パーミッションは「７５５」になっているか。
CGIを動作させる為のパーミッションはすべて「755」にする。「755」とは「通常のディレクトリ、コマンド、CGIスクリプトなど。誰でも読込みと実行はできるが、書き込みは自分だけ」という意味である。 「７７７」（rwx-rwx-rwx）を与えるとエラーになる。 CGIファイルのみではなく、設置するディレクトリおよびその上位のディレクトリもすべて「７５５」に設定する。 例としてcgi-binというディレクトリの下にchat．cgiを設置する場合には以下のようになパーミッションになる。
public_html(755)rwxr-xr-x
│
└cgi-bin(755)rwxr-xr-x
│
└chat．cgi(755)rwxr-xr-x
※ファイルを設置する場所はpublic_html以下であればcgi-binディレクトリでなくても構わない。
Perlで記述されている場合には文頭のパスがあっているか。
#!/usr/local/bin/perl となる。
サーバのライブラリを使用する場合には、提供されているライブラリまでのパス及びバージョンを確認する。
例：sendmail → /usr/lib/sendmail (sendmail8.9.3)
CGIプログラムからファイルを参照する場合にはパスがあっているか。
データを書きこむファイル（*.datなど）のファイルを使用する場合には、CGIプログラムから目的のファイルまでのパスが合っているかを確認する。 パスの記述は絶対パスでも相対パスでも有効である。
よくある例： chat．datを参照する。
(例：１）
public_html
│
└cgi-bin
│
├chat．dat
└chat．cgi
chat.cgiから見たchat．datまでのパスは
相対パス ./jcode．pl
絶対パス /uhome/[user name]/public_html/cgi-bin/chat．dat
(例：２）
public_html
│
├chat．dat
└cgi-bin
│
└chat．cgi
chat．cgiから見たchat.datまでのパスは
相対パス ．．/jcode．pl
絶対パス /uhome/[user name]/public_html/chat．dat
パーミッションWindowsではファイルの拡張子(.exeなど)によって、そのファイルが実行可能か不可能かが決まるが、UNIXではパーミッションと呼ばれる特別な属性によって実行可能、不可能が決まる。Windowsの場合はパーミッションを変更する必要はないがUNIXサーバーでCGIスクリプトを実行可能にする場合はパーミッションを変更する必要がある。
CGI/SSI ファイルにはそのファイルに適正なアクセス権を与える事が必要があり、WWWサーバでは通常すべてのCGI/SSIファイルには「755」のパーミッションを付与しなければならない。
アクセス権には以下の３つがありそれぞれ数字と記号によって表示される。
アクセス権限 記号表示 数字表示 ２進数（3bits） 読み込む事ができる r 4 1 0 0 書き込む事ができる w 2 0 1 0 実行する事ができる x 1 0 0 1
ｒ：read ｗ：write ｘ：execute
例えばパーミッション「755」 この数字はそれぞれの対象に対するアクセス権限を示している。 それぞれの持っているアクセス権限の数字をたしたものが表現されている。この数字をUnixスタイルで表示すると「所有者の権限−グループの権限−その他の人の権限」の順に記載し、 「rwx r-x r-x」となる。
所有者 グループ その他の人 読み込む (4)、（ｒ） ○ ○ ○ 書き込む (2)、（ｗ） ○ ― ― 実行する (1)、（ｘ） ○ ○ ○ パーミッション 7 5 5
見てもらうだけの通常のホームページであれば「644」（自分は読み込み、書き込みができるが、グループメンバや他人は読み込みしかできない）＝「rw-r-r」の設定でOKである。
参考：パミッション設定値
CGIスクリプト：７０５ 又は ７５５
CGIが出力するファイル：６０４ 又は６４４
その他のファイル：６０４ 又は ６４４
CGIを置いたフォルダー、CGIがアクセスするファイル：７０５ 又は ７５５
Javaスクリプト（JavaScript )「JavaScript」とは、ホームページの内容の中に記述することのできるプログラム言語のひとつであり、ホームページを作成する技術として一般的に普及している。JavaScriptを利用すれば「特定のホームページを開いたときに小さな画面を別に開かせる（ポップアップウインドウ）」や、「為替や株価のような時刻によって変化するデータを表示する」など、動きのある動的なホームページの作成を可能になるなど便利なものである。
しかしJavaScriptの特徴を悪用して、パソコンの動作に支障をきたすようなJavaScriptを使ったホームページも存在するので注意が必要である。
<!--書式-->はJavaでは実行命令であるがJavaを実行できる環境にない時にはHTMLではコメントとして解釈する。
文字タイプ通常、WindowsまたはMac上で記述されたHTMLの文字コードはSJISに、UNIX上ではEUCになる。
文字サイズInternet Explorerの場合、文字サイズが「px」、「pt」指定だと、ブラウザ側での文字サイズ変更が無効。Netscape（4.x、6.xとも）は、文字サイズが「px」、「pt」指定でも、ブラウザ側で文字サイズの変更が有効。
スタイルシートでの文字サイズの指定は、mm、cm、in（インチ）、pt（ポイント）、pc（12pt=1pc）、px（ピクセル）という絶対値による指定以外にも、em（大文字の「M」の高さを基準）、ex（小文字の「x」の高さを基準）、％という相対単位での指定やlargerとsmallerによる相対サイズ指定、xx-smallからxx-largeまでの７段階によるキーワード指定といった、相対値による指定ができるようになっている。相対サイズでの指定にしておけば、ブラウザで文字サイズを変更することができる。スタイルシートは正しく使うことができれば、Web制作者にとっても便利なモノで、訪問者側にとっても見栄えがよいサイトを見ることができる。
これから、スタイルシートを導入しようと思うのであれば、文字サイズは相対的な大きさで指定するほうがよいと思う。
画像
ホームページに写真を載せる場合には、640×800ピクセル程度のJPEGで十分である。また通信速度の遅いユーザーでもホームページを快適に見ることの出来るように、 最初は小さな画像「サムネイル（元の画像を縮小した画像）」を表示し、クリックされた場合に元の画像を見せるようにする。しかしJPEGは、小さなサイズの画像を保存するのには数KBのヘッダを含むため、圧縮効果が期待できないから適していない。サムネイルには、GIFなど他の形式を選ぶと良い。色数は２５６色までに押さえた方がよい。
「ぼかし」を使うと圧縮率をより高め、よりファイル容量を軽くすることができる。ただし、中心となる被写体までぼけてしまう危険性があるので、「ぼかし(ガウス)」を利用して、背景だけをぼかすと効果的がある。
またプログレッシブJEPGをホームページ上に使用すると、最初は低解像度のぼやけた状態で表示され、サイトを訪れたユーザーに、写真の全体像を早めに分かってもらう効果があるが、ファイルが余分に重くなる。
バナーやアイコンを作るときに一般的に使われるファイル形式で表示できる色の数が256色までしかないため容量が少なくて済む。
GIFには、画像ファイルの背景を透明にして、ホームページの壁紙や背景色が透けて見えるように表示する透過GIFという機能がある。透過GIFを作るには、使用している画像ソフトで、新規作成のときに背景のカラーを「透明」にするのが一般的である。
GIFには、1つのファイルの中に多様な情報(表示時間や表示位置など)を持てるという特性がある。アニメーションGIFというのは、その特性を利用して、複数の画像を1つのGIFファイルにまとめてアニメーションを作る方法である。複数の画像を使いながらも、ファイルとしてはひとつである。
ウェブセイフカラーコード（Web safe color code）インターネット上でホームページやカラー画像などを公開すると、閲覧者のコンピュータの利用環境によっては、正しく色が再現されないことがある。このためOSやコンピュータの違いによらずどんな環境でもこれらの色が必ず表示できるように選定した216色をWebセーフカラーという。
しかし実際にはブラウザまたはOS側でディザ表示を行う場合があるためフルカラー環境以外では色が微妙に異なって表示される。
カラーコードで表示する場合は<font color="#cc3399">のようにカラーコードの前に＃を付ける。
これは赤（R)、緑（G)、青（B)の光の３原色を８bit（１６進数）で表した物であり赤=cc（２進数で1101 1101、１０進数で２０４、強度では８０％）、緑=33（２進数で0011 0011、１０進数で５１、強度では２０％）、青=99（２進数で1001 1001、１０進数で１５３、強度では６０％）を表す。
動画ホームページで動画を公開する時には以下のレベルが適当である。
サイズは３２０ｘ２４０ドット
ビットレートは１２８〜２５６ｋｂｐｓ
Blog（Web Log）Web上のlog（記録）を意味する造語。ブラウザー（ホームページ閲覧ソフト）上で、手軽に更新や書き込みができるサイトのこと。 ホームページを作成する専門的な知識がなくても、簡単に開設や更新ができる「簡易ホームページ」と言われている。
通常のホームページとブログの違いは、何といっても更新が簡単なこと。ホームページの場合、ファイル転送用のサーバーにデータを送ったうえで、画面を見ながらの調整も必要になる。ブログなら、ブラウザーのほかサービスによっては携帯電話からでも更新が可能である。日記サイトなどを中心に、徐々に増え始めている。
掲示板のようにブログサイトに書かれた記事に対して読者がコメントを書き込め、その記事と同じテーマで自分も記事を書いている場合は、発信者と読者のブログが相互にリンクを張ったりする「トラックバック機能」も搭載。同じような趣味や仕事など話題を共有する人とのコミュニケーションの輪が広がっていく。
しかしブログはユーザーが投稿記事を1つ書くと、その記事が属するカテゴリー、トップページも自動的に書き換える仕組みになっているのでほかのブログの記事に関してリンクを張り、さらに記事を書くという、ブログの最大の特徴でもある「トラックバック」も含めて、構造上サーバーの負荷が重くなってしまう。
RSS（Rich Site Summary又はreally simple syndication）Webページの要約データのフォーマットのことで、最近のブログサービスは、ユーザーが記事を投稿すると直ちにその記事まで含めたブログサイトの要約データ（サイトの見出しや、概要、著作権、更新日付などさまざまな情報）を作成し、だれでもダウンロードできるようにしている。このファイルを「RSSファイル」と呼ぶ。RSSを使用すると、Web サイトの所有者は、見出し項目のリスト、更新通知、およびコンテンツを Web 上で多数の人に簡単に配布できる。たくさんの人が関心を持つ Web サイトの多くでは、コンテンツが変更されるタイミングは不規則であり、ニュース サイト、旅行サイト、コミュニティ情報ページ、医療 Web サイト、ブログなどは、そういった Web サイトの例である。それぞれの Web サイトを何度もチェックして、新しいコンテンツがアップされているかどうかを確認するのは非常に面倒であるため「RSSリーダ」と呼ばれるソフトウェアや、RSSに対応したブラウザを使うことで、簡単にウェブサイトの更新情報を手に入れることができ、効率よく新着ページの閲覧ができる。
ほとんどのブログが、サイトの内容を要約した情報を「RSS」という規格で配信している。各サイトがRSSを使ってさまざまな情報を提供することによって、多数のサイトの更新情報を簡単に、素早く、統一された表示形式で読むことができる。 RSSには２種類のバージョンがあって、1つはNetscape Communications社が開発した「RSS0.9」の後継として開発された「RSS2.0」。 もう一つは、RSS-DEVワーキンググループという開発者集団が開発しなおした「RSS 1.0」である。 現在、日本では、「RSS 1.0」が多く使われている。
RSSファイルは単純にダウンロードしてテキストエディタなどで開いても、なんとなくWebサイトの要約になっているようにみえるが、そのまま読めるようなものではない。
RSSはXML（eXtensible Markup Language）の一形式であり、XMLを使うことで、ソフトウエアが自動で処理できる形式になっており、ほかのユーザーのアプリケーションがブログサーバーにアクセスしてRSSファイルを取得すれば、最近更新された記事の内容が簡単にわかる。
RSSファイルの活用法は二つある。一つはエンドユーザーがRSSリーダーと呼ぶ専用ソフトを使ってRSSファイルを読み込み、さまざまなブログの記事の更新情報を集めて表示するという使い方。もう一つは、ブログの記事情報を集めるブログ検索サイトが、さまざまなブログサイトのRSSファイルを読み込んで記事検索用のデータベースとして使う方法である。
RSSリーダーを例にRSSファイルの使い方を見てみてみるとエンドユーザーは、気に入ったブログのページ内に「RSS]、「PDF]、「XML」などと表示されているアイコンをクリックして、表示された画面のURLをRSSリーダーに登録する。RSSリーダーは登録されているサイトのRSSを調べ、更新されていれば、そのサイトに更新された記事があることを教えてくれると同時に、更新された記事の概要も一緒に表示してくれる。RSSリーダーのほとんどが、ティッカーと呼ばれる小さなウィンドウ表示ができ、この状態でデスクトップの端に表示しておけば、他の作業をしながらでも常に最新のニュースなどをチェックすることができる。
RSSリーダーには、大別するとウェブサイトでサービスを提供するタイプと、ソフトウェアをパソコンに導入するタイプがある。ウェブのサービスはOSの種類を問わず、どのパソコンからも利用できるのが強みで、ソフトウェアは高機能を売り物にしているものが多い。ウェブサイトでサービスは「ブログラインズ」、「PAIPO READER」など、ソフトウェア型には「ヘッドラインリーダ（Headline−Reader シェアウェア）」や「goo RSSリーダ（無料）」などがある。
このように登録しておくと、RSSリーダーは定期的にブログサーバーにアクセスし、RSSファイルを取得する。そして、以前のRSSファイルと比較し、更新された記事を探し出す。エンドユーザーがRSSリーダーの画面を開くと、更新された記事が時間順に表示され、気になった記事をクリックすればその内容が表示されるというわけである。
RSSファイルを用意するのはブログサイトに限らない。ニュースサイトなどを中心に、ブログ以外のWebページでもRSSファイルを用意するWebサイトが増えている。RSSリーダは設定の手間もほとんどいらず、いったん巡回サイトの設定さえ済んでしまえば、情報収集に時間をとられない。RSSフィードの取り込みが、コピー&ペーストやドラッグ&ドロップでカンタンかつ短時間でできることもポイント。また、収集された記事はカテゴリ別に分類されるから、情報の整理にムダな時間を割く必要もない。
具体的にgoo RSSリーダでは
「goo RSSリーダ」のメニューから［RSSサイト］−［RSSサイトの追加］を選択する。［サイトの追加］ウィンドウが表示されたら、［サイトURL］の項目に先ほどコピーしたURLをペースト。［判定］ボタンをクリックし、［RSSサイトの追加］ウィンドウが表示されたら［追加！］ボタンをクリックする。画面左側のサイト一覧に、新たな巡回先サイトが追加される。
「goo RSSリーダ」に登録されたサイトは１時間おきに自動巡回され、もし内容が更新されていれば記事一覧に追加される。巡回間隔は、メニューの［設定］−［goo RSSリーダの設定］から変更可能である。またメニューの［RSSサイト］−［キーワードの追加］から検索キーワードを設定しておけば、収集した記事一覧の中から特定の記事だけを絞り込んで表示できる。
ステータスコードウェブサーバーとのやり取りに中で表示されるエラーコード
表示コード 表示メッセージ 原因 401 Unauthorized 認証に失敗 403 Forbidden アクセス権限がない 404 Not Found 該当するページがない 500 Internal Server Error サーバー内部に障害がある 503 Service Unavailable メンテナンスや混雑などによる一時的な障害
印刷への考慮ホームページには印刷されることを考慮しないで、横幅が固定されているものがあり、このような設定がされている場合、印刷すると右端が途切れてしまうことがある。(横幅が固定されていない場合は、印刷するときに用紙に納まるように調整される。)
対策
- 印刷したいホームページがフレームで分割されていれば、印刷したい情報がある部分(フレーム)だけを印刷することで、右端が途切れないようにできる可能性がある。
- 印刷プレビューを確認しながら、ページ余白を少なくしたり、印刷の向きを「横」にして、右端までがページに納まるようにする。
- プリンタによっては、A4用紙までしか印刷できないものでも、用紙サイズとしてA4より大きいサイズを選択でき、実際に印刷するときにA4に縮小して印刷できる機能がある。この機能を使うと用紙サイズをB4にして、A4の大きさに縮小して印刷できる。
注意）
サーバーがUNIXの場合は大文字と小文字を区別するがWindowsサーバーは区別をしない。
ホームページ開設手順
