こんにちは！イギリス在住ブロガーのゆず（@ybook21）です！
私は、何か新しいスキルを身に付けたい・何か新しいことを勉強してみたい、と思い2022年1月からプログラミングの学習を始めました。勉強しながらノートを取る感覚でWordファイルにメモを書いているのですが、それの一部をご紹介できればと思います。今回ご紹介するのは、HTMLの学習メモです。
私のように文系・未経験の方の参考になれば嬉しいですが、それ以外にも実際にプログラマーとして働いている方が、「初心者はこういうところで躓くのか」「初心者はこういう感覚で理解するのか」ということの参考や、新人の指導などのヒントにもしていただければ幸いです。
※実際のノートはスクショを貼っていますが、この記事では文章のみといたします（スクショ元は学習サイトのもののため）。
HTML
HTML（Hypertext markup language）は、ウェブページを構築するための生のデータである。テキスト、リンク、カード、リスト、ボタンはすべてHTMLで作成されている。色などのスタイルはCSSで設定する。料理の素材。
エレメントとタグ
開始タグは、ブラウザにHTML要素の始まりであることを知らせる。キーワードを<>で囲んで構成される。たとえば、段落の開始タグは<p>.
終了タグは、ブラウザに要素の終了位置を知らせます。キーワードの前にスラッシュがあるのが唯一の違い。たとえば、段落を閉じるタグは</p>.
エレメント（要素）は、コンテンツを入れる容器と考えることができます。開始タグと終了タグは、そのエレメントがどのような内容を含んでいるかをブラウザに知らせます。ブラウザはその情報をもとに、コンテンツをどのように解釈し、どのような書式にするかを決定する。
以下はタグのリスト
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
開始タグの中に属性：+@の情報を書くことも。属性はタグ名の後にスペースを開けて書く
・ボイラープレート
Boilerplate は、実際のテキストや画像を提供する。コピー&ペーストしたら使える。
Template は、文書の構造やレイアウトを提供する。コピー&ペーストだけではなく中身を埋めてもらうことを想定している。
HTMLファイルの作り方
http://www.htmq.com/tutorial/02_1.shtml
・The DOCTYPE
最初に必ず記載。doctypeの目的は、ブラウザが文書をレンダリングする際に、どのバージョンのHTMLを使うべきかを指示することである。
<!DOCTYPE html> を基本的には使う
・HTMLエレメント
DOCTYPEの次にHTMLエレメントを書く文書のルート要素として知られているもので、文書内の他のすべての要素がこの要素の子孫になることを意味する。
<html> を記載
</html> もセットで
・Head エレメント（ウェブページの情報）
<head>要素には、ウェブページに関する重要なメタ情報や、ウェブページがブラウザで正しく表示されるために必要な情報を記述。<head>の内部では、ウェブページにコンテンツを表示するような要素を使用してはいけません。例：フォント情報、検索エンジン向け情報、CSS読み込みファイルの指定など
<head> を記載
</head> もセットで
・Titleエレメント
検索エンジンやブラウザなどに認識されて使われる。もしtitle要素を入れなければ、ウェブページのタイトルのデフォルトはファイル名となるので必ず必要。例：<title>My First Webpage</title>
・The Charset Meta エレメント
エンコードを設定することは、ウェブページが異なる言語の特殊記号や文字をブラウザで正しく表示するために、非常に重要。
<meta charset="utf-8">
・Bodyエレメント
テキスト、画像、リスト、リンクなど、ユーザーに表示されるすべてのコンテンツが入る場所。常に<head></head>の下にくる。
・HTMLファイルをブラウザで表示させる方法
―＞ファイルをブラウザのアドレスバーにドラッグ（簡単）
―＞VS Codeの場合はShitf+Alt+B
【基本的なHTMLタグ】
・パラグラフ
パラグラフをHTMLで作るときは、パラグラフエレメントを使う必要がある。
<p> タグで表す
・改行（強制的に）：<br> 終了タグは不要
・見出し
大きく、はっきり表示される。６つの段階がある（<h1> to <h6>）
単に見た目だけでなく、googleに「これが大事」と伝える役割もあるから重要
・ストロングエレメント（太字）<strong>
・Emエレメント（イタリック） <em>
・HTMLコメント <!-- and -->
ブラウザ上では表示されない。自分たち用のコメントみたいなもの。
・順序なしリスト（箇条書き） <ul>
それぞれのリストは<li>で囲む。ウェブ上には「・」で表示される
・順序ありリスト <ol> レシピ・道順説明など
それぞれのリストは<li>で囲む。ウェブ上には「1.2.3.」などで表示される
開始数字を１以外にしたいときは<ol start=”30”>などとする
数字の大きい方からカウントダウンしたいときは<ol reversed>とする
途中で開始数字を変えたいときは<li value=”9”>などとする
【リンク】
リンクを作るときはアンカーエレメントを使う。<a>
リンク先はHTML attributeを使う。これはnameとvalueで構成される
href (hyperlink reference)属性があることで、テキストを青くし、下線が引かれる。
リンクには２種類ある
Absolute link is a hyperlink containing a full URL（リンク全文。他のウェブサイトに行くときなど）
Relative link：Links to other pages within our own website（自分のウェブサイト内）
例：<a href="recipes/lasagna.html">lasagna</a>
【画像】
<img>タグを使う。終了タグはなし。src attributeを使ってブラウザに画像ファイルの位置を教える
Alt attribulte：イメージの説明、名前みたいなもの
JPG：写真にいい
GIF：アニメーションにいい
PNG：アイコン、ロゴなどにいい
SVG：任意のサイズに拡大・縮小することができる。そのためレスポンシブデザインに適したツール。
【その他よく使うタグ】
・<header> </header>：サイトのトップにあるもの。ロゴ、メニュー、ナビゲーション等
・<footer> </footer>：サイトの一番下にあるもの。会社情報やコピーライトなどの情報等
・<div> </div>：これ自体には意味なし。囲まれた内容をブロック要素としてグループ化（１つのかたまり化）
・<span> </span>：これ自体には意味なし。囲まれた内容をインライン要素としてグループ化（文章の一部分）
ただ、まとまりごとにデザインを変えられる
spanではまとまりの前後に改行が入らないが、divではまとまりの前後に改行が入る。spanタグは文章の一部の文字色を変えたり、線を引いたりするときに便利
・idとclass：開始タグ内（どのタグにも使える）に書く属性の1つ。<p id="example"> や<h2 class="name"> というような書き方。classやidはタグに管理名をつけるような働きをする。自分の好きな管理名を、自分の好きなタグにつけることが可能。
管理名をつけることで、CSSでデザインを決めるときに、そのタグだけを特別なデザインに変えることができる。「HTMLで各タグに管理名をつけておき、CSSでその管理名のタグのデザインを変える」というイメージ
名前は英数字で。先頭に数字は使えない
id：1つのHTML文書内で同じid名を使うことができない
class：何回でも同じclass名を使うことができる
・<table> </table>：表を作るときのメインタグ。これに以下の３タグを挟む
・<tr> </tr>：table rowの略。表の行（横の部分）
・<th> </th>：table headerの略。表の見出し
・<td> </td>：table dataの略。内容を入れるセル
・<form> </form>：入力・送信フォームを作成するときに使うメインタグ
・<input> </input>：タグは入力する場所を作るとき。Type属性と一緒に使い、type属性の値によって、一行テキストボックスや、メールアドレスやパスワードの入力欄などを作成
・<button> </button>：ボタンを作成する。テキスト変更や画像を表示することもできる。type属性と一緒に使い、submit送信するボタン、resetリセットするボタン、button 汎用的なボタンの３つがある。
・<select> </select>：セレクトボックスを作成するのに使うメインタグ
・<option> </option>：セレクトボックスの選択肢の内容を書いていくのに使うタグ
・<textarea> </textarea>：複数行のテキストを打つことができるテキストボックスを表示するのでお問い合わせ内容や、ご意見などの欄を作成したい時に使う。rowsは行の数(=縦の幅)を指定でき、５行表示したいのであれば、rows=”5”と書く。colsは一行あたりの文字数(=横の幅)を指定でき、一行あたり50文字を表示したいのであれば、cols=”50”と書く
以上です。書きなぐり形式で見にくいところもあったと思いますが、最後までお読みいただき、ありがとうございました！
