Next: index.htmlで使われているタグ(要素) Up: 本日の実習 Previous: 本日の実習
エディタで見える内容とブラウザで見える内容が異なります. どちらも開いているのは index.htmlというファイルです. 同一の内容のデータ(ファイル)でもソフトウェアによって解釈が異なり, 表示が違ってくる事を良く理解しておいて下さい.
このことは文字コードでも同じです. ASCII コードでは 文字の 1 は数の 49(10進)です. コンピュータ内の 49という数を ASCIIコードと解釈すると文字の 1になるのです.
HTMLは, Hyper Text Markup Languageの名が示す通り, 一種の (Markup = 印付け)のための人工的な言語です. Hyper Textというのは相互参照を持つ文書の 集まりの事で, 1960年代にはこの概念は存在していました. この概念を考案したのは Douglas Engelbart と言う人で, マウスの発明家 でもあります. この概念に Hyper text と言う名前をつけたのは Ted Nelson と言う人のようです. HTML 以前にもハイパーテキストを扱うソフトウェアは 存在していました(有名なのは Apple の HyperCard). HTML がこれだけ浸透したのは, ネットワーク経由でのアクセスを 想定した事とともに, インターネットの発展と時期を同じにしたと言う理由です.
HTMLは文書の内容とともに「文書の相互参照と論理構造」を 記述していきます. ブラウザは, HTMLに書かれた論理構造に従った 表示をするように設計されています. 従って, 例えばもとの文章に あった改行は, ブラウザでみると無視されます. 改行は 論理構造に関係ないからです. また, 論理構造に従って 文字の大きさを変えたり, 改行したりリストの中黒・をつけたり しています.
もう1つ注意して欲しいのは, HTML は, テキストファイルを利用している事です. 前回, テキストファイルと画像ファイルの大きさの比較をしましたが, 大きさの桁が違っています. 最近はネットワーク通信のスピードが 速くなりましたが, それでも内蔵ストレージなどの直接繋がっているデバイス から比べると遅いものです. その通信に, ブラウザで表示されているような index.html の形の画像を送っていたのでは, 効率が悪すぎます. 実際, index.html の大きさは 1KB(キロバイト)程度ですが, ブラウザで表示される ものを画像にすると, 例えば PDFファイルでは, 50KB 程度になり, 約50倍の大きさになります. 通信回線は, 多量のデータをやり取りするのに 時間がかかる場合が, 多くあります. そこで, 通信データは少なくし, 表示する方で工夫するという 「分散処理」の考え方が, ネットワーク通信では基本です.
さらに, データの検索でも, テキストファイルの方に利点があります. 例えば, index.html の文書内で「特技」という文字を検索することは, コンピュータには簡単です. これが, 画像ファイルであったとすると, コンピュータには, かなり難しい処理となります.
HTML はいくつかのバージョン(版)を経て現在に至りますが, この講義では 2014年に確定した HTML5に基づいた話をします. 現在では, HTML5 は廃止され, HTML Living Standard というのが標準に なっているのですが, こちらは, 内容が変化するので追跡するのが大変です. ただし, HTML 5からの変更はほとんど無く, 機能の追加がほとんどなので, HTML 5を勉強して損はありません. HTML 4.0 の仕様策定の頃から, 見た目ではなく, ブラウザや使う人に対する依存性をなくする事が重視されています.
HTMLでは, 論理構造と相互参照はタグ(tag)によって記述されます.
タグは不等号 <, >で囲まれます. タグは基本的に
(少数の例外を除いて)開始タグと
終了タグがあります. 例えばパラグラフ(段落)の開始タグは, <p>
でそれに対する終了タグは</p>です. タグは大文字, 小文字の
区別がありません. <html> と<HTML> は同じ意味です.
index.html を見ればわかりますが, タグは入れ子構造で用います
(ある開始タグと終了タグの間に別の開始タグと終了タグを入れる).
HTML の開発動機は, 効率的な情報共有です. この考え方は今も 変わっていません. このことも頭の隅に入れておいて下さい.