【プログラミング初学者向け】HTMLを書き始める

石田健雄

前回に引き続き部活の内容の振り返りとして備忘録的に記述していきます。
また、学習の参考にでもあればと思います。
前回の記事はこちらです。

今回はHTML 冒頭の記述すべき内容(いわゆるおマジないのような内容)と「タグ」の種類をいくつか紹介。

VSコードにHTML を書き始める時のおまじない

HTMLを書き始めるときはまずは拡張子が「.html」となっているファイルを用意しましょう。それをVSコードで開いて下さい。
例)「index.html」
初めてエディターを使用してコードを書き始めるにもどうやって書けば良いのやらさっぱりわからないってことがあると思います(自分もそうでした•••)。
まずは深く考えずにこれは最初に書くでいいんです。最初に書くのがルールです(呪文です。おまじないです。)
それがこちら。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

このおまじないがないと始められません。ただ、１から全部自分で１文字ずつ書く必要はありません。
VSコードで「！（半角）キー」を押して「tabキー」を押せば出てきます。（全角で押しても出てきません。半角で！キーを押して下さい。）
このお役立ち機能を「Emmet（エメット）」と言います。ぜひ調べてみて下さい。
これでHTMLを書き始める最初の準備はOKです。

タグの紹介

まず、「タグ」って何？ってところですね。
HTMLとして認識させるために必要なものが「タグ」です。
色々のタグがありますので紹介いくつか紹介していきます。
まずは<body>タグです。HTMLの表示したい内容はこの<body>タグの中に書きます。
必ずタグの間に書いていきます。

<body>ここに書いていくよ。</body>


タグの紹介


○見出し

　<h1>大見出し</h1>
　<h2>小見出し</h2>

○文章

<p>ここに文章を書いていくよ。</p>


○画像

　<img src="ファイルの場所やアドレスを記入">


○リンク

<a href="リンク先を記入">こちら</a>

ここに書き切れないほどのありますので、わかりやすいおすすめサイトのリンクを貼っておきます。

さて、これができたら次はCSSの当て方をやっていきましょう。
今回はここまでです。

この記事が気に入ったらサポートをしてみませんか？