yoppa.org

Web表現 2010

HTML入門

先週の復習：Webを支える重要な3つの仕組み

まず先週の最後にまとめた、Webを支える重要な3つの仕組みについて簡単におさらいします。

  • URL
    • Uniform Resource Locator
    • ネットワーク上の情報を一意に特定するアドレスの指定方法
  • HTTP
    • HyperText Transfer Protocol
    • コンピュータ同士が情報をやりとりするルール
  • HTML
    • HyperText Markup Language
    • 環境にかかわりなく、WWWを記述するための文書記述言語

これからこの授業でWebのページを作成していくということは、この3つの仕組みのなかのHTML(Hyper Text Markup Language)を記述するという作業になります。

では、HTMLとは何なのか、より詳細について考えていきます。

HTML = ハイパーテキスト(Hyper Text) + マークアップ(Markup)

HTMLはHyper Text Markup Languageです。これを直訳すると「ハイパーテキストをマークアップするための言語」となるでしょう。「ハイパーテキスト」はハイパーリンクによって複数の文書を関連づけ結びつける仕組みを意味するということを先週の授業で解説しました。詳細は先週の授業資料を参照してください。

マークアップ(Markup)とは何か?

では、HTMLという用語に含まれるもうひとつのキーワード「マークアップ(Markup)」とは何でしょうか? マークアップはもともとは出版物の原稿に印刷に関する指示などを記号として原稿用紙の余白に書き込んだことを意味しています。HTMLにおけるマークアップも、文章の中に目印を記入していくことを意味しています。では、文章の中に、何を目印として記入していくのでしょうか。実際の簡単な文書を例に考えてみます。

例えば下記の図のような運動会のお知らせの文書があったとします。わたしたちは、この文書をちらっと見るだけで全体の構造を瞬間的に把握することが可能です。

この文書を良くみると、その構造を瞬間的に理解させるために様々な工夫がされていることに気付きます。例えば、ヘッダーとフッターにあたる部分は文字を右詰めにして他の部分と区別しています。また文書の見出しは太く大きい文字にすることで、目立たせています。また各段落の間に空白を入れるとで文章の意味のブロックを明確にしています。もし、全く同じ内容の文書を、全く何の変化をつけず同じ文字の大きさで改行も一切入れずに作成したら、おそらくとても読みとりずらい文書になるでしょう。

この文書をその役割ごとに分割して整理すると、下記の図のようになります。

つまり、この「運動会開催のおしらせ」のようなシンプルな文書の中にも、その役割に応じて様々なブロックに分かれています。その文書内のパート毎の役割を強調するために適切なデザインをすることで、文書の構造が明快になり、結果として読みやすい文書になるのです。

マークアップとは、文書の構造を指定して文書のなかに書き込んでいくことを意味します。先程の例でいうと、「ヘッダー」「見出し」「段落」「箇条書き」「フッター」といった構造を文書の中に書き込んでいきます。文書の中にその構造に応じた適切な目印(マークアップ)を記入していくことが、HTML作成の主な作業となります。

マークアップの基本：どこから(開始)どこまで(終了)が、何の要素か

文書の中で、ある特定の部分に目印をつける(= マークアップ)には、その始点と終点に目印をつけて、その役割は何かを指示すれば正しく伝えることが可能です。HTMLでも、その要素がどこから始まって(開始)、どこで終わるのか(終了)を目印をつけて指示していきます。HTMLではこの開始位置と終了位置を伝える目印のことを「タグ」と呼んでいます。

「タグ」に記述する内容は下記の3つとなります。

  1. どこから：開始タグ
  2. どこまで：終了タグ
  3. 要素の種類：要素タイプ

例えば、h1という一番大きな見出しを意味する要素をマークアップするには、下記のように記述します。

HTMLの文書の中では、山括弧 < > が重要な意味を持ちます。この < > で囲まれた部分は、文書内にマークアップした命令を意味しています。これを「タグ」と呼んでいます。要素のはじまりを示す開始タグは、<要素名> 、要素の終わりを示す終了タグは </要素名> とスラッシュ「/」のあり・なしで区別されています。

この例では、h1要素という文書内の「大見出し」を表す要素で説明しましたが、この「h1」の部分にあたる要素名を変えていくことで、様々な文書内の構造を記述することが可能となります。今日はこのなかから頻繁に仕様されるHTMLの代表的な要素をいくつか紹介します。

※ この授業では、XHTML 1の文法に準拠してタグを記述していきます。XHTMLでは全てのタグの要素名は小文字で記述するように決められています。ですので、この授業ではタグの要素名は小文字で記入するものとします。

HTML文書の骨組みを記述する – <html> <head> <body>

ほとんどのHTML文書は下記のような構造をしています。

  • html要素 – 文書全体を包括する要素。その文書がHTMLであることを示している。
  • head要素 – その文書自身の情報を記述する要素。タイトル、文字コード、キーワード、要約などが入る。
  • body要素 – 文書の本体を表す要素。Webブラウザ内に表示される部分。

実際にこのHTML文書の大枠の構造を記述してみましょう。テキストエディタ(この授業では、EmEditorを使用します)を起動して、下記のHTMLを記入します。記入を終えたら、「index.html」というファイル名で保存してください。

