HTML,CSS学習まとめ その1。htmlの歴史や使ったタグなど[自分用]

htmlcss学習まとめ HTML/CSS

htmlの歴史について

 

→もともとのhtmlの成り立ちのことなどを調べる。

HTMLは画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束

 

[HyperText Markup Language]の頭文字。

 

HyperText: ハイパーテキストとは、「テキストを超えたテキスト」というような意味です。つまり、通常のテキストにない機能を備えた「超」テキストというわけです。

Markup: マークアップとは、普通の文書に目印を付ける(マークアップする)ことで、その部分が文書中でどんな働きをしているか(見出しなのか、段落なのかなど)をはっきりさせようという考えです。

プロローグ:HTMLって何だ

 

HyperText(超テキスト)…文書同士を繋げる仕組み。文字をクリックすると他のWebページに移動するいわゆる「リンク」のこと。その機能を持っている文書のこと。

 

Language: これは、英語とか仏語とか、あるいはプログラミング言語(*)などの「言語」というよりも、このマークアップをどんなルールで行うかをきちんと決めておくための約束、つまり文法という程度の意味にとらえたほうが良いでしょう。

プロローグ:HTMLって何だ

 

→プログラミング”言語”というほどに厳密性がない。けっこうバラバラ。

ごく簡単なHTMLの説明

 

<br>なの?<br />なの?

<br>はHTML、<br />はXHTMLでの書式。

 

XHTMLは、単独のタグ<br>を1対で囲まない場合に <br />と表記。

html5で書くときにはどちらでもよく、スラッシュなしを推奨している。

 

→なんでこうもバラバラなのか?。xhtmlやhtml5に至るまでの歴史や経緯などを調べる。

 

xhtmlとは

htmlとxmlの特徴を合わせたwebページを作るための言語。xmlというマークアップ言語から生まれた。xmlはしっかりとルールどおりに記述しないと、表示ができないといった特徴。

【初心者向け】XHTMLとは何?HTMLとの違いは?【徹底解説】

→xhtmlの仕様上、厳密性が必要。よって、<br />

 

HTMLはもともとSGMLというのに基づいて作られています。ただ、SGMLでは色々と問題があったため、より拡張しやすいものとしてXMLが作られました。そして、HTML4.01をXMLに対応したのがXHTML1.0になります。その後一悶着あったのですが、新しいHTMLとしてHTML5が作られました。HTML5は厳密にはSGMLではありませんがHTML4.01の後継のように書けるようになっています。そして、HTML5をXMLに対応したXHTML5もちゃんと策定されています。

XHTMLとHTML5の違いについて

 

htmlの改行タグを<br>ではなくて<br />と書くのはどうしてでしょう?

 

 

→よりもっと俯瞰的にhtmlの歴史を調べる。

 

webの生みの親

ティム・バーナーズ=リー博士

 

意外と知らない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の書籍に関しても(厳密に必ず)合っているということはまずない。

HTML 4.01 厳密なHTML文書の書き方

 

なぜなら、(上述した基準である)W3Cの仕様を隅々まで把握出来ないから。

HTML Living Standard — Last Updated 11 December 2019

 

厳密性への道は相当大変。…まぁ、うん…。

 

CSSの成り立ち

 

W3Cは1997年12月にHTML 4.0規格を策定。

→文書の論理的枠組みを記述するというHTML本来の目的だけを残す。そして、見栄えに関しての仕組みはスタイルシート(CSS)という他の枠組みへ移行した。

HTML 4.01 厳密なHTML文書の書き方

 

忘れないよう、タグなどメモ

<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、要素、属性などはまた次回。

タイトルとURLをコピーしました