Home >> 映像配信入門 >> 第4章 とりあえず作ってみよう

第4章 とりあえず作ってみよう

1.基礎タグ

さて前項でホームページ用ファイル作成ソフトのことをお話ししました。何を選ぶかは皆さんの自由ですが、その前に何ごとも基本が大切    というわけで、特別なソフトウェア抜きで簡単な HTML ファイルを作ってみましょう。
最初は「何これ、面倒くさそう」と思われるかも知れませんが、ここでは決して複雑なことまで踏み込みませんので、ちょっとつき合ってみて下さいね。
まずはテキストファイルを作成する準備です。Windows の方はメモ帳(Notepad)を、Macintosh の方は SimpleText を起動して下さい。Mac OS X の方は TextEdit を起動して、くどいようですが必ず標準テキスト編集モードにしておいて下さい。既に他のテキストエディタをお使いの方は、それを使っても構いません。
メモ帳の起動
起動したら、まだ何も入力されてない真っ白な画面になっていることを確認して下さい。なってなければ、メニューから "新規作成" を実行しましょう(以後、説明は Windows のメモ帳を想定して書いていますので、他の場合は適当に読み替えて下さい)。
さて、いよいよ入力です。まず、次のように打ち込んで下さい。必ず半角で打つのですよ。以後、タグを打つときは気をつけましょう。
<html>
</html>
これがホームページ用の HTML ファイルの最も基本となる<html>タグです。言うならば、
この <html> から </html> までが HTML 文書ですよ
という意味です。後者のように </なんちゃら> というのを、特に閉じタグと言います。<html> のように「ここから○○」というタグに対し、「ここまで○○」という意味をなすタグのことです。タグには閉じタグのあるものとないものがあります。これはまあ、おいおい説明を読んでいけば分かります。
打ち込んだら、とりあえず保存しましょう。html ファイルは拡張子が html か htm でしたね? そこで好きな場所に、test.html という名で保存します。はじめはデスクトップに保存するのが分かりよいかも知れません。
このとき test.html は必ず半角英文字にして下さい。以後も、ホームページ作成用にファイルやディレクトリ(フォルダ)を作るときは、半角英文字にしましょう。また、小文字だけを使うと決めておいた方がいいです。なぜなら、サーバーに良く使われている Linux 系 OS では、ファイル名などで小文字と大文字が区別されるからです。ですから、統一しておいた方が間違いが少ないのです。

ここで、良ければいったんメモ帳を閉じて、今作った test.html のアイコンを確かめてみて下さい。何となく、ホームページ用ファイルのアイコンみたいになってませんか? ダブルクリックしたら、ブラウザで真っ白な画面が開くでしょう。これはもう、内容こそないけど、ホームページ用の HTML ファイルなのです。
icon
確認したら、ブラウザを閉じて、再びメモ帳や SimpleText などで開いて、続きを書きましょう。
さて、HTML 文書には、ヘッダの部分と本文部分があります。
ヘッダの部分には、「ブラウザの画面に表示するわけではないが、このファイルに関する重要な情報」が書き込まれます。例えば、そのファイルを読み込むブラウザに対して通知したい重要な事柄なんか、ここに書き込みます。
本文部分は、文字通り「ブラウザ画面に表示する本文」です。
さて、「ここからここまでがヘッダ」「ここからここまでが本文」というのを伝えるには、それぞれ<head>タグ、<body>タグを使います。先ほどの入力に、以下のようにつけ足して下さい。
<html>
<head>
</head>
<body>
</body>
</html>
先の <html>タグだけのファイルを HTML ファイルの基本とするなら、これは HTML 文書の基本です。文書は <body>タグがないと表示できないし、 <body>タグは特別な例外がない限り <head>タグと組で使われるものだからです。
head の部分に情報を記してみましょう。ここでは <title>タグを使います。
これは文字通り、そのファイルのタイトルです。といっても、ブラウザの画面内に表れるわけではありません。そのファイルを表示した時の、ブラウザの外枠の左上に表示されます。図をご覧下さい。
タイトル
他にもタイトルの重要な機能としては、そのページをお気に入り(Netscape では、ブックマーク)に登録した時の見出しになる、というのがあります。また、あなたのホームページが Google などの検索サイトでリストアップされた時も、タイトルが見出しとなります。ですからタイトルは、必ずつけるようにしましょう。
さあ、以下のように付け足してみて下さい。閉じタグを忘れないように!
<html>
<head>
<title>テストのページ</title>
</head>
<body>
</body>
</html>
本文も書いてみましょうか。せっかくだからホームページらしく、リンク機能をつけてみましょう。
<html>
<head>
<title>テストのページ</title>
</head>
<body>
こんちは! まだ何もないので、とりあえず <a href="http://www.google.com/intl/ja/">Google</a> にでも行って、他のホームページを探して下さい。
</body>
</html>
Google という文字列をまた別のタグ(<a href...>)が囲んでいますね? これがリンクを示すタグというのは何となく分かるでしょうが、詳しくは後で説明します。とりあえずこの通りに打って、上書き保存しましょう。
さて、メモ帳を閉じていま作ったファイルをダブルクリックします。ブラウザが開いて、下図のような画面になりましたか?(クリックしたら別ウィンドウで大きく表示されます) ならない場合は、どこかに打ち間違いがあるのです。もう一度、確かめてみましょう。
(なお、たまに間違いなく打っても文字化けする場合があります。この場合は、InternetExplorer ならメニューの「表示」→「エンコード」→「日本語(自動選択)」を、Netscape なら「表示」→「文字コード」→「自動判別」→「日本語」を実行してみて下さい。)
test.html
Google の文字をクリックして Google に行けるかも確かめましょう。
これであなたもホームページ用の HTML ファイルを作ったことになります。あとは出来上がったファイルを記念にとっておくなり、捨てるなりして下さい。
とりあえず、あなたが今後、テキストエディタではなく WYGIWYG 型のエディタを使うにしても、必要に応じてソースを直接いじる場面は出てくるものです。その時のためにも、以下の5つだけは必ず覚えておきましょう。
1.タグには閉じタグのあるものとないものがある。
2.タグは半角で打つ必要がある。
3.HTML 文書は html、head、body の3つのタグを基本とする。
4.<head>タグ内には <title>タグによるタイトルの指定が必須である。
5.ブラウザには <body>タグ内に書かれたものが表示される。

2.全体構成

上記以外に(たとえ今後 WYGIWYG 型エディタで作業するとしても)是非覚えて頂きたいタグに、<a>と<img>というのがあります。<a>は上にも少し出てきましたが、リンクに関するタグ、<img>は画像に関するタグです。
ただし、これらを説明する時に絶対リンクと相対リンクという概念が必須となりまして、それを理解するためにはホームページの全体構成の観念を把握する必要があるのです。ですから、その点について先にお話ししましょう。
あなたがどこかのサーバーにホームページ用ファイルを置かせてくれるよう手続きをした場合、多くの場合サーバー内にあなた専用のディレクトリが貸し出されます。このディレクトリってのはフォルダと同義語と考えて下さって構いません。
例えばあなたが www.xx.com というサーバーに hoge というユーザー名で申請して受け入れられた場合、そのディレクトリの URL は
http://www.xx.com/hoge/
となる場合が多いのです。www.xx.com サーバー内に置かれた hoge さんのお部屋というような意味ですね。hoge が ~hoge になったりする場合もありますが、そういうサーバーごとの細かな仕様の違いは、略ってことで。
そこであなたは自分の部屋であるディレクトリ内にホームページを構成しようとされるわけですが、この場合、いくつかのサブディレクトリ(ディレクトリ内のディレクトリ)を作るのが普通です(余談ですが筆者がホームページを最初に作った時の無料サーバーはサブディレクトリが作れない仕様で、かなりややこしい思いをしました)。
例えばあなたのホームページに「自己紹介」「映画」「お料理」「リンク集」というコーナーがあったとします。その場合は、

  1. 各コーナー用のファイルを置くサブディレクトリを作って、
  2. それぞれのサブディレクトリ内のファイルとトップページ用のファイルを相互リンク
……させます。ただし画像ファイルなどは    壁紙など、いくつかのファイルで共用するものですから    専用のサブディレクトリを作っておきます。
言葉ではピンと来ないかも知れません。図にするとこんな感じです。
ディレクトリ構成
このような構成で、例えばトップページの「自己紹介のコーナーへ」という文字列をクリックすれば、me というサブディレクトリ内の然るべきファイルへジャンプして、そのファイルの「Top へ」という文字列をクリックすればトップページに戻る……という寸法です。
ところで、上の図では、トップページに index.html という名前がついていますね? これはホームページ構成におけるトップページ名の決まりみたいなもので、サーバーによっては index.htm か index.html を必ず置くように義務づけているところもあるぐらいです。index.html というのは、ホームページを構成するディレクトリのデフォルト(初期設定)ファイルとされてますから、例えばあなたのブラウザに
http://www.xx.com/hoge/
と打ち込めば、ほとんどの場合
http://www.xx.com/hoge/index.html
http://www.xx.com/hoge/index.htm
の、どちらかが表示されます(「ほとんどの場合」と書きましたが、場合によってはホームページの作り手側でそうじゃないようにすることもできるのです。でも、それは例外と考えましょう)。
あなたがホームページを作るときには、まずあなたのパソコン内にホームページ用のディレクトリ(フォルダ)を作ります。次にその直下に、index.html ファイルを作ります。更にいろいろサブディレクトリ(サブフォルダ)を作って、全体構成を整えます。それからいろいろ頑張って、最終的に全てのファイルが出来上がったら、ホームページ用ディレクトリの中身を    サブディレクトリの構成もそのままに    サーバー上に置かれたあなた専用のディレクトリ内に置くわけです。
がんばって管理しやすい構成を考えましょう。

ひとくちメモ
文字コード
基礎タグの話をしてるとき、ちょっと「文字化け」について触れましたね? 人のホームページを見ていても、たまにこいつに悩まされた経験はあるんじゃないでしょうか?
この「文字化け」について理解するためには、文字コードの概念を把握せねばなりません。
先に、テキストファイルについて語る時、「文字データでのみ構成されたファイル」と言いましたが。文字データといっても、パソコンのハードディスクやメモリの中に「あいうえお」なんて文字が直接刻まれるわけではありませんよね。なんだかんだ言ってもコンピュータが内部的に読み書きできるのは数値だけなんですから、「特定の文字に対して特定の数値の並びを当てはめる(またはその逆)」ということをやっているに過ぎません。
このように文字を表す数値の並びを文字コードと言います。
これが日本語のように全角文字列を扱う場合、規格が統一されてないんです。だから、ブラウザがあるページを読み込む時に、間違って別の規格で読み込むと、文字化けが起きるわけです。例えば "あ" は Shift-JIS という規格では16進数で 82a0(10進数で33440)ですが、EUC という規格では a4a2(10進数で42146)になります。
こうした文字コードの規格にはさまざまなものがありますが、ホームページ作成に使われる日本語の漢字コードは、以下の3つが代表的なものといえます。
JIS
Shift-JIS
EUC
この他、近年注目されてきた文字コード体系に Unicode というものがあります。これは上記3つのコードに比べ遙かに多くの漢字を表現できるスグレモノで、現在はその中でも UTF-8 という規格が主流となっています。ただし UTF-8 を扱えるソフトウェアはまだ限られており、古い環境では認識できないことの方が多いですから、必要がない限り JIS、Shift-JIS、EUC のどれかで書くのが良さそうです。
もちろん、ホームページを作る上で「今使ってる文字コードはこれだから、この数値がこの文字を表して……」なんて意識する必要はありません。(世の中広いから断言はできませんが)特定の文字コードを暗記してる人なんて皆無に等しいと思えます。言語を扱うソフトウェアならば絶対何らかの文字コードを使ってるわけですから、大切なのは、必要とあらばいま使ってる文字コードは何かが分かって、文字化け対策ができる機能なのです。
HTML ファイルの場合は、<head>タグ内に以下のようなタグを挿入して、そのファイルで使われている文字コードをブラウザに教えることで、文字化けを防ぐことができます(順に、JIS、Shift-JIS、EUC です)。
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
上記のタグを、テキストエディタなら、今使ってる文字コードが分かれば手動で打ち込むことができます。WYGIWYG 型なら、自動的に挿入してくれるのが、良いソフトウェアといえます。
ひとくちメモ
index.html
上記のようにホームページにおいて、あるディレクトリのデフォルト(初期設定)ファイルは index.html か index.htm と決まってるのが一般的です。ですからディレクトリ名のみを指定した場合はどちらかのファイル(多くの場合は html の方)を探し出して開くのですが……もし、どちらも無かった場合はどうなるのでしょう?
InternetExplorer や Netscape では、下図のようにディレクトリ構造そのものが示されます(つまり、ディレクトリが開きます)。
ディレクトリ構成
これはいかにも格好悪いし、セキュリティの面でもあまりよろしくありません。ですから、ホームページを置くディレクトリ内には    サブディレクトリであっても    内容は空でもいいから、index.html という名のファイルを置くようにしましょう。
親切なサーバーでは、index.html が無い場合、エラー画面になってディレクトリを開かないでくれるところもあります。その場合でも今後サーバーを引っ越さねばならない場合などを考えて、index.html を作っておくに越したことはありません。
なお、サーバーによっては .htaccess ファイルというのをユーザーが好きに扱うことで、ディレクトリ表示を禁止したり、index.html 以外をデフォルトファイルにすることもできます。ただしこれは、ホームページ運営の上では、中級以上のテクニック。「そういうことも出来る」ぐらいに受け止めておきましょう。

トップへ次へ戻る
ライブシネマ