目次
htmlの歴史について
→もともとのhtmlの成り立ちのことなどを調べる。
HTMLは画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束
[HyperText Markup Language]の頭文字。
HyperText: ハイパーテキストとは、「テキストを超えたテキスト」というような意味です。つまり、通常のテキストにない機能を備えた「超」テキストというわけです。
Markup: マークアップとは、普通の文書に目印を付ける（マークアップする）ことで、その部分が文書中でどんな働きをしているか（見出しなのか、段落なのかなど）をはっきりさせようという考えです。
HyperText（超テキスト）…文書同士を繋げる仕組み。文字をクリックすると他のWebページに移動するいわゆる「リンク」のこと。その機能を持っている文書のこと。
Language: これは、英語とか仏語とか、あるいはプログラミング言語（*）などの「言語」というよりも、このマークアップをどんなルールで行うかをきちんと決めておくための約束、つまり文法という程度の意味にとらえたほうが良いでしょう。
→プログラミング”言語”というほどに厳密性がない。けっこうバラバラ。
<br>なの？<br />なの？
<br>はHTML、<br />はXHTMLでの書式。
XHTMLは、単独のタグ<br>を１対で囲まない場合に <br />と表記。
html5で書くときにはどちらでもよく、スラッシュなしを推奨している。
→なんでこうもバラバラなのか？。xhtmlやhtml5に至るまでの歴史や経緯などを調べる。
xhtmlとは
htmlとxmlの特徴を合わせたwebページを作るための言語。xmlというマークアップ言語から生まれた。xmlはしっかりとルールどおりに記述しないと、表示ができないといった特徴。
→xhtmlの仕様上、厳密性が必要。よって、<br />
HTMLはもともとSGMLというのに基づいて作られています。ただ、SGMLでは色々と問題があったため、より拡張しやすいものとしてXMLが作られました。そして、HTML4.01をXMLに対応したのがXHTML1.0になります。その後一悶着あったのですが、新しいHTMLとしてHTML5が作られました。HTML5は厳密にはSGMLではありませんがHTML4.01の後継のように書けるようになっています。そして、HTML5をXMLに対応したXHTML5もちゃんと策定されています。
htmlの改行タグを<br>ではなくて<br />と書くのはどうしてでしょう？
→よりもっと俯瞰的にhtmlの歴史を調べる。
webの生みの親
ティムさんがWWW、Webの基礎を作った。CERN(セルン)の研究員。
Web（サイト）を考案したそもそもの目的が、研究員のデータや文献を相互に繋げること
web超便利。利益なども狙い、Webブラウザーが乱立。オリジナル機能をつけようと、それぞれ独自のルールを作りまくる。ブラウザ戦争。その当時の主な2つのブラウザがNetscapeとInternet Explorer。独自ルール多すぎてやばい。HTMLのルール化(標準化)が必要。ティムがWorld Wide Web Consortium(W3C)を設立。
…その後、htmlはめちゃくちゃ紆余曲折があり、とりあえずはhtml5が人気/標準になりつつある。
あの、地デジのTV番組でリモコン押してクイズ参加できるやつも、HTML5の恩恵。
厳密なHTML
ほとんどのwebサイトに完璧な/厳密なhtmlで記述されたサイトはまずない(99%以上)。htmlの書籍に関しても（厳密に必ず）合っているということはまずない。
なぜなら、(上述した基準である)W3Cの仕様を隅々まで把握出来ないから。
→HTML Living Standard — Last Updated 11 December 2019
厳密性への道は相当大変。…まぁ、うん…。
CSSの成り立ち
W3Cは1997年12月にHTML 4.0規格を策定。
→文書の論理的枠組みを記述するというHTML本来の目的だけを残す。そして、見栄えに関しての仕組みはスタイルシート（CSS）という他の枠組みへ移行した。
忘れないよう、タグなどメモ
<div>や<span>
特に意味をもたない。 主に囲まれた部分にスタイルシートを適用するために使用。
<div>は前後に改行が入る。（ブロック要素）
<span>は改行が入らない。（インライン要素）
<form>
入力・送信フォーム を作る
送信先URLはaction属性、データの送信方法はmethod属性
初期値はmethod=”get”
→getはほぼ使わない。postで
<input>
フォーム<form>…</form>の入力部品作成の際に使用。
<input type=”属性名” …>
閉じタグなし
type属性
部品の種類を指定。テキストボックスやチェックボックス、送信ボタンなど。
<input type=”text”>…一行テキストボックスを作成
<input type=”submit”>…送信ボタン
<input type=”hidden”>…隠し要素
<input type=type=”checkbox”>…チェックボックス
属性
<input type=”submit” value=”名前”>…”名前”がボタンの中に表示される
<input…name=”name名”>…nameはphpなどプログラミングで操作したり、対象を指定する際に使用
<LABEL>
フォーム部品と項目名（ラベル）を関連付け
背景を透明
background-color: transparent;
background-color:rgba(0,0,0,0);
rgba…色の指定
要素を透明
opacity: 0;
<div style=”opacity: 0;>
…指定した要素の子要素にも適用
<div style></div>
CSSファイルをHTMLファイルに埋め込まずにCSS適用
<div style=”プロパティ:値;”></div>
<video>
HTML5から有効。flashなどのプラグインがなくても見れ、HTMLから簡単に動画を使用できる。
<video src=”サンプル.mp4″></video>
旧いブラウザだとサポートされていない可能性がある。
<source>子要素
それ自身では何も表さないが、拡張子が異なるビデオファイルを指定しておくと（src属性で指定）、より多くの環境で視聴できる。
controls属性
ブラウザが勝手にインターフェイスを表示する。とりあえず付けといて損はない。
autoplay属性
自動再生
汎用的な
<video controls width="横" height="縦">
<source src="サンプル.mp4">
<source src="サンプル.flv">
</video>
くたびれた。クラスやid、要素、属性などはまた次回。
