Part1　HTML

ここはある高校のコンピュータ部の部室。入部したてのマサトくんは，Webプログラミングに興味を持っているのですが，どう始めたらいいか，わかりません。そこで先輩のユーコさんに相談してみました――。

ユーコ：マサトくん，なぜWebプログラミングを始めたいと思ったの？

マサト：最近ノートPCを買って，インターネットに接する機会が増えたんですよ。ブログも書いてますしね。

ユーコ：評判いいよね。アルファブロガーを狙ってるそうじゃない？

マサト：いやー，ブログが受けるのはうれしいんですけど，なんかこう，物足りなくなってきたんです。Webの世界って，いろいろ楽しそうな道具があふれているじゃないですか。

ユーコ：Web APIとか…

マサト：そうした道具を使って何か面白いことがしたいのなら，やっぱりWebプログラミングを学んだほうがいいなって思うんです。

ユーコ：確かに，Webプログラミングができるようになると，面白いことが多いものね。自分の作ったソフトウエアがインターネットを通じて世界中の人たちに見てもらえるかも，と思うとワクワクするし。

マサト：ブログとは違う達成感がきっとある，これまでとは違った自分になれるって気がするんですよ！

ユーコ：（それは突っ走りすぎかも，と思いつつ）うん，じゃさっそくやってみようか。まずはHTMLからね。多少は知ってるよね？

マサト：ええ，Webページを作るときに使う言語ですよね。でも，HTMLのことがちゃんとわかっているかと聞かれると，自信ないなあ…

ユーコ：じゃ，そこからスタートね。何しろ，HTMLはWebプログミングの出発点なんだから。

　Webプログラミングの基礎知識，一つ目はHTMLです。皆さんは，HTMLをどの程度ご存じですか？ 軽い気持ちで，下のチェックリストをお試しください。

　いかがでしたか？　ほとんどわからないという方は，ぜひこのPart1でHTMLの全体像をつかんでください。何だ，簡単じゃないかという方も，自分の知識が本当に正しいかどうかを確認するために，読み進めてみてください。

“超”テキストって？

ユーコ：HTMLって何の略かは知ってるよね？

マサト：HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）ですよね。

ユーコ：HTMLのことを理解するのは，ここがいい取っかかりになりそうね。「ハイパーテキスト」で「マークアップ」の言語が，なぜいろんなWebページをブラウザに表示できるのか，ってこと。じゃ，ハイパーテキストって何のことかな？

マサト：ハイパーって「超」って意味ですよね。つまりハイパーテキストは「超テキスト」。って，いったい何だろう。考えたことなかったな。

ユーコ：ハイパーなんとかって，ほかにもあるよね？

マサト：そうだっけ…あ，Webの世界にハイパーリンクがありますね。

ユーコ：Webページのテキストや画像をクリックすると，ほかのページに移動するという仕組みのことね。いいセン行ってるじゃない。

マサト：そう言えば，パパが使ってるMacでも，そんな名前のソフトが動いているのを見たことありますよ。

ユーコ：パパ？

マサト：突っ込まないでください！ たしか「HyperCard＊1」だったっけ。

ユーコ：よく知っているわね。Webが普及する前に，代表的なハイパーテキスト（ハイパーメディア）のソフトの一つだったそうよ。で，WebのHTMLはハイパーテキスト。どこか共通してるように思わない？

マサト：うーんと…どれもいろんな情報をリンクで関連させておいて，そのリンクからいろんな情報にたどり着けますね。あ，つまり一つの情報（文書）というワクを超えて，いろんな情報を組み合わせて使えるようにする仕組みだから，テキストを超えた＝ハイパーって言うんですね。

ユーコ：そう，ハイパーテキストって概念自体はずいぶん昔からあるんだけど＊2，インターネットの世界にはまさにピッタリだったのね。世界中に情報が存在する。その情報はテキストだったり，ExcelやWordのファイルだったり，画像だったり，動画だったりする。ハイパーテキストの仕組みを使えば，どんな種類の情報でも，しかもそれが世界中のどこにあったとしても，「リンクで関連づける」というとても簡単な仕組みで利用できちゃうってわけ。

マサト：シンプルだけどとてもパワフルなハイパーテキストって仕組みがあるからこそ，Webはこんなに普及したんですね。もう一つの「マークアップ」も，この仕組みと関係あるってことですよね，きっと。

情報に「印を付ける」意味

ユーコ：当然！ まずマークアップってどういう意味かな？

マサト：それならわかります。「印（しるし）を付ける」ってことですよ。

ユーコ：Webでの印って言えば…

マサト：HTMLのタグのこと？

ユーコ：そうね。じゃ，何でタグを付けるって発想が出てきたのかな？

マサト：えっと…（少し考え込む）

ユーコ：まず，Webではタグをどんな用途に使っているのかを挙げてみたら？

マサト：そうですね…まず，さっきのハイパーリンクを指定してます。あと，Webページの構造を決めたり，文字に色を付けたり，画像やリスト，表を使えるようにしたり…

ユーコ：Webページに関するいろんな情報を，タグって形で持たせているわけよね。もしも，そうした情報をサーバー側でまとめて持たせる形にしたら…

マサト：それはムリですよ。Webって，いろんな種類のデータが世界中に散らばっているんですから。

ユーコ：だったら，Webページに関する情報は，それぞれのデータに持たせないとダメってことになるわね。

マサト：うーん，確かに。

ユーコ：でも，Webページに関する情報をいちいち書くのって手間がかかるし，できるだけ効率よくやりたいよね。しかも，その付加情報は何らかの標準に準拠した形にしたい。だって，Webブラウザが違うとWebページの見えかたや動作が違ったりして，不便で仕方ないもの。こうしたことを考えると…

マサト：もっとも効率的で，しかもパワフルなのは，Webで扱う情報そのものに標準に基づいた印を付ける，つまりタグを付けるって方法だったということですね＊3。

ユーコ：ね？ 順序を追って見ていくと，HTMLの生まれた背景が浮かび上がってくる気がしない？ さて，これで準備完了。一緒に簡単なHTMLファイルを書いてみようか（ノートPCでテキスト・エディタを立ち上げる）。

マサト：テキスト・エディタでいいんですか？ そっか，タグを含めてすべてテキストですもんね。それも効率的な理由の一つですね。

ユーコ：そう。完成したファイルの拡張子を「.txt」から「.html」に変えればブラウザで表示できるから，慣れるとカンタン（エディタに入力を始める）――。