[sourcecode language=”html”]
<html>
<head>
</head>
<body>
</body>
</html>
[/sourcecode]

文書の題名を記述する – <title>

では、骨組みだけ記述してまだ内容は空白のHTMLファイルに題名を記入しましょう。文書の題名はその文書自身に関する情報なので、head要素の中に記入します。文書の題名はtitle要素を使用します。

今後ページを公開した際に、このtitle要素をその文書全体の内容を的確に要約した内容で記述することがとても重要です。たとえばユーザがそのページをブックマークすると、title要素の内容がブックマークの名称として利用されます。また、検索エンジンで検索した結果もtitle要素が最初に表示され、該当ページへのリンク部分となります。

では、先程のファイルにtitle要素を付加してみましょう。

[sourcecode language=”html”]
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
</body>
</html>
[/sourcecode]

この状態でファイルを保存して、Webブラウザで開いてみましょう。ページの内容は空白ですが、ウィンドウのタイトルにtitle要素で指定したタイトルが表示されているはずです。

段落を記述する – <p>

それでは、いよいよページの本体、body要素に文章を記述していきましょう。今日は最も基本的な要素で、頻繁に用いられる2つの要素、「段落」と「見出し」についてマスターしましょう。

まず初めに「段落」を記述します。HTMLでは、段落のひとつひとつを要素としてマークアップします。段落を表す要素は、p要素です。

では先程タイトルだけ記入したページに、段落で文章を入れてみましょう。

[sourcecode language=”html”]
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
</body>
</html>
[/sourcecode]

では、この状態でページをプレビューしてみましょう。それぞれの段落が空白行で区切られて、ひとかたまりの段落とわかるようにレイアウトされると思います。HTMLで本文の文章を書く場合には、基本はこのp要素でマークアップしていくことになります。

見出し – <h1> 〜 <h6>

では次に、段落に分けた文章を要約する「見出し」をつけてみましょう。わたしたちが普段文章を書く場合、見出しはその重要度や包括する内容の広さの段階に応じて、大きな見出しから小さな見出しへと段階をつけて記述しています。HTMLの見出しも同様に全部で6つの段階があります。見出しのレベルが大きい順から、h1, h2, h3, h4, h5, h6 と段階的に定義されています。

実際にこの見出しを順番に記述すると、Webブラウザ側でその見出しのレベルに応じて文字の大きさや太さなどが調整されて、見出しの段階が視覚的にわかるように工夫されています。

しかし、ここで注意しなくてはならないことは、h1〜h6要素は見出しを表現するものであって、文字の大きさや太さを表現するためのものではないという点です。文字を強調したいために見出しの要素を用いたり、あまり大きな文字で表示したくないので、見出しのレベルを低いものから始めたりすることは正しいHTMLの構造ではありません。文字の大きさや太さの設定は、今後の授業で別の方法(スタイルシート)で設定していきます。ですので、この段階では文字の大きさや太さに関しては気にせず、あくまで文書の構造を正確にマークアップするように心掛けてください。

では先程の段落を記述したページに、見出しを入れてみましょう。

[sourcecode language=”html”]
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめに</h1>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
<h2>このページについて</h2>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。</p>
</body>
</html>
[/sourcecode]

このHTMLをWebブラウザで開くと下記のように表示されます。一番大きな見出しh1要素と、次に大きな見出しh2要素が表示されています。

HTMLは文書の構造の記述に専念する

ここまでの解説で、文書の中にに「タグ」と呼ばれる目印を記入していくことで、簡単にWebブラウザで表示可能なHTML文書が作成できることが実感できたと思います。HTMLを学ぶには、まずはHTMLの要素の種類とその用法を憶えていくことになります。理解した要素が増えるほど、よりその文書の意味に忠実な、きめ細かなマークアップをしてくことが可能となります。

ここで、注意しなくてはならない点があります。様々な「タグ」= 要素を知るにつれて、そのタグを組み合せて、文書の体裁やデザインを整えていこうとしてしまう人がいます。たとえば、タグの種類を変化させて、本文の文字の大きさを変えてみたり、文字の配置をタグをトリッキーに駆使してレイアウトしたりといった方法です。

HTMLで文書の体裁(= デザイン)を整えようとするのは、正しい使用法ではありません。HTMLはあくまで文書の「構造」のみを記述する目的で使用すべきです。文書の構造を正しくHTMLで記述することで、環境に依存せずに世界中のより多くの人が共有できるようになります。またサーチエンジンなどのコンピュータのプログラムにとっても理解し易い形式であるといえます。

文書の体裁(= デザイン)を整える方法は、この授業の後半で取り扱います。ですので、それまではWebブラウザで表示される見た目は気にせずに、HTMLを作成する際には、段落はp要素、見出しはh1 〜 h6要素、というように必ず要素の意味と文書の構造を一致させて、正しく構造を写しとるように心掛けてください。

今日のまとめ

今日の授業では、HTMLの重要な概念「マークアップ」について学んだ上で、簡単なHTMLを作成してみました。その際に、HTMLは文書の構造を記述するための仕組みであるという点に注意してください。

次週は、今日とりあげた「段落」「見出し」といった基本的な要素に加えて、より多様なマークアップのための要素について解説していきます。