01. はじめてのHTML
JavaScriptはWebページ上で動作します。まずは、Webページを作るためにHTMLについて学びます。
HTMLとは
HTMLは、Webページを作るための言語です。<html>や<body>のような「タグ」を使って、ページの構造を表現します。ブラウザがHTMLファイルを読み込み、画面に表示してくれます。
HTMLファイルを作る
メモ帳（や好きなテキストエディタ）を開いて、↓の内容を書いてください。意味はわからなくていいので、コピペせずに自分で書いてみましょう。
<!-- battle.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
</head>
<body>
まおうがあらわれた。
</body>
</html>
できあがったら、battle.htmlという名前で保存してください。
確認しよう
battle.htmlが保存できたら、ファイルをブラウザにドラッグ・アンド・ドロップしてください。真っ白な背景に、「まおうがあらわれた。」と表示されましたか？表示されれば成功です。
これで、はじめてのHTMLが完成です！
内容の説明
さきほど書いたHTMLの意味を説明します。
<!DOCTYPE html>
1行目の<!DOCTYPE html>は、「このファイルはHTMLで書かれています」とブラウザに伝えるためのものです。HTMLファイルを作るときは、必ずこの1行から始めます。
<html> 〜 </html>
HTMLでは、<html>のような記号を「タグ」と呼びます。多くのタグは<html>のような「開始タグ」と</html>のような「終了タグ」のペアになっていて、その間に内容を書きます。
<html>タグはページ全体を囲むタグで、HTMLの内容はすべてこの中に書きます。
<head> 〜 </head>
<head>タグの中には、ページの設定を書きます。ここに書いた内容は画面には表示されません。
今回のコードでは、2つの設定を書いています。
<meta charset="UTF-8">は、Webページが文字化けせずに表示されるための設定です。<title>バトル</title>は、ブラウザのタブに表示されるタイトルです。「バトル」の部分を変えると、タブに表示されたタイトル表示も変わります。
<body> 〜 </body>
<body>タグの中には、画面に表示したい内容を書きます。今回は「まおうがあらわれた。」というテキストだけですが、次のレッスンからここに画像や表などを追加していきます。
試してみよう
<title>タグの中身や<body>タグの中身を変えてみて、実際に表示が変わるか確かめてみましょう。たとえば、「まおうがあらわれた。」を「まおうをやっつけた。」に変えてみましょう。
<body>
まおうをやっつけた。
</body>
変更が終わったら、 battle.html をブラウザに再読み込みさせてみましょう（もう一度ドラッグ・アンド・ドロップするか、ブラウザのリロードボタンを押してください）。表示内容が変更されれば成功です。
HTMLでもJavaScriptでも、学んだ内容を自分で書き換えてみて、どう変化するかを確認するのが大事です。そうすることで、何をどう変えるとどのように動作が変わるのか、直感的に理解することができます。理解があいまいだった部分がクリアになったり、理解が間違っていたことに気付いたりすることもあるでしょう。新しいことを学んだら、必ず自分で色々書き換えて試してみてください。
これまでの成果
<!-- battle.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
</head>
<body>
まおうがあらわれた。
</body>
</html>