HTML (HyperText Markup Language) とは、World Wide Web 上で配信するドキュメントを記述するための言語です。 今、皆さんがご覧のこのページも HTML を使って書かれています。 「言語」といわれても何のことかピンと来ないかも知れませんので、具体的な例を挙げながら話を進めましょう。 Google Chromeなどのブラウザで何か Web ページを表示している状態で、テキストにマウスカーソルをあわせた上で、右クリックして「ページのソースの表示」を選択すると、新しいタブで「HTMLのソース」が表示されます。 なお、テキスト以外の画像の部分で右クリックすると別のメニューが出てくるのでご注意下さい。
何だかよく分からない文字列が表示されていると思います。 これが HTML という言語の内容です。 この内容を以下で説明していきます。
この少々複雑なテキストの羅列が、HTML 文書の正体です。 このテキストをよく見ていくと、ブラウザで表示されている日本語の文章に混じって、"< >"で囲まれた文字列があることがおわかりかと思います。 これをタグと呼びます。
ブラウザで HTML 文書を開くと、まずブラウザはサーバまたは OS などから上のようなタグ付きのテキストを受け取ります。 続いてブラウザはテキストを先頭から読んでいって、タグを見つけたらそれを解釈します。 例えば
といった具合です。 解釈が終わると、それに基づいて今度はページのレイアウトを行います。 例えば、「第一レベルの見出し (h1) は太文字・中央揃え・ゴシック・フォントサイズ大で表示」とか「強調表示は太文字・ゴシックで表示」といった具合です。 レイアウトが全て確定した時点で、ようやくブラウザのウィンドウに HTML 文書が表示されます。
Advanced Topic
HTML文書の実体であるテキストを「ソース」と呼ぶのは、そのテキストが「ブラウザに解釈され、最終的に表示される画面を生成する『源 (=source)』となっているからです。 C、C++、Java、Perl といった「プログラミング言語」では、人間が読むことが出来る言葉でプログラムを書いて、コンピュータが理解できる機械語に翻訳するという手続きを踏みます。 このケースでも、機械語に翻訳される前の「人間に読めるプログラム」を「ソース」と呼びます。
ここまでの話をまとめますと、HTML 文書のからくりは
ということになります。
HTML 文書を作成する際には、 冒頭で作成ファイルがどのバージョンの HTML の基準に準拠しているのかを記載する習わしになっています。 現在のほとんどのウェブサイトは、以下のいずれかになっていると思いますが、 今回は最新バージョンに則って話を進めていきます。 ただ、基本的なところはほとんど全てに共通しますので、 以前のバージョンだからといって、この授業でお話しする範囲内ではほとんど違いはないかと思います。
Advanced Topic
最新の情報は W3C の Web ページ（http://www.w3.org/）で確認できます。 2024年7月現在、HTML の最新のバージョンはHTML Living Standardというものになっています。 このあたりの最新事情に興味がある方は、ぜひ W3C のページを訪れてみてください。
HTML は、文書の宣言文(DOCTYPE)から始まります。 そして、宣言文以下全体が「html」となり、 その中に、「head」というヘッダー部、 さらにブラウザに表示される「body」という本体部分が続くという構造を取っています。 そして、< > で括ってタグを表記します。 具体的には、以下のような記述になります。
なお、以下のサンプルで赤字で表示されているのは、すべて行番号です。 実際にHTMLソースを記述するときには書く必要はありません。
01 <!DOCTYPE html>
02 <html>
03
04 <head>
05 <meta charset="utf-8">
06 <title>（サイトのタイトルが記述されます）</title>
07 </head>
08
09 <body>
10
11 （本文が記述されます）
12
13 </body>
14
15 </html>
「ブロックレベル要素」とは、大雑把に言えば「ひとつの独立したかたまり」のようなもので、 これらを組み合わせることで、本文領域の記述を論理的に組み上げていきます。 多くのブラウザでは、ブロックレベル要素の前後には適度な空白が挿入されます。
01 <h1>大見出し</h1>
02
03 <h2>中見出し</h2>
04
05 <h3>小見出し</h3>
01 <p>
02 ○○○……（テキストの記述）
03 </p>
01 ○○○……<br />
02 △△△……
03
04 <hr />（横罫線が入る）
01 <blockquote>
02 <p>
03 ○○○……
04 </p>
05 </blockquote>
01 <ul>
02 <li>項目1</li>
03 <li>項目2</li>
04 </ul>（● のリスト）
05
06 <ol>
07 <li>項目1</li>
08 <li>項目2</li>
09 </ol>（1., 2. ……のリスト）
01 <dl>
02 <dt>定義される用語</dt>
03 <dd>
04 ○○○……（用語の説明）
05 ○○○……
06 </dd>
07 </dl>
01 <table>
02 <tr>
03 <th>見出し1</th><th>見出し2</th>
04 </tr>（見出し行［1行目］終了）
05 <tr>
06 <td>2行目1項目</td><td>2行目2項目</td>
07 </tr>（2行目終了）
08 </table>（表終了）
01 <!--
02 ここに何を書いても
03 ブラウザには反映されません
04 -->
05 <p>
06 ここからは、表示されます。コメントアウトの範囲が終わったので。
07 </p>
「インライン要素」とは、「行内の一部」ということであり、 主に、或るブロック内の或る行にあるテキストに対して操作を行うものです。 したがって、インライン要素は、「ブロックレベル要素」の内部で使用するものです。
01 <p>
02 詳細は以下のリンクを参照。
03 <a href="http://www.aaa.bbb">参照先です</a>
04 </p>
01 <p>
02 次のような写真が撮れました。
03 <img src="./2013hawaii.jpg" alt="2013年夏のハワイ写真" width="200" height="400" />（ここに画像が出てきます）
04 </p>
src属性には、画像ファイルのアドレス(ファイル名)を指定しますが、alt属性には、「画像が表示できない時に代わりに表示されるテキスト」を指定します。画像が表示できないブラウザや音声ブラウザを使ってWebページを表示させる場合もあるので、この属性は必須のものとされています。
01 <p>
02 <em>ここが強調されます</em>（多くのブラウザでは斜体になります）
03 <strong>ここが強調されます</strong>（多くのブラウザでは太字になります）
04 </p>
では、簡単な HTML ドキュメントを作成してみましょう。 sample-html.htmlを右クリックして、 「名前を付けてリンク先を保存」(Google Chromeの場合)、もしくは、「名前を付けてリンクを保存」(Microsoft Edgeの場合)を選んでサンプルファイルを保存してください。
保存したら、まずは、このファイルをテキストエディタから開いてみましょう。 TeraPadを開いてから、このファイルをドラッグ&ドロップしてみてください。
TeraPadで見るとわかるように、最初は、まったくタグが入っていません。 このファイルをエクスプローラでダブルクリックすると、今度は、Google Chromeで開くことができます。 しかし、ブラウザが解釈すべきタグがまだ何も書かれていないので、そのままベタ書きで表示されてしまいます。
以前話にあったように、ファイルをダブルクリックすると、その拡張子に関連付けられたアプリケーションが起動します。 HTML 文書の場合、Google Chromeが立ち上がりますが、HTML 文書はテキストエディタでも開くことができるので、同時にTeraPadでも開いています。
このファイルに、上で説明した内容を参考にタグを追加して、HTML文書を完成させてみましょう。 タグを少しずつ追加し、ブラウザ上でどのように表示が変わっていくか確認しながら進めていくと、それぞれのタグの役割が分かりやすいと思います。
解答例は、answer-html.pngの画像を参考にしてみてください。 完成したものをTeraPadで表示させたものです。 HTMLのタグが色付きで表示されているので分かりやすいと思います。 また、実際の解答のHTMLファイルはanswer-html.htmlになります。 (今回は練習なので提出は不要です。)
なお、ここではテキストエディタとしてTeraPadを使っていますが、メモ帳など、他のテキストエディタを使っても大丈夫です。
