画像を表示
![](https://tumaboki.com/wp-content/uploads/2020/10/nesa-by-makers-IgUR1iX0mqM-unsplash-1024x683.jpg)
画像を表示するには、imgタグで囲います。
imgタグ内のsrc部分に、画像の保存先を入力すればOKです。
![](https://tumaboki.com/wp-content/uploads/2020/10/27b53555428b46509d0a6710ae4cde51.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/30a29334290e124765fcc208d34d2524.png)
ファイルの基本設定を整える
![](https://tumaboki.com/wp-content/uploads/2020/10/ricardo-gomez-angel-BFMaGkfHDWQ-unsplash-1024x814.jpg)
HTMLファイルの基本設定をします。
- !DOCTYPEタグでhtmlファイルだよと宣言します。
- htmlタグで全体を囲います。
- 文書に関する情報を入れるheadタグを設置します。
- 本文を入れるbodyタグを設置します。
![](https://tumaboki.com/wp-content/uploads/2020/10/3ecf8ca0785ae192027a34d2ca38a566.png)
VSCodeなら、!を入力してtabキーを押すと自動入力してくれます。
htmlファイルの決まり文句なので深く考える必要はありません。
コメントを書く
![](https://tumaboki.com/wp-content/uploads/2020/10/scott-graham-5fNmWej4tAA-unsplash-1024x683.jpg)
コードの中でコメント(メモ書き)を入力することができます。
コメントタグで囲うことでブラウザには表示されません。
見やすいコードにするために積極的に活用しましょう。
![](https://tumaboki.com/wp-content/uploads/2020/10/ae46f0a1f989c0e447020b89ce0a4865.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/966aad77e8c47917a3323dd5c3346e17.png)
なおVSCodeなら、ショートカットキーのcommand + / でコメントにすることができます。
わたしの考え
![](https://tumaboki.com/wp-content/uploads/2020/10/annie-spratt-Ewfrjh0GvtY-unsplash-1024x683.jpg)
画像を1枚表示するだけでも、imgタグで囲ったり、コメントするのはコメントタグで囲ったりとWEBブラウザに表示するのは手間ですよね。
プログラマーさん達のこうした細やかな作業のおかげで、WEBサイトが見れるので感謝ですよね♪
一緒に一歩踏み出しましょう♪
コメント