初めての Web ページ

HTML は HyperText Markup Language の頭文字語であり、Web で最もよく使用されている言語です。マークアップ言語とは、内容を表すテキストを、命令を示すテキストから分離するために、テキストの一部にある種のアノテーションが「付けられている (マークアップされている)」言語のことです。

HTML ページを作成するためには、テキスト・エディターを開いて「Hello World」と入力し、HelloWorld.html という名前で保存します。エディターが .txt 拡張子を追加して、ファイルを HelloWorld.html.txt という名前で保存することがないように注意します。次に、そのファイルをファイルシステムの中で見つけて右クリックし、「プログラムから開く」 > [ご使用のブラウザー] の順に選択して、そのファイルをブラウザーで開きます。

マークアップを追加する

ブラウザーには、どのテキスト・ブロックを大きく、太字で、あるいは斜体で表示するかといった判断するための手段が必要です。この情報をブラウザーに提供するためには、そのテキストを HTML の開始タグと終了タグで囲みます。開始タグと終了タグは、<p> のように小なり記号 (<) と大なり記号 (>) で囲まれています。終了タグは開始タグと同じですが、</p> のようにタグ名の前にスラッシュが追加されている点が異なります。

test.html という名前の新しいファイルを作成し、リスト 1 のマークアップを入力します。

<div><h1>TODO List</h1><p><span>I highly </span><strong>recommend</strong> we
<em>walk</em>.</p></div>

リスト 1 で最初に使用されているタグは <div> です。このタグは通常、コンテンツを分割するために使用されます。次に使用されているタグは、見出しを表す <h1> です。見出しタグには <h1> から <h6> まで 6 種類あり、ブラウザーのデフォルトのスタイル設定では、<h1> が最大で <h6> が最小です。<p> タグは段落であり、この段落の中でテキストをデフォルトで太字の表示にするのが <strong> タグです。最後に、強調 (emphasis) の短縮形を表す <em> タグがあり、このタグはデフォルトでテキストを斜体の表示にします。

リスト 1 のマークアップをブラウザーで表示すると、図 1 のようになります。

表示スタイル: ブロックとインライン

表示スタイルは多数あり、それぞれ少しずつ異なりますが、基本的なタイプは、ブロック・スタイルとインライン・スタイルの 2 つです。ブロック・スタイルは、見出しや段落など、新しい行で始まるテキスト・ブロックのためのスタイルです。<div> タグ、<h1> タグ、および <p> タグはブロック・スタイルです。インライン・スタイルは、太字や斜体など、ブロック内で使用されるスタイルです。<span> タグ、<strong> タグ、および <em> タグはインライン・スタイルです。

意味論

意味論とは、さまざまな単語や記号の意味、そしてそれらの間にある関係を研究する学問です。HTML ページにおける意味論とは、適切なタグ名を使用して HTML ページに含まれるコンテンツを表現することを意味します。

ユーザーが Web ページを読む場合、ユーザーはどんなタグが使用されているのかを知る必要はありません。しかし、Web ページを読み取るのは人間だけではなく、例えば検索エンジンも Web ページを読み取ります。検索用に Web ページが索引付けされると、その Web ページは複数のセクションに分割され、各セクションには異なる優先度が与えられます。<h1> タグは Web ページ上で最も優先度が高いとみなされ、その次に高いのが <h2> タグ、など段々と優先度が低くなって段落に至ります。

スクリーン・リーダーというのは、視覚障害者が使用するデバイスです。スクリーン・リーダーは <strong> タグや <em> タグを検出すると、そのタグに囲まれる内容をより強く、またはより強調して読み上げます。そのため、<b> タグよりも <strong> タグ、<i> タグよりも <em> タグを使用するように推奨されています。

画像

test.html ファイルに画像を追加するためには、まず画像が必要です。使用する画像はコンピューター内にある画像でも、またはインターネットから取得した画像でも構いません。インターネットから画像を取得するためには、その画像を右クリックして「名前を付けて画像を保存」を選択し、test.html ファイルが存在するフォルダーと同じフォルダーにその画像ファイルを保存します。画像を test.html ファイルに追加するには、リスト 2 のコードを使用します。

<img src="MyImage.jpg" />

この例では、ブラウザーに対し、src 属性で指定されるパスにあるソース・ファイルを使用して画像を表示するように指示しています。

皆さんは、リスト 2 には終了タグがないことにもお気付きなのではないでしょうか。タグには、ペアになるタグと、ペアにならないタグの 2 つのタイプがあります。ペアになるタグには、テキストによるコンテンツが含まれる場合がありますが、ペアにならないタグには、決してコンテンツは含まれません。例えば、「<img>画像はここにあります</img>」のような使い方をすることはできません。<img> タグは画像を表示するために使用されるタグであり、テキストの表示には使用されないからです。タグにテキストが含まれない場合には、終了タグは不要です。そのため、リスト 2 に示すように単純にスラッシュで終了することができます。

属性

タグには、そのタグに含まれるコンテンツの表示方法をブラウザーに指示する属性を含めることができます。例えば、リスト 2 では src 属性によって MyImage.jpg へのパスを指定することで、画像を表示できるようにしています。さらに便利な属性の 1 つとして、id があります。id を使用すると、JavaScript 言語を使用してページ内の要素を見つけて操作したり、あるいは CSS (Cascading Style Sheets) を使用して要素にスタイルを適用したりすることができます。

上に戻る

文書へのリンク

アンカー・タグを使用すると、さまざまな方法で他の場所と関連付けることができます。その方法には、ハッシュ・タグ (#)、絶対 URL (Uniform Resource Locator)、相対 URL などがあります。

ハッシュ・タグ

最初の方法は、同一文書内の場所を対象とするもので、その対象の id 属性または name 属性の値の先頭にハッシュ記号を付けて参照します (リスト 3)。

<a href="#anwserA">See Answer A</a>
<a href="#anwserB">See Answer B</a>

<div id="anwserA">The answer is 41</div>
<div id="anwserB">The answer is 43</div>

ユーザーがハッシュ参照を含むリンクをクリックすると、ブラウザーに表示されている文書は該当する場所までスクロールされます。文書が短すぎてスクロールされない場合には、ブラウザーのアドレス・バーに表示されるアドレスがハッシュの場所を反映するように変更される点以外は、目に見える変化はありません (図 2)。

絶対 URL

当然ですが、URL を使用してインターネット上の他のページを参照することもできます (リスト 4)。

<a href="http://www.ibm.com/developerworks/">developerWorks</a>

相対 URL

リスト 4 に示すリンクは、アドレスが Web サイトのドメインで始まるため、絶対 URL と呼ばれます。相対 URL では同じサイト内で、あるページと相対的な位置関係にある別のページが対象とされます。これはコンピューターのフォルダー内で、ファイルにアクセスする方法と同じと考えることができます。図 3 に単純な Web サイトの構造を示します。コンピューター上のファイルやフォルダーと、インターネット上のファイルやフォルダーとの唯一の違いは、Web サーバーの場合はコンピューター上のファイルを参照してインターネット上に公開しており、これらのファイルを Web サイトと呼んでいる点だけです。

リスト 5 に、pageA.html 内で相対 URL によるリンクはどのように記述されるのかを示します。

<a href="pageB.html">See Page B</a>
<a href="subpages/subA.html">See Sub Page A</a>
<a href="subpages/subB.html#section3">See Sub Page B, Section 3</a>

リスト 5 の最初のリンクは、インターネットのアドレスで見慣れたプロトコル (http や www など) を含んでおらず、単純にページの名前だけであることに注意してください。2 番目のリンクは、フォルダー内のページを参照する方法を示しており、フォルダー名、スラッシュ、ファイル名を使用しています。3 番目のリンクは、ハッシュを使用してページ内のセクションを参照する方法を示しています。

デフォルト・ページ

リスト 5 の例では、URL にページ名を使用していますが、リスト 4 の絶対 URL の例では使用していません。Web アドレスを単純化するために、Web サーバーはデフォルト・ページを持っているからです。ページ名が指定されない場合には、デフォルト・ページの 1 つにアクセスされます。これらのデフォルト・ページの名前は任意ですが、ほとんどの場合、デフォルト・ページの名前は index.html です。

デフォルト・ページ、または参照されているページがない場合、サーバーは、そのページが見つからなかったことを示す 404 エラー・メッセージをスローします。

ブラウザーと整形式の HTML

整形式の HTMLとは、規則に従う HTML マークアップにすぎません。守らなければならない基本的な規則は以下の 2 つです。

1. タグを開いたら、閉じる
2. タグを重ね合わせない

1 つ目の規則は、必ずタグを閉じる必要がある、ということです。リスト 6 に開いたままのタグの例を示します。

<strong>My markup <em>should be well-formed</<strong>

このマークアップは、おそらく「should」という単語を強調しようとしたのだと思いますが、ブラウザーはそのようには認識せず、おそらくこのページの <em> タグの後の表示をすべて斜体にしてしまうはずです。

リスト 7 に、適切にネストされた整形式のマークアップを示します。

<p>I want my markup to be <strong>really</strong> well-<em>formed</em></p>

リスト 8 に、タグが重なり合っているため不適切な形式になっているマークアップを示します。

<p>I want my markup to be <strong>really <em>well</strong>-formed</em></p>

なぜリスト 8 が不適切なのかわからない読者の方は、実際にこのマークアップをブラウザーで表示してみると、期待どおり「well」という単語が太字の斜体で表示されるかもしれません。HTML は普通の人を対象としており、XML (eXtensible Markup Language) のように専門家を対象としたマークアップ言語とは異なります。そのためブラウザーは、不適切な形式の HTML をどのように表示すべきかを、推測して表示するように実装されています。しかし、不適切な HTML がご使用のブラウザーで正しく表示されたとしても、他のブラウザーやご使用のブラウザーの今後のバージョンでは、まったく異なる表示になるかもしれません。

HTML ツリー

マークアップは単なるテキストのように見えるかもしれませんが、ブラウザーはマークアップをオブジェクトまたは要素と認識します。これらの要素は親と子の階層構造の関係を持ちます。コンピューター科学では、1 つの親は複数の子を持つことができますが、1 つの子は 1 つの親しか持つことができません。図 4 に、ブラウザーはリスト 7 の整形式のマークアップをどのように認識するのかを示します。

リスト 8 の不適切なマークアップを階層構造に変換しようとしても、strong オブジェクトと em オブジェクトが衝突しているため、うまくいきません。そこで、ブラウザーはコードを書き直し、書き直したコードのオブジェクトを作成しようとします。しかし、ブラウザーは作者の意図を推測しなければならないため、ページは期待どおりに表示されないかもしれません。

不適切な HTML を防ぐためには、リスト 9 のようにインデントが付いたマークアップを作成するようにします。

<div>
    <p>
        <span>
            <strong>
                Bold Text
            </strong>
        </span>
        <span>
            <em>
                Italic Text
            </em>
        </span>
    </p>
</div>

上に戻る

メタ・コンポーネント

この記事ではここまで、HTML 文書のテキスト部分に焦点を絞ってきました。しかし HTML 文書にはメタ要素もいくつかあります。リスト 10 に、小さいながらも妥当な HTML 文書を示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Example page</title>
    </head>
    <body>
        <h1>Hello world</h1>
    </body>
</html>

DOCTYPE の基本

リスト 10 の最初の行 (2 行目に続いています) は、doctype と呼ばれるものです。ブラウザーでは、doctype に応じて異なる表示モードがトリガーされます。HTML マークアップの表示方法に関する規則は、一連の標準によって決められていますが、標準は年が経つとともに内容が変更され、進化していきます。HTML 文書内に doctype を指定するようにしたことで、ブラウザーは標準の変更に対応しつつも、古い標準で作成されたページを表示できるようになっています。

head 要素と body 要素

doctype の後には html タグがあり、文書内のすべてを囲んでいます。html 要素の中には、子要素として head 要素と body 要素があります。head 要素には、title 要素で始まるメタ情報が含まれます。任意のテキストを title 要素に入力すると、そのテキストはブラウザーのタイトル・バーに表示され、検索エンジンやブックマークはそのテキストによってページを認識します。また head 要素にも、さまざまなメタ情報を含むことができます (キーワード、説明、スタイルシート、スクリプトなど)。body 要素には、表示されるテキスト・コンテンツのすべてが含まれます。

スタイルとスタイルシート

スタイルシートとは、ページのスタイル定義を含む外部ファイルです。スタイルシートは、link タグによってページと関連付けられ、href 属性によって対象が指定されます。link タグはさまざまな用途に使用されるため、スタイルシートを関連付ける場合には ”stylesheet” と設定された rel 属性も link タグに含める必要があります (リスト 11)。

<link rel="stylesheet" href="stylesheets/MyStyles.css" />

また、head 要素内にある style タグの中にスタイルを直接含めることもできます。style 要素の内容には、スタイル定義を含めることも、他のスタイルシートの @import を含めることもできます。リスト 12 に、その例を示します。

<style>
    @import "stylesheets/MyStyles.css";

    #myElement{
        background:black;
        color:white;
    }

    h3{
        font-size:36px;
    }

    .bordered{
        border: 1px solid red;
    }
</style>

リスト 12 では、HTML 要素をスタイル設定するための基本的な方法についてもいくつか示しています。最初の方法は、#myElement のようにハッシュ記号を使用する方法です。このハッシュ記号により、id 属性として myElement を持つ要素がスタイル設定の対象になります。2 番目の方法は、タグ名によって要素を直接スタイル設定する方法です。この例では、すべての h3 要素のフォント・サイズは 36 ピクセルになります。3 番目の方法は、クラス名であることを示すピリオドで始める方法です。この例では、class 属性に bordered を含むすべての要素 (<div class="bordered">Stuff</div> など) がスタイル設定の対象になります。

JavaScript 言語

最近では Ajax (Asynchronous JavaScript + XML) は、至るところで使用されています。実際には、Ajax はブラウザーのデフォルトのスクリプト言語である JavaScript 言語のための、新手のマーケティング用語となっています。JavaScript 言語を使用すれば、フォームに必ず適切な値が入力されるようにしたり、要素を隠したり表示したり、さらにはページ上で要素を動き回らせたりすることもできます。

ブラウザーは HTML ページを開くと、文字どおり上から下までコンテンツを読み取りながら表示します。インターネット上のページは単純に表示されるのではなく、いくつかの要素が同時に表示されます。

リスト 13 にはスクリプトが含まれています。ブラウザーはこのスクリプトを検出すると、このスクリプトを実行し、アラート・ボックスに「Hello World」を表示します。そしてブラウザーはすべてを停止し、「OK」ボタンが押されるのを待ちます。ボタンが押されると、ブラウザーにタイトルが表示されます。この時点で title 要素が読み取られるからです。しかし、このページのテキストである「Page Content Here」は表示されません。まだブラウザーはそこまで読み込んでいないからです。

<html>
    <head>
        <title>Example page</title>
    <script type="text/javascript">alert("Hello World");</script>
    </head>
    <body>
        <h1>Page Content Here</h1>
    </body>
</html>

関数

先に触れたアラート・ボックスは、alert 関数を呼び出すことで起動されます。アラート・ボックスは、関数名の直後にある丸括弧に囲まれた引数として渡されたテキストを表示します。同じ方法でカスタム関数を作成して呼び出すことができます。リスト 14 に、customFunction 関数内で alert 関数を呼び出す方法を示します。

<script type="text/javascript">
    function customFunction(){
        alert("Called via custom!");
    }
    customFunction();
</script>

JavaScript 言語は非同期であるため、関数は呼び出されるまで実行されることがないのがほとんどです。customFunction(); の行が削除されると、この関数は呼び出されません。ブラウザーのイベント中に関数が呼び出されるようにすると、もっと関数の用途が広がります。イベントはブラウザーで発生します。最もよく使用されるイベントは window.onload です。ブラウザーがすべてのコンテンツの読み取りと表示を完了すると、window.onload が起動されます。onload イベントをカスタム関数にするためには、単純にリスト 15 に示すように設定します。

<script type="text/javascript">
function customFunction(){
    alert("Called via custom!");
}
window.onload = customFunction;
</script>

HTML 要素もイベントを持っています。リスト 16 に、マウス・クリックで関数を呼び出す方法を示します。

<html>
    <head>
    <title>JavaScript and Events</title>
        <script type="text/javascript">
            function customFunction(){
                alert("Called via mouse click!");
            }
        </script>
    </head>
    <body>
        <div onclick="customFunction">Click Me!</div>
    </body>
</html>

上に戻る

Web サーバー

Web サーバーは、クライアントがページまたはその他のリソースを要求すると、それらのコンテンツを返すソフトウェアです。ハード・ディスク・ドライブにある HTML ページを直接表示するのにも、やがて限界に達する時が来るはずです。ブラウザーに file:///Users/Documents/test.html のような URL を入力することは、理論的には、インターネット上の何らかの存在が皆さんのハード・ディスク・ドライブにアクセスしようとしていることを意味するため、セキュリティー・リスクとなります。セキュリティー・メッセージが表示されるようになったら、Web サーバーをインストールする必要があります。

幸いなことに、Web サーバーのインストールは難しくなく、インストールの方法に関するチュートリアルはインターネット上に数多く公開されています。Apache は容易にインストール可能であり、サイズが小さく、広く使用されています。IBM WebSphere Application Server は強力であり、ダウンロードして試してみることができます。

上に戻る

HTML5

HTML5 に関してよくある質問は、「最初から HTML5 を学べばよいのか、それとも HTML から始める必要があるのか？」という質問です。実際には、HTML5 も単なる HTML であり、バージョンにかかわらず、基本から始める必要があります。

確かに、HTML5 には開発者が非常に興味をそそられる新機能が用意されています。マークアップに関して言えば、HTML5 には Web ページをよりセマンティックで保守のしやすいものにする新しいタグ名が数多くあります。HTML5 用の JavaScript API (Application Programming Interface) は大幅に増えており、Web の作成者がプラグインを使用しなくても本格的な Web アプリケーションを作成できるようになっています。

上に戻る

まとめ

この記事では、整形式の HTML の基礎、そして CSS と JavaScript 言語にどのように取り掛かればよいのかについて学びました。Web 上には、皆さんのスキル・レベルを高める上で役立つリソースやチュートリアルが豊富にあります。

参考文献

学ぶために

• 「How browsers work」(Tali Garsiel のサイト) を訪れ、不適切な形式のマークアップをブラウザーがどう書き直すかを理解してください。
  
  
• 「Choosing the right doctype for your HTML documents」(Dev.Opera、2008年7月) では、さまざまな doctype について説明しています。
  
  
• ウィキペディアで「意味論」の項目を調べ、意味論について学んでください。
  
  
• ウィキペディアで「Well-formed element」の項目を調べ、整形式の HTML について学んでください。
  
  
• developerWorks の Web Development ゾーンには Web ベースのさまざまなソリューションを解説した記事が豊富に用意されています。
  
  

製品や技術を入手するために

• 皆さんに最も適した方法で IBM 製品を評価してください。製品の試用版をダウンロードする方法、オンラインで製品を試す方法、クラウド環境で製品を使う方法、または SOA Sandbox で数時間を費やし、サービス指向アーキテクチャーの効率的な実装方法を学ぶ方法などがあります。
  
  
• WebSphere Application Server Community Edition を試してみてください。このサーバーは Apache Geronimo 技術の上に構築されており、統合済みで無料、そして軽量の Java EE 5 (Java Platform, Enterprise Edition 5) アプリケーション・サーバーです。
  
  
• Apache HTTP サーバーをダウンロードしてください。
  
  

議論するために

• 今すぐ developerWorks プロフィールを作成し、HTML に関するウォッチ・リストを設定してください。developerWorks コミュニティーとずっとつながっていられます。
  
  
• Web 開発に関心を持つ他の developerWorks メンバーを見つけてください。
  
  
• Web の話題に焦点を絞った developerWorks のグループの 1 つに参加し、皆さんの知識を共有してください。
  
  
• Roland Barcia 氏が彼のブログの中で Web 2.0 とミドルウェアについて語っています。
  
  
• developerWorks のメンバーが Web のトピックに関して共有しているブックマークを調べてみてください。
  
  
• 即座に答えを得るために、Web 2.0 Apps フォーラムを訪れてください。
  
  
• 即座に答えを得るために、Ajax フォーラムを訪れてください。
  
  

著者について

Mike Wilcox はテキサス州 Frisco で急成長中の新興企業、BetterVideo の Director of Technology です。彼はフロントエンド技術とオンライン動画サービスを担当しています。彼は Ajax やその他の Web 技術に関して頻繁に講演を行っており、2009 Rich Web Experience や、2009 Dallas TechFest、その他多くのカンファレンスでも講演を行いました。オープンソースに関する彼の成果は Dojo Toolkit に反映されています。彼は Dojo Toolkit のコミッターとして多くのマルチメディア技術を実装してきました。その中には、複数ファイル・アップローダー、オーディオおよびビデオ・コンポーネント、ベクター・ベースの DojoX Drawing などが含まれています。

この記事を評価する

コメント

上に戻る

目次

• 初めての Web ページ
• 文書へのリンク
• メタ・コンポーネント
• Web サーバー
• HTML5
• まとめ
• 参考文献
• 著者について
• コメント