HP作成編

Chap.1 HP作成編

こちらではこれからホームページ作りに挑戦する方へ”HTML言語”を使った作成方法を紹介します。
初心者向けに作ってありますので、中級者以上の方には役に立たないでしょう・・・。
また「タグなんか知らなくてもいいもんね～」と言う方は Chap2. HP UP編へおすすみください・・・・。

【お知らせ】
当コーナーではWindows95/98環境、Internet Expolorer4.0x以降を使用して作成することを前提としております。
Netscape Navigatorには極力対応した作りにしてありますが、Macに関しては全然知識がありません・・・・（泣）。
何卒御了承願います・・・。

Ⅰ.はじめに

Ⅱ.作成環境を整えよう

Ⅲ.作成に挑戦！

Ⅳ.タグと表示について

Ⅴ.ファイル名について

Ⅵ.タグ使用時の注意点・ヒント

Ⅰ.はじめに

これからホームページ作りを始める人にとって、最も簡単にホームページを作成する方法は市販の「作成支援ソフト」を使うことです。
「ホームページビルダー」や「Pagemill」などが有名ですが、これ以外にもたくさんあります。
またインターネットエクスプローラを使っている人なら付属の「Frontpage Express」や、またマイクロソフトの「Word」にも作成機能があります。
もちろんこれだけでも十分なページを作成することは可能ですが、「今後CGIやJavaScriptなども使いたい！」と言う方には、
やはりHTML言語（通称：タグ）を覚えておいた方が良いでしょう。
最初は「何じゃこりゃ～～？」とお思いでしょうが、慣れれば簡単です。
細かな手直しなどは作成支援ソフトを使うよりはるかに簡単に、そして素早く編集する事も可能になりますので・・・。
なお、こちらでは初心者向けにHTML3.2について解説しています。HTML4.0（通称：D-HTML【DYNAMIC HTML】）については解説しておりません。
★HTML [Hypertext Markup Language]★ ハイパーテキスト・マークアップ言語。 Webページなどのハイパーテキストを記述するためのマークアップ言語。

Ⅱ.作成環境を整えよう

では、早速作ってみましょう！。・・・・の前に最低限これだけは必要と言うものがあります。

１．テキストエディタ
最もシンプルで使いやすいのが「MS-メモ帳」です。スタート画面から【プログラム】⇒【アクセサリ】⇒【メモ帳】で起動させることが出来ます。
また同じく【アクセサリ】にある【ワードパッド】も使えます。
有名なエディタとしては【秀丸エディタ】などがありますが、初心者は「メモ帳」で十分です。私もいつも「メモ帳」で作成しております。

２．ブラウザ
皆さんがホームページを見るときに使っている閲覧ソフトです。
マイクロソフト社のInternet Expolorerやネットスケープ社のNetscape Navigatorなどが有名ですね。

３．FTPクライアント
なにやら聞き慣れない名称かと思いますが、これは出来あがったホームページをサーバーへアップロード（送信）する際に使用します。
詳細については「Chap.2 HP UP編」にて解説致します。現状ではテキストエディタ＋ブラウザのみを使います。

Ⅲ．作成に挑戦！

細かい話しは止めにして、実際に作成してみましょう！。

１．まず「タグ」とはどういうものか見てみましょう。
マウスポインタをこのページの任意の場所に置いて【右クリック】⇒【ソースの表示（V)】で左クリックをしてみて下さい。
メモ帳が起動して、なにやら見慣れない言葉が書いてある画面が表示されましたね。
これがこのページの「ソース」です。
各種タグを組み合わせて、こちらのページが書かれていることがわかりますね。

２．では、メモ帳を起動させて、次の内容を入力してみてください。
もちろんコピー＆ペースト（貼り付け）を使っても大丈夫です。
＊タグ部分の英数字は全て半角文字にて入力して下さい。

<html>
<head>
<title>マイ・ホームページ</title>
</head>
<body>
<center>
<font color="red" size="5">Welcome!</font>
<hr>
<font color="green" size="6">ようこそ！</font>
<br>
<font color="blue" size="7">マイ・ホームページへ！！</font>
<hr>
</center>
</body>
</html>

３．作成できたファイルに任意の名前をつけて保存しましょう。
この時、注意して欲しいのはファイル名の拡張子に必ず [ .html ] と付けて下さい。
よくわからなければ、ファイル名は [ test.html ] として保存して下さい。
保存する場所はどこでも構いません。

３-1．ファイル名に拡張子が表示されない場合。

【マイコンピュータ】⇒【表示(V)】⇒【オプション（フォルダオプション）(O)】から
【表示】タブを開いて「□ 登録されている拡張子は表示しない」のチェックを外して下さい。

