DHC-オンライン講座
文系の人にもわかる プログラミング入門

Lesson 2   HTMLの基本

Lesson 2ではウェブページ(ホームページ)を作成するための言語であるHTMLについて学びます。 この講座の主題はあくまでも「プログラミング」(プログラムの作成法)ですが, この講座で学ぶJavaScriptという「プログラミング言語」を身につけるにはどうしてもHTMLの知識が必要になります。

この講座ではHTMLについて深く学ぶことはしません。 JavaScriptのプログラムを作る上で必要なものを, 順次学んで行きます。 まず, ここでは文章中心のページが作成できるのに必要な「タグ」を学びます。 以降Lessonでも, 作成するプログラムとの関連で必要なHTMLの要素を少しずつ追加していきます。 すでにHTMLを知っている人も, プログラミングの予行演習という観点から, ざっと目を通してください。

簡単なHTML文書

ともかくHTMLの文書の例を見てみましょう。

プログラム2-1example02-01.html HTML文書の例(←クリックするとこの例の文書がブラウザのウィンドウ内に表示されます)

普段使っているワープロやエディタを起動して, この「HTML文書」を入力し, たとえば, example02-01.htmlという名前で「テキスト形式」でファイルに保存してください。

ブラウザ(browser)に読み込むと, 図2-1のように表示されます。 これは, WindowsのInternet Explorerで表示したところですが, 別種のコンピュータの別のブラウザ, たとえばMac OS XのFirefox(ファイアフォックス)で表示しても, ほぼ同じように表示されます(図2-2)。

図2-1 WindowsのInternet Explorerによる表示
図2-2 Max OS XのFirefoxによる表示

HTMLの文書では「タグ」が重要な働きをします。 どんなブラウザでも同じように表示されるための, 中心的な役割をしているのがこのタグです。 タグは, その名前(英語名)を「<」と「>」で囲んだ形をしており, このタグを見てブラウザが文字や図などをウィンドウ内にどう表示するかを決めます。 上の例は短いですが, それでも<html>, <head>, <title>, <meta>, <body>など, たくさんのタグが使われています。

トレーナーやTシャツなど首のところに「タグ」がついています。 タグを見ると, 大きさ(S, M, L, XL, XXL, ...)やメーカー, 時には洗濯の仕方などがわかります。 同じように, HTMLの文書では文字や単語, 文などにタグを付けて, これはタイトル, これは大きく, これは斜体で, などと示すわけです。

多くのHTMLタグには, 「開始タグ」と「終了タグ」があります。 終了タグは開始タグの名前の頭に「/」が付いたもので, 開始タグと終了タグに囲まれた部分が, そのタグが適用される対象となります。 たとえば, プログラム2-1の6行目あたりにある次の行に注目しましょう。

<title>JavaScriptとHTMLの関係</title>

開始タグ<title>と終了タグ</title>に囲まれた「JavaScriptとHTMLの関係」という文字列が, タイトル(表題)というわけです。 上の例に出てくる, ほかのタグについても簡単に説明しましょう。

上の例のように, 見出しと普通の段落からなる文章を書きたい場合は, <body>と</body>のあいだに, 見出しタグ(<h1>から<h6>まで)と<p>タグを使って次々と段落を追加していけばよいわけです。

なお, 「<!--」と「-->」で囲まれた部分は「コメント(comment)」で, この中に書かれた文字列はブラウザには表示されません(「<!--」と「-->」はタグではありません)。 コメント部分には何を書いてもよいので, たとえば, 次のようなメモを書いたりもできます。 コメントは複数の行にまたがることもできます。

<!-- あとで, ここに追加する。 候補は次のとおり。 
<h2>韓国のバス</h2>
<h2>韓国の携帯電話</h2>
-->

属性と属性値 ── <タグ名 属性1="属性値1" 属性2="属性値2" ...>

上の説明では<meta>タグの説明をとばしました。 このタグには終了タグはありません。 その代わり, 最後が「/>」となっており, このタグには対応する終了タグがないことを示しています。

このタグ単独で(対象の文字列なしで)役目を果たすものです。 タグの対象となる文字列の代わりに「属性」が指定されています。 <meta>タグにはhttp-equiv, contentなどの属性があり, それぞれの属性に「値(属性値)」を指定することによって, この文書の性質をブラウザに知らせて, ブラウザによる処理を助ける役目をします。 下のように書くことで, このファイルの内容は日本語で, 「utf-8」と呼ばれるコードで書かれていることを指定しています。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

この指定がないと, ブラウザの設定によっては日本語が正しく表示されないで, いわゆる「文字化け」を起こすことがあります。 最近のほとんどのパソコンでは文字コードとしてutf-8が使われていますので, 日本語の文書では, この行はこのまま入れるようにしましょう。 なお, 文字コードとしてutf-8以外のもの(たとえば, 以前よく使われていた「シフトJIS」など)を指定した場合は, その指定をここに書くことになります。

属性値は必ず一組の引用符(「"..."」または「'...'」)で囲みます。

なお, タグや属性に大文字と小文字の区別はありません。 つまり, <h1>と書いても<H1>と書いても同じことになります。 ただし, XMLという広く使われるようになってきている標準に則った書式で書く場合には, タグは小文字にする必要があります。 このため, これから作るウェブページでは小文字のタグを使うのがよいでしょう 以降, この講座でも, タグや属性は原則として小文字で書きます。

なお, ブラウザごとに対応しているタグが違っており, ブラウザが対応していないタグは無視されてしまいます。 つまり, そのタグがなかったものとして扱われます。 無視されたタグに囲まれた文字は画面に表示はされますが, それがタグで意図したとおりに表示される保証はなくなります。

この講座で紹介するタグはここ数年流通しているすべてのブラウザが対応していますから, この種の問題は起こらないはずです。 ほかの本などで調べたタグを使うときには, そのタグにほとんどのブラウザが対応しているか意識して使った方がよいでしょう。

タグとブラウザの関係

HTML文書について, 別の角度からタグの特徴を整理してみましょう。

注意!

ここでいう「スペース」とはいわゆる「半角」のスペース(アルファベットの文字を入力できる状態, つまり仮名漢字変換をオフにした状態でスペースバーを押したときに入力される文字)です。 いわゆる「全角」のスペース(文字の幅が漢字と同じ空白文字)は漢字や平仮名などと同じように扱われ, その分のスペースが表示されてしまうので, ここでいう字下げの目的には使えません。

Lesson 3以降でJavaScriptのプログラムを入力する際にもスペースを使って字下げなどができますが, この場合も使えるのは半角のスペースだけです。 全角のスペースを使うとそれは空白としては扱われず, 多くの場合エラーになります。 見ただけではわからないので, 入力時に気をつける必要があります。

HTMLエディタの利用

ホームページが世の中に広まり始めた頃は, ほとんどの人が直接タグを使ってHTML文書を作成していましたが, 最近では「HTMLエディタ」と呼ばれるプログラムが使われるようになってきています。 Adobe DreamWeaver(図2-3), Microsoft FrontPage, IBMの「ホームページ・ビルダー」などなどたくさんの種類がありますが, HTMLエディタを使うと, タグを使わずにワープロソフトと同じような感じで画像などが入ったウェブページを作成できます。 HTMLの「ソース」を見ながら, ワープロのように編集できます。 たとえば, 図の上半分にはHTMLのソースが, 下にはブラウザに表示されるイメージが表示されています。

HTMLエディタだけで話がすむのならば, タグをおぼえる必要ないのですが, このLessonでタグの説明しているのは, JavaScriptのプログラムを作るのには, どうしてもタグを操作する必要があるからです。

画像の挿入や位置指定, 表(テーブル)の作成, 細かなレイアウトの指定などを行うには, HTMLエディタがとても便利で効率的です。 おすすめは, 一応タグの働きを理解した上で, HTMLエディタを利用するという方法です。 そうすれば, 両方の「イイトコ取り」ができます。 この講座はプログラミングを学ぶためのものですので, HTMLエディタについてはこれ以上触れませんが, 本格的な「ウェブプログラミング」をする際には, HTMLエディタが便利でしょう。

図2-3 DreamWeaverの画面

 

まとめ

HTMLの文書の特徴と, ごく基本的なタグを見ました。 実際に例題を自分で入力して, 自分なりにいろいろ変えてみてください。 次のLessonから始まるプログラミングについても同様ですが, 自分で試してみないとなかなか身に付きません。

HTML文書の「型紙」

簡単なHTMLの文書を作る際には, 次の「型紙」を利用しましょう。 【タイトル】のところにウェブページ(文書)のタイトル(表題)を, 【本文】のところに書きたい内容を入れます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【タイトル】</title>
</head>
<body>
  【本文】
</body>
</html>

HTMLのタグなど

DHC-オンライン講座
文系の人にもわかる プログラミング入門
Lesson 2