今回は、HTMLの基本構造を作っていきたいと思います。
一度覚えてしまえば簡単にできるので、やっていきましょう。
と、その前に・・・
HTMLについて超絶簡単に説明。読み飛ばして頂いてもOKです。
HTMLはマークアップ言語と呼ばれるものです。
って、大体のサイトには書いてありますが、わけわからないですね。
プログラム言語は、プログラムすればその通りに動作してくれますよね。
でも、マークアップ言語はそんな事できません。これはタイトルです、これは文字です的なものを表示する付箋みたいなものです。
この表示を「タグ」といいます。
早速作ってみましょう
では、早速作っていきましょう。今回作成するのはこちら。
というわけで作るます。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>はい完成です。
上記のコードをメモ帳にコピー＆ペーストし、名前のあとに付ける拡張子を「.html」で保存してください。
簡単に説明していきます。
まずは、<!DOCTYPE html>です。これは、「HTMLで表記しますよ〜」的なものだと思ってください。
次に
<html></html>です。この<html>と</html>の間にいろんなタグを書き込んでいきます。基本的にほとんどのHTMLに使われているタグは、始まりと終わりの間に記述します。また、タグの中に別のタグを入れることもできます。
続いて、<head></head>です。詳しくは別のときに説明しますが、ここには実際の画面には表示されない、決まり事的なものを記述していきます。
実際の画面に表示されるタグは、<body>と</body>の間に記述します。ここに言葉や画像の名前などをマークアップしていくことで、ブラウザで情報の表示をすることができます。
これで真っ白で何にもない画面の完成です。
ブラウザで開くと、ファイル名のタグがついた真っ白の画面が出ます。
まとめ
HTMLはプログラム言語ではなく、マークアップ言語です。
拡張子が「.html」のファイルをブラウザで開くことで、情報を表示することができます。
今回は触りの部分をお伝えしました。
今後、cssやjavascriptをつかったホームページを作るときの基礎になるので、覚えておくと便利です。