HTMLでサイトを作ろう!
どうも1998です。今回はHTMLを使って簡単な
ウェブサイトを作る方法をご紹介します。
まず、HTMLファイルを作りましょう。(今回は、VScodeを使用します)
できましたか?まだ何も表示されてないと思います。
では、今からhtmlの文法をご紹介します。
<h1>Hello World!!</h1>
まず、このように記述してみてください。
まず、h1というのは文字をh1の大きさで
表示するという意味を持っています。
そして矢印括弧で囲います。
このようなものを、タグと言います。
タグの形式には二つの種類があり、開始タグと
終了タグの二つがあります。
終了タグは、そのタグの名前の後ろに/(スラッシュ)を入れる
ことによってできます。
そして、開始タグと終了タグがそのタグの効果の範囲になります。
この場合では、
Hello World!!がh1の大きさで表示されます。
これで完成!と思いきや、HTMLとしては完成していません。
HTMLの骨組みを完成させましょう。
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Hello World!!</h1>
</body>
</html>
このようになります。
各タグの意味を紹介していきます。
まずhtmlタグです。このタグの意味は、HTMLをこの中に記述します。
といった意味です。もちろん必須ですので、覚えておきましょう。
次は、headタグとbodyタグです。headの中にあるものは
表示されず、bodyの中にあるものは表示されます。
人間で例えるとheadが内臓などの器官、bodyが髪の毛や目などになります。
(変な例えですみません)
ですので、headタグには設定などを記述します。
<meta charset="utf-8">
上記のコードは、htmlを普通に表示すると文字化けする可能性があるので
文字の形式を定義しています。これに関しては覚えなくて構いません。
僕もついこの間までコピペしてました。
次に、bodyタグには先ほども言ったように、表示する部分を記述します。
今回の場合は、
<h1>Hello World!!</h1>
を記述します。
書いたhtmlを表示するには、htmlファイルを開くことによって
できます。また、LinuxやPowerShellのコマンドでする方法もあります。
表示されると、このようになります。
ちなみにVScodeというアプリケーションでは、予測変換機能があるので、
誤字をせずに記述が非常に楽になるのでおすすめです。
一回VScodeにするとやめられないぐらい便利です。
これで、サイトの作り方の説明は終わりです。お疲れ様でした。