４．出来あがったファイルをダブルクリックして下さい。
ブラウザが自動的に起動して、下記のように表示されれば成功です！。

５．ソースの再表示。
出来あがったページを再度編集する場合は、上記１．の方法でソース表示をして下さい。
そのまま直接編集することが出来ます。
★Netscape Navigatorを御利用の方はソース表示画面での編集は出来ないと思います。
この場合、保存したファイル名の拡張子を一度 [ .txt ] に変更してメモ帳を起動させ、上書き保存後、再度拡張子を [ .html ] に戻して下さい。

６．これであなたもタグを使ったホームページ作りの第一歩を踏み出しました。
次はどのタグが上記表示のどこに対応しているか説明致します。

Ⅳ．タグと表示について

ソース中のタグについて説明致します。

１．先程のソースを画像と合わせて、もう一度見てみましょう。

<html>・・・①

<head>・・・②

<title>マイ・ホームページ</title>・・・③

</head>・・・④

<body>・・・⑤

<center>・・・⑥

<font color="red" size="5">Welcome!</font>・・・⑦

<hr>・・・⑧

<font color="green" size="6">ようこそ！</font>・・・⑨

<br>・・・⑩

<font color="blue" size="7">マイ・ホームページへ！！</font>・・・⑪

<hr>・・・⑫

</center>・・・⑬

</body>・・・⑭

</html>・・・⑮

① <html>
これはこの文書がHTML文書であることをブラウザに認識させるものです。
言わば、HTML文書作成のお約束事のようなものです。こちらのように必ず文頭に持ってきます。

② <head>
こちらもHTML文書を作成する上での決まり事のようなものです。
<head> タグで囲まれた部分には後述の <title> タグや付加的情報を記載する <meta> タグ
また各種スクリプト言語（有名なのはJavaなど）の宣言、クッキーの設定などがありますが、「とりあえず書いておく」と覚えておいて下さい。

③ <title>
これはブラウザの左隅に表示されるタイトル名を表示するタグです。
また最後の </title> はtitleタグ適用範囲の終了を表しています。

④ </head>
上記② <head> タグ適用範囲の終了。

⑤ <body>
ここからHTML本文になりますという指定。
ここから下に書く内容がページ内に反映されます。

⑥ <center>
文字のセンタリング（中央寄せ）を指定します。
こちらで囲まれた文字は全て中央に表示されるようになります。

⑦・⑨・⑪ <font>
最もよく使うタグの一つです。表示される文字の大きさ、色、フォント種別などを指定します。
"color"の後ろはカラーネーム（red、blue、green、etc.) 、もしくは16進数（#ff0000、#0000ff、#008000、etc.) を使ったカラーコードで指定します。
"size"の後ろは文字の大きさを数値で表します。使える範囲は１～７まで。数値が大きいほど大きな文字になります。

⑧・⑫ <hr>
罫線をひくタグです。
<hr size="（数値）" color="（カラーネームまたはカラーコード）">と指定すれば、線の太さや色が変えられます。

⑩ <br>
改行をさせるタグです。
こちらで改行を指定しないと、文字が横に延々とのびて行きます。また１行スペースを挿入する <p> タグもよく使います。
<p> や <hr> タグを使用した時は、この <br> タグを使用しなくても自動改行されます。

⑬・⑭・⑮ </center> </body> </html>
それぞれ <center> <body> <html>タグ適用範囲の終了を宣言しています。

２．簡単な応用。
上記説明用ソースの中で、赤文字で書かれた部分は、あなたのお好きな内容に書き換えられる部分です。
表示される文章を変えたり、また文字の色や大きさを変えて色々と試してみて下さい。

Ⅴ.ファイル名について

作成したファイルにはどのような名前をつければよいのでしょうか？。

１．拡張子について
Windowsでは、ファイル名に付いている「拡張子」で、そのファイルの種別を判断しています。
HTML文書、すなわちブラウザ上で表示させる為に、作られた文書の拡張子は [ .html ] もしくは [ .htm ] と決まっております。
もし、この拡張子を何も指定しないで、メモ帳で作った文書を保存すると、拡張子 [ .txt ] で保存されてしまう為、
ブラウザでは、何も表示されないといった症状が発生致します。

２．ファイル名について
では、拡張子 [ .html ] [ .htm ] を使えば、前の部分はどのような名前でもよいのかと言うと、答えは、一応 "YES" と言えます。
もちろんWindows上で、ファイル名に使えない、禁止文字は使えません。
問題は、ファイル名に「全角文字」を使うかどうか、というところです。
現在のところは、全角文字を使ったファイル名（例えば [ 自己紹介.html ] など）も、対応はしているようですが、
サーバーへアップロードした際に、文字化けを起こしたり、ファイルを認識しなかったりと、何かと問題を起こす可能性があります。
基本は半角文字、出来れば「半角英数字」（例えば [ link.html ] など）で、名前を付けるようにして下さい。

