VSCodeとWebページを見比べながら進めていきます
VSCode開くの面倒くさいよという方はキーボードの「F12」を押してください。
開発者ツールという画面が出てくるのでここでもHTMLツール
タグとは<>で括った部分を指す
テキスト文書にHTMLタグを記述することでテキスト文書の構造や表示方法などを表現できる。
タグにはいろいろなものがある。例えば↓
タグはVSCode35行目にある<h4>と</h4>のように一対にして使う。ここからここまでをこの書式で書いてね~というのをWebページに指示するためです。
ときどき、最後の</>を省略できるものもある。
下によく使うタグをまとめる
HTMLコード | 説明 | 表示 | 詳細 |
---|---|---|---|
<p> | 段落を表現 |
テスト |
|
<h1> | 見出し |
テスト |
1~6まである |
<br> | 改行 |
テスト テスト |
</>省略可 |
<hr> | 区切り線 |
|
</>省略可 |
<strong> | 強調 | テスト | |
<a> | リンク | テスト | href:リンク先WebページのURL |
<img> | 画像の挿入 |
![]() |
src:表示したい画像の場所 </>省略可 |
プログラマーは自分で調べる力が強い人がなる職業といわれています。
ここにタグの全てを書いているわけではないため、自分で調べながら作ってください。
どう調べればいいの、、?という人は髙松か、周りにいる先輩方に聞いてみてください。
次は実際にHTMLをVSCodeで書いてみよう
使いたいタグを調べながら「名前」「出身地」「好きな食べ物」など、自由に書いてみてください
必ず「自分の好きなものの画像」を入れてください