＜概要＞
●前回の復習、より理解を深める
●ファイル管理について
●Webページ制作実践
★HTMLの歴史と必要な理由
HTMLは論文の共有のための言語として作られ、CSSという見た目を整える技術より前から普及していた。
それぞれのタグに対して何が記載されているかを伝える意味がある。
その歴史から派生して、現在はGoogle等の検索エンジンに対して「タグごとに正しい情報が入っているよ」と伝えるためのものである。
ただ、すべて正しく記述する必要はなくすべてのタグを覚える必要はない。
タグと内容に誤りがあっても、サイトとしては成立する。
その代わり、検索エンジンからは信憑性の弱いサイトとして、表示優先度が低くなる。
では、HTMLの基本構造の理解と実践をしてみる。
★ファイル管理について
Webサイト開発時には、HTMLファイル、CSSファイル、JavaScriptファイル、画像ファイルなど多くのファイルを使用する。
また、各ファイルは随時変更されるため適切なバックアップも必要。フォルダ名やファイル名の命名規則やフォルダ構成などを決めて管理しておかないと、どのファイルが、どこにあるのかわからないという状況になってしまう。
また、作業時には理解していても後日に確認すると「わからない！」というのは良くある話。
一般には、半角英数字で日付、内容を記載する。
【今日の作業手順】
①TeraPad（Windowsで推奨アプリ）（MacはVisual Studio Code（通称VSコード）がおすすめ）に空の基本構造を記載する。
<!DOCTYPE html>
<html lang=”ja”>
<head>
（文書の情報を記述）
</head>
<body>
（文書の本体を記述）
</body>
</html>
※Webページ開発ツールについて
Webページ開発には、テキストエディタとブラウザが必要。
Windows標準にインストールされているメモ帳とEdgeでもWebページ開発が可能だが、本訓練では、TeraPadとChromeを使用してWebページ開発を行う。
②TeraPadを保存する。
※日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがあるが、Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用すると覚えておく（HTMLへの記述は設定が8NであってもUTF-8）。
※0からサイトを制作する場合は、最初のファイル名は基本的に「index.html」（「ファイル名」＋「拡張子」）とする。
理由（Geminiによる）↓
※ファイルはPhotoshop等と同様、こまめに保存する。
（TeraPadは左上のファイル名に＊がついている。
「保存後に作業をした（最新の内容が保存されていない）」と教えてくれている。）
③整える
・タブの文字数を2にする。
・入れ子構造を整える＝インデントを揃えるために、「tab」キーで段落をつける。
→整えることはマストではないが、CSSやワイヤーフレームの作成の時に効率が変わってくる。
④head 要素・body要素に文書のメタデータを記述する。
＝「コーディング」「マークアップ」という。
そして再度インデントを整える（常に整えながら進める）。
参考：https://samplesdl.me/training_html-css/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="htmlのお勉強サイト">
<meta name="keywords" content="html, 勉強">
<title>htmlのお勉強サイト</title>
</head>
<body>
<h1>これはh1です。</h1>
<h2>これはh2です。</h2>
<h3>これはh3です。</h3>
<p>これはpタグです。</p>
<ul>
<li>これはliタグです。</li>
<li>これはliタグです。</li>
<li>これはliタグです。</li>
</ul>
<article>
<p>これはarticleで括っています。</p>
<p>これはarticleで括っています。</p>
<p>これはarticleで括っています。</p>
</article>
<section>
<p>これはsectionで括っています。</p>
</section>
<div>
<p>これはdivで括っています。</p>
</div>
</div>
<p>これは猫の画像です。</p>
<img src="img/neko/neko.jpg">
<div>
<p>これはトラの画像です。</p>
<img src="img/tiger.jpg">
</div>
</body>
</html>※headタグの内容はサイトのページ上には表示されない。
基本的にはbodyタグがサイト上の内容となる。
ただし、headタグが無意味なのではなく、サイト名となり検索結果に表示されるタイトルと説明文になる。
※タグ（要素）の使い分けについて
例）HTMLのarticleタグとsectionタグの違い
「どちらもコンテンツを区切るための要素ですが、使い方が異なります。articleタグは、ブログ記事やニュース記事のように、それ自体で完結する独立したコンテンツを表すのに適しています。一方、sectionタグは、ページ内のセクションや章など、より一般的な区切りに使用されます。articleタグはsectionタグの子要素として使われることもあります。」（Geminiより）
上記、正直どちらでも良いという意見があるそう。
このように、意味は決まっているものの使い分けについては違い、解釈が難しい場合がある。
そのため、タグさえうまく作用できていれば、「一応」サイトにはなる。
※ファイルの場所の注意点
画像ファイルを埋め込んだ際、「index.html」と同じファイルに保存されている場合は「<img src=”neko.jpg”>」で画像が表示される。
「index.html」と並列のファイル（「img」）の中に入れた場合は、階層を記述する必要があるため「<img src=”img/neko.jpg”>」とすると表示される。
これは絶対パスと相対パスの考え方に則っている。
このような作業は「パス（ルート）を通す」と言われる。
ここまでの結果↓
※HTMLの段階ではどのように整理しても縦に情報が積み重なっていく。
「横並びにしたい」希望はCSSで叶えるので、ここまでは情報整理のみできていればOK。
★ワイヤーフレーム→コーディング→デザイン
ワイヤーフレームでまとめた情報は括りごとに<div>や<article>で囲い、その中にさらに親子構造を作っていく。
それをもとにデザイン（CSS）の作業を行っていく。
★全部覚えなくてOK
構造を理解する。
他の人が作ったサイトのHTMLを見て、タグや構想の意味を理解していく。
自分でやってみて間違えた部分を検証する。
わからなければ検索しながら対応していけばOK。
（もちろん早いに越したことはないので、頻出タグは覚える、ファイルを効率化する、などのポイントは押さえておく。）