7.1 最初のhtmlドキュメント
さあ、最初のhtmlドキュメント（htmlファイル）を作ってみよう。普通、webプロジェクトのメインhtmlファイルはindex.htmlって名前になるんだ： この素晴らしい伝統を守ろう。これをするには、web-storm-10フォルダを右クリックするんだ：
そしてファイル名を入力するんだ：
WebStormがファイルを作成して、すぐにそれを開いてくれるんだ：
実際にはこれは空のhtmlドキュメント。それに表示されているのはすべてシステム情報なんだ。
本当のデータはすべて<body>と</body>のタグ内に配置されるんだ。
タグについて詳しくは次の講義で学んでね。
では、このタグの中に面白くてかっこいいメッセージを書こう。例えばこんな感じ：
千里の道も一歩から！
このメッセージをただコピーして、8行目（<body>のタグ内）に貼り付けてみて。
テキストをコピーする習慣をつけようね—間違いとか誤字が少なくなるから。今こんな感じで見えるよ：
このテキストがちょっと暗くてかっこよくないと思ったら、自分の好きなのを選んでもいいよ—これは君の最初のWebプロジェクトだから。 次の3つの選択肢を提案するよ：
- "ダークサイドは光が与えられない真の自由を与えてくれるんだよ。"
- "ダークサイドは力への道で、その力には限界がないんだ。"
- "自分の運命を選ぶ、それは闇の中にあるんだ。"
7.2 最初のプロジェクトの起動
今度はプロジェクトを「起動」して、ブラウザがhtmlファイルをどう表示するか見てみよう。
プロジェクトを起動するには、上のメニューにある緑の三角形をクリックするんだ。 その左には実行を開始するファイルの名前が書いてあるよ：
また、Shift+F10を押すことでも実行を開始できるよ。
これをやってみて、君のhtmlファイルがブラウザでどう表示されるか見てみよう。僕のはこんなふうに表示されたよ：
オレンジ色で書かれたhost部分はWebStormが実行したプロジェクトのwebサーバーだよ。
緑色で書かれたパス部分はプロジェクトのルートからindex.htmlへのパスだよ。
青色はWebStormのためのシステム情報なんだ。
赤色でハイライトされたテキストは、ブラウザが僕たちのhtmlドキュメントを元に表示したものだよ。
7.3 エラーの修正
もし何かミスをしたらどうなるのか？ブラウザやWebStormはどう反応するのかな？
9行目の最初の文字を削除してみて、WebStormの反応を見てみよう。僕のはこんな感じになったよ：
ここで何が見えるかな：
- 9行目の単語はもうタグじゃなくなったから、WebStormはそれを黄色ではなく灰色で書いているよ。
- 10行目には閉じタグ
<html>があるけど、<body>タグは閉じタグ<html>より 先に出てくるはずだよ。 だからWebStormはここにエラーを見つけるんだ。 - ドキュメントのエラー数は右上に表示されるよ – 今回は一つだね。
- エラーの場所はスクロールバーにも表示される – 右下だよ。長いドキュメントにはとても便利だね。
今度はこのファイルを実行して、エラーに対してブラウザがどう反応するか見てみよう：
ブラウザも未完の<body>タグはただのテキストだと思ってるから、普通のテキストとして表示するよ。
閉じタグ<body>がなくてもブラウザは特に気にしないんだ：タグに関する問題はもっとすごいのがあるから。
全体的には結構ちゃんとした感じになってるんだ。
GO TO FULL VERSION