参考：侍テラコヤ『HTML/CSSの基礎を学ぼう』https://terakoya.sejuku.net/programs/51/chapters

■基本構造

《準備》

任意の場所に作成した空フォルダをVisual studio codeで開く。
新規で「.html」ファイルを作成する。

《基本構造》
DOCTYPE宣言⇒head⇒body

<!DOCTYPE html>
<html>

<head>
	<title>天気予報</title>
	<meta name="descriprion" content="毎日の気象情報をお知らせします">
	<meta charset="utf-8">
</head>

<body>
  <header>
  	<h1>天気予報</h1>
  </header>
  <main>
	<h2>今日の天気</h2>
    <p>よく晴れるでしょう</p>
  </main>
　<footer>
    <p>Copyright IITENKI inc. Copyright all right reserved.</p>
　</footer>
</body>

</html>

<head>～</head>

ブラウザには表示されない各種設定。webサイトのタイトルや説明文など。

title　ページのタイトル
meta name ="descriprion"　検索時に表示される説明文
meta charset= "文字コード"　文字コードの設定

<body>～</body>

ブラウザに表示させる各種コンテンツ

header タイトルやロゴ
main メインのコンテンツ
footer コピーライトや連絡先などの基本情報

■よく使うタグ


<!--コメント-->	コメントアウト
<p>	段落
<h1>～<h6>	見出し
<ul>,<ol>	箇条書き※<li>と組み合わせて使う
<hr>	水平線
<br>	改行
<div>	グループ化
<table>	表
※<tr>,<th>,<td>	表の行、見出し、セル

■パス

絶対パス

webサーバー上のどのフォルダにファイルが置かれているかをURLで指定する。

<img src="https://www.～">

※画像はimgタグで表示する

相対パス

現在開いているHTMLファイルを基準にフォルダを指定する。

<img src="../～">

※../は１つ上の階層のフォルダに移動することを示す。

多くの場合は相対パスを使うが、外部のwebサイトの画像やリンク先を指定する場合は、絶対パスを使用する。

imgタグ(画像)

画像を表示するタグ。src属性で表示したい画像ファイルのパスを設定する。

aタグ(ハイパーリンク)

リンク機能をつけるタグ。href属性でパスを指定する。

<a href="パス">
    <img src="パス">
</a>

※画像クリックで別ページに飛ぶように指定する例

◎簡易メモ

必ず冒頭でDOCTYPE宣言し、ブラウザにHTMLファイルであることを認識させる。
各種設定や表示させたい内容はすべてタグの中に記述する。