htmlファイルの作成

htmlはウェブページを作成するためのマークアップ言語です。(厳密にはプログラミング言語ではない。) htmlはタグで要素を定義します。 どのタグを使うかでウェブサイトにどの要素が表示されるのかが変わります。

<>  開始タグ
</> 終了タグ

<p>段落</p>

<h1>見出し</h1>

<img src="xxx" alt="画像" />

ウェブサイトの実際に見える部分というのは<body></body>タグの中に書かれます。

step 1

htmlファイルを作成します。

make-html-file

step2

では実際にhtmlファイルを書いていきましょう。 htmlファイル上で!を入力します。画像
画像の状態でEnterを押すとvscodeがひな形を書いてくれます。画像

ひな形で作成されるコード 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

ではbodyタグの中に書いていきましょう。 以下のコードをbodyタグのなかにコピペしましょう。

    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h3>Hello World</h3>
    <button>this is button</button>

Ctrl + sでファイルを保存します。 そうするとファイル名が表示されているところの白い点が消えます。画像

step 3

結果をブラウザで確認しましょう。 ここで追加したプラグインを使用します。 vscodeの左下にあるGo Liveをクリックします。

Go-Live-Button

するとブラウザが立ち上がりウェブサイトが表示されます。🎉

browser