Chapter2:実際に作ってみましょう
■さっそく作ってみましょう
ではまずデータ保存用のディレクトリを新しく作ります。ここでは「www」という名前にします。この一連の操作が解らない人はこちらを参照してください。
出来たら自分が使っているコンピュータでテキストエディタを起動します。いろいろありますがここではWindowsのnotepad（メモ帳）でお話を進めますね。
さて。起動できたら以下のように文字や記号を書いてみて下さい。8行しかありませんが間違わないようによーっく気をつけて入力してくださいね。間違うと表示が変になってしまいます。注意するのはタグは全て半角の英数記号だということです。間違って全角文字で打ってしまわないように気をつけましょう。
|
うまくできましたか？入力できたら名前を付けて保存します。
先程作っておいた保存用の"www"ディレクトリの中にファイルを保存しましょう。今回は保存するファイルの名前をとりあえずindex.htmlにします。
このindex.htmlという名前はFC2WEB
を含めほとんどのサーバで最初に表示される物になりますので覚えておくとよいでしょう。
（正確にはご利用になるサービスの設定によって異なる場合もありますのでFC2WEB以外のサービスでの詳細設定に関してはそれぞれ該当するサーバの管理者に事前にお問い合わせくださいね）
＊メモ：サーバってなにですか？
「サーバ」の意味がよくわからない場合はとりあえず「あなたが作ったファイルをインターネットで見られるように保存する場所」みたいな物と思っておいてください。対照的にあなたの手元にあるコンピュータは「ローカル」と表現されます。「ローカルのデータはきちんと表示されますか？」とゆう場合は「あなたのコンピュータにあるデータはきちんと表示されますか？」と言う事ですね。
では表示してみましょう。今保存したindex.htmlを開いてみてください。ファイルを表示して確認する方法はいくつかありますがウインドウズでもマッキントッシュなど複数のOSで使える方法はブラウザのアイコンにhtmlドキュメントをドラッグ・アンド・ドロップでおっけい。うまくいけば下のような感じで表示されると思います。きちんと開けましたか?
|
「index.htmlというファイルが無いよ」という人や「テキストエディタで文字がそのまま表示されちゃう」と言う人は拡張子の表示設定を見直してください。また「真っ白だよ」とか「表示はされるけど変だよ」って言う人は書いたタグが間違っていないかもう一度見直しましょう。
■作ったファイルの内容を再編集する
では先程作ったファイルを再度編集してみましょう。まずは先程製作して保存した"index.html"をクリックしてインターネットエクスプローラーで表示してみてください。
|
index.htmlが無事表示できたら表示された画面の適当なところにポインタを持っていきマウスの右ボタンをクリックして下さい。表示された中から"View Source"(ソースを見る)を選んで下さい。notepadで先程書いたソース(内容ですね)が表示されると思います。
保存したファイルの内容を再度編集する時はこの方法を使って編集してみてください。って言う事で以後は編集時のこの説明は省略しますね。
では編集してみましょう。赤い文字の部分が編集・追加されるタグや文字です。先程と同じように間違わないように注意しつつ編集して下さいね。
|
編集が終わったら前回と同じように保存してください。保存ができたらもう一度ファイルをクリックして表示してみましょう。ウインドウを開いたままの場合はブラウザに搭載されている"Refresh(ファイルを再読み込みする機能)"を使用しても良いでしょう。うまくいけば下のような感じで表示されると思います。
|
どうでしょう。うまくいきましたか？
もしも表示がうまくいかない場合はきちんと表示されるようになるまでソースを見直して修正してください。時間がかかってもかまいません。このように「間違いを探し出し修正をする」という行為は今後HTMLに慣れてくるにしたがって(いろいろなバリエーションができるようになるにつれて)ますます大切になってきます。
でも安心してくださいね。最初は時間がかかっても「おかしな所をきちんと直す」癖をつけておけば自然に「ここがこうなっている時はきっとあそこがおかしいんだよね」っていうのが解るようになってきます。逆にいい加減に終わらせていると後日大きなファイルを作るようになってから直し方が解らずにきっと苦労する事になるでしょう。
最初が肝心です。がんばっていこう。
常に意識しておきたい事5ポイント
。。。と言っても最初は何がなんだかわからないのが普通です。 そこで初心者がミスしやすい所をあげておきます。 要点と思われる所を意識しながら進めて行けば何も考えていないよりはきっと楽に早く進んでゆけるのではと思います。
■できるだけ早く覚えたいHTMLドキュメントの大切なルール
- 基本構造を覚えて文書が破綻しないようにしましょう。
○最初はテンプレートを作っておくとミスも少なくてらくちんです。 - 各ページのタイトルを忘れずにつけましょう。
○これもテンプレートに先に書いておくとらくちんです。 - ページに表示する内容を書く場所を覚えましょう。
○内容は<body>から</body>の間だけに書きましょう。 - タグは「二つで一組」として使うようにしましょう。
○タグは「開始タグ」と「終了タグ」の二つで一組になっています。 - ファイル名は半角英数字のみで付けましょう。
○ファイル名に日本語（全角文字）を使わないようにしましょう。
基本的な構造をもったHTMLドキュメントを書いておきますので合わせて参考にしてください。 この内容はコピーしてそのまま使えますのでよろしければ練習やテンプレートに役立ててくださいね。
<html>
<head>
<title>各ページのタイトル</title>
</head>
<body>
<h1>ページの見出し</h1>
<p>文章１</p>
<p>文章２</p>
<hr>
<address>連絡先（メールアドレス）</address>
</body>
</html>■お疲れ様でした
これでChapter2はとりあえず終了です。ここまで書いてきた事がなんとなくでも理解できれば足がかりがつかめたも同然です。今後はお約束事を含めて徐々にいろいろなタグや書き方を必要に応じて増やしていけばよいのですもの。
htmlファイルは基本的に今回書いたものの組み合わせやバリエーションで作られています。内容が多くなるとタグや文字が増えてきて難しく見えますがこうしてみるとなんとなくできそうでしょう。
