LoginSignup
1
0

More than 1 year has passed since last update.

HTMLでサイトを作ろう! #1

Last updated at Posted at 2023-02-27

HTMLでサイトを作ろう!

どうも1998です。今回はHTMLを使って簡単な
ウェブサイトを作る方法をご紹介します。
まず、HTMLファイルを作りましょう。(今回は、VScodeを使用します)

index.html

できましたか?まだ何も表示されてないと思います。
では、今からhtmlの文法をご紹介します。

index.html
<h1>Hello World!!</h1>

まず、このように記述してみてください。
まず、h1というのは文字をh1の大きさで
表示するという意味を持っています。
そして矢印括弧で囲います。
このようなものを、タグと言います。
タグの形式には二つの種類があり、開始タグと
終了タグの二つがあります。
終了タグは、そのタグの名前の後ろに/(スラッシュ)を入れる
ことによってできます。
そして、開始タグと終了タグがそのタグの効果の範囲になります。
この場合では、
Hello World!!がh1の大きさで表示されます。
これで完成!と思いきや、HTMLとしては完成していません。
HTMLの骨組みを完成させましょう。

index.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タグには先ほども言ったように、表示する部分を記述します。
今回の場合は、

index.html
<h1>Hello World!!</h1>

を記述します。
書いたhtmlを表示するには、htmlファイルを開くことによって
できます。また、LinuxやPowerShellのコマンドでする方法もあります。
表示されると、このようになります。7BB322DE-2D33-4B21-98C2-8294F9E8D3F1.png

ちなみにVScodeというアプリケーションでは、予測変換機能があるので、
誤字をせずに記述が非常に楽になるのでおすすめです。
一回VScodeにするとやめられないぐらい便利です。
これで、サイトの作り方の説明は終わりです。お疲れ様でした。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0