薄っぺらな プログラミング入門 HTML＆Javascript Part. 2
Part2となりました。 前回はHTMLのJavascriptというプログラミング言語の存在とその役割について薄っぺらく解説させていただきました。 今回はそのうちのHTMLの基本について触れてみたいと思います。
HTMLはテキストデータでタグの集合体です。
コンピュータに限った事ではありませんが、何かの領域を説明する時に入門者に大きく立ちはだかるのが難解な専門用語の羅列です。 初見の方は上記の見出しに「は？」と思われたのではないでしょうか。 そして、その反応は全く正しいです。
特にITの用語は実生活において実感が無い物が多く、さらに実態のないものを言葉だけで表す必要がある上に英語が中心なので、どうしても横文字がトゥギャザーしてしまいます。 知らない単語の解説に新しい横文字単語が出てくる業界なので慣れるまで大変なストレスになるかと思います。
触れた単語のパターンが増えると同時にストレスは徐々に下がってくると思いますので。 ゆっくり慣れていってもらえると幸いです。 しっかり覚えなくとも、単語それぞれの解説はググれば出てきますので、最初は1つ1つの深い理解より「この言葉また出てきたな」くらいに思える事が大切なのかもしれません。
...
HTMLはテキストデータでタグの集合体です。 （大事なことなので）
さて、冒頭から見出しを裏切る脱線をしてしまいましたので気を取り直して本題に入りたいと思います。 HTMLのデータをブラウザアプリが読み取って解釈することで画面に文字が出たり、色がついたりします。 そのHTMLはテキストデータで書かれています。
...
コンピュータの扱うデータには、バイナリデータとテキストデータの2種類の形式があります。 テキストデータというのはみなさんが読める文字と記号の集合体の事を指します。 写真等の画像、動画、音声等はバイナリデータで扱われ、コンピュータだけが理解できるデータになっています。 HTMLはテキストで書かれていますのでみなさんも実際に見て読む事が出来ます。 まず最小限のHTMLデータを見てみましょう。
わけがわかりませんね。 読めると行っても音読できるわけではないのですがそれでも部分的には謎の記号と英単語等が認知できることと思われます。 このHTMLデータは下記の様に解釈します。 上記10行のテキストデータを1行1行分解して解説していきます。
お約束です。 手紙なら”拝啓”、メールに”お疲れさまです”と書くような感じです。 ブラウザは賢いので無くても動いたりしますが無い場合はちょっと粗暴な人だなって思われます。
お約束です。 上記はHTML”タグ”と呼びます。 ”タグ”とは<タグ名>の形で大なり小なりの半角記号で、所定の文字を囲うことで意味を表現します。 これはHTMLデータの”開始”を宣言します。 1行目に連動し、”拝啓ブラウザ殿、拙者これからHTMLを申し上げ候”と言っている意味になります。 ブラウザはここで”おぉ、良きに計らえ、と顎が上を向きます。 ”lang="ja"は「このHTMLは日本語で書かれております故、何卒よしなに」とブラウザに対して書かれている言語を申告します。 無くてもブラウザが内容から自動で認識してくれる場合が多いですが、ちゃんと申告することでブラウザは「よしよし、このHTMLは日本語でござるな」と実際にござる口調かはわかりませんが事前に心構えを持って言語を認識して処理を行ってくれます。
お約束です。 headタグ です。 <html>タグの下には<head>と<body>を置くのが一般的な使い方です。 <html>タグの下、という表現がおそらくピンとこないと思いますがひとまず解説を進めたいと思います。 headタグは直接ユーザーの目に触れない、HTML文章の設定等をブラウザに伝えます。
お約束です。 metaタグです。 ちゃんと意味はありますが実用としては上記の内容をほぼ固定で書きます。 無くてもうまくやってくれることが多いですが無い場合はちょっと粗暴な人だなって思われます。
お約束です。 titleタグです。 ブラウザに現在見ているページのタイトルを通知します。 <title>～</title>で囲まれた範囲の内容がブラウザの現在開いているページのタイトルとして、タブなどに表示されます。 また、ブックマークした時のタイトルとして表示されたりもするので大変重要なタグとなります。 やっとわかりやすいのが出てきてくれましたがさっきからタグタグ言ってるものは多くの場合<タグ>内容</タグ>の形式で文字を小なり・大なり記号で囲う形で表記します。 この”タグ”の文字の種類や意味を定めたものがHTMLと呼ばれる言語なのです。 ちなみに4行目のmetaタグは、単体で意味を成すタグでいくつか単体で使うタグも存在します。 この場合はブラウザに”Engineer Aのご挨拶”というタイトルが表示されます。
ですので、3行目の解説で表記した”タグの下”というのは2行目のタグから10行目ののhtmlタグの終了宣言まで囲われたエリアが、”htmlタグの下”という意味合いになるのです。 titleタグはheadタグの下、ということになります。
お約束です。 <head>タグの終了を宣言します。 タグはちゃんと終了を宣言して囲わないといけません</タグ名>とタグ名の前に/（スラッシュ）を入れることでそのタグの終了を宣言します。 これをタグを閉じる、といいます。
お約束です。
タグの始まりです。タグは見ている人に表示するデータを記載するエリアです。
<h1>タグですh1は見出しを表現するタグです。 h1はそのページの目的となる主題を記載する場所なので文字が強調され、大きく表現されます。 もちろん</h1>でタグを終了させることを忘れてはいけません。
お約束です。 <body>タグの終了です。
タグを終了させることを忘れてはいけません。
お約束です。 <html>タグの終了です。
タグを終了させることを忘れてはいけません。
おそらくわけがわからないと思います。 差し当たりそれで良いのです。 HTMLという概念がある事、そしてその実際の1例を知っていただけたということが重要です。 このデータを受け取ったブラウザはheadタグの内容からHTML文章の指定する設定を読み取り、それに基づいてbodyタグの内容をユーザーに表示するという仕事を行ってくれるのです。 タグは閉じ忘れても表示されないということはないですが表示が崩れたりして思い通りに表示されないことが多いので、決まりとしてはちゃんと開いたタグは閉じるという意識が必要です。
説明の中で、”お約束です”というのが大量に並んでいます。 表現は様々ですが目的ごとの”お約束”の集合がプログラミング言語というものでお約束を組み合わせて目的を達成していくことこそがプログラミングという行為になります。 人間と一緒で約束を破るとコンピュータも言うことを聞いてくれません。 だれかコイツに”情け”を教えてあげてください。
では実際にあなたもタグを入力してみましょう。
やってみよう
入力枠に”あなたの名前”を入れてください。 名前が出ましたか？
1/3
出力結果
これでHTMLのマークアップを体験できました。 ようこそ、HTMLの世界へ！ プログラミングの準備は着々と進んでいますよ。
次回は更に掘り下げて、いくつかのタグを紹介しつつ、基本的な表現について薄っぺらく書いていきたいと思います。