３．index.htmlについて
上記手順を繰り返して、あなたのホームページが作成されていきます。
数ページの小規模なものから、数十ページに及ぶ超大作まで、色々あると思いますが、
どんなホームページでも、必ず「入り口」となるページ、つまり「表紙」が存在します。
この表紙となるページには、通常 [ index.html ] もしくは [ index.htm ] という、名前を付けます。
詳しい説明は、後ほど Chap.2 HP UP編－Ⅴ にて説明致しますが、ひとまずはこのように名前を付けて下さい。

Ⅵ.タグ使用時の注意点・ヒント

ここまで御覧になった方は「タグを使ったホームページ作り」の流れが大体わかったことと思います。
あともう少し、作成時の注意点やヒントを御覧下さい。

１．タグの表記は全て半角文字を使用します。
現在主流のブラウザでは大文字・小文字どちらでも認識されますが、一部のブラウザでは半角大文字は認識しない現象もあるようです。
とくにこだわりがなければ半角小文字で書くことが無難でしょう。

２．作成しているソース内部での改行については指定はありません。
ソース内部で改行しても <br> を使用しなければ、ブラウザ上では改行は行われません。
例えば上記練習用ソースを、下記のように書いても出力結果は同じです。

<html><head><title>マイ・ホームページ</title></head><body><center>・・・・・ ←全て１行にまとめた場合

ソースは自分が読みやすいように、適度に改行を入れておけば大丈夫でしょう。
★ごくまれに表示がずれたり、 [ _ ] （アンダースコア）が表示される場合があります。
★ <pre> タグ使用時には、ソース中の改行も反映されます。
★Javaスクリプトなどは、ソース中の改行も動作に反映しますので注意！

３．スペース（空白）について。
タグ中のスペースは削除すると動作しなくなるものあるので注意して下さい。。
<font color="red"> を <fontcolor="red"> とすると無効になります。
また文字列中のスペースは、ソース上でいくら空白をあけても半角文字１文字分しか空白があきません。
★ <p align="left"> タグ使用時は、文字列前のスペースが全て有効になります。
★ <pre> タグ使用時には、ソース中のスペースも反映されます。
★ <table> <tr> <td> タグ使用時に、スペースを空けすぎると、表示がずれることがあります。

４．範囲指定タグの終了。
上記サンプルにもあるように、 <title> <center> <font> など適用範囲を指定するタグでは、
かならずその範囲の最後で </xxxxx> を使ってタグを閉じて下さい。
このタグ閉じを忘れると、開始タグ以降全ての文字に対してタグが有効になってしまいます。
★もちろん <table> タグ使用時や、範囲の追加指定時などの例外はあります。

５．タグの互換性について。
HTML作りに欠かせないタグですが、全てのブラウザに有効と言う訳ではありません。
Internet Expolorerのみ有効なタグもありますし、Netscape Navigatorでのみ有効なタグもあります。
同じブラウザであっても、ヴァージョンの違いによって無効になってしまうタグもあります。
また、どちらに対しても有効なタグでも、表示効果が多少違うという現象も起ります。
どのブラウザを優先して作るかはあなた次第ですが、極力特殊なタグは使わないほうが無難でしょう。

６．半角カナ文字は使わない。
これはNET界の決まり事のようなものです。
普段何気なく使っている文字にも、色々な文字コードや改行コードが存在します。
半角カナ文字はある特定の文字コードでしか使えない為、一般的には使わないようにしましょう。

７．特殊文字について。
本来HTML文書中では、 < と > で囲まれた文字列は全てタグと解釈します。
ではなぜ、私が本文中で使っているタグ表記（例：<font color="red">など）が可能なのでしょうか？。
これには特殊文字という表記を使っています。
HTML文書内で、下記のように使えばタグの表記も容易に行えます。

表記したい文字 < > " &

特殊表記 < > " &

それでは、出来あがったホームページをサーバーへアップする時が来ました！。
はやる気持ちを押さえつつ、Chap.2 HP UP編へおすすみ下さい！！。
また疑問点がありましたら、Chap5. FAQ（HP編）も参考にしてみて下さいね。

Ⅶ．おまけ

１．主要タグ早見表

Copyright(C)1998-2001 "miyappu" All Rights Reserved.
miyappu@remus.dti.ne.jp