第2回　HTML | 情報基礎１

Contents

1 HTMLとは
- 1.1 ページのソース
- 1.2 マークアップ言語
2 HTMLの文法

HTMLとは

ページのソース

前回、ワードプロセッサで作ったファイルをターミナルで表示してみると、画面に見える文章とはぜんぜん違うということをやりました。ウェブページでも同じようなことがあります。

練習問題 02-1（☆）

Firefoxで適当なページを表示し、メニューの【ツール】→【Web開発】→【ページのソース】を選択しなさい。
通常の表示とソースの間の対応関係は見当がつくでしょうか？

ウェブページとしてコンピュータの中に保存されているのは、ソースの方です。通常目にする画面は、ソースに書かれている内容を元にして、ブラウザが人間に見やすいように表示してくれたものです。

なお、ウェブページに限らず、コンピュータの中で何か処理をする時に元になるものは、ソースと呼びます。ソース(source)は「源」という意味です。sauceではありません。

ウェブページの場合、ソースは HTML (HyperText Markup Language) という言語で書きます。試しに簡単なウェブページを作ってみましょう。

練習問題 02-2（☆）

テキストエディタで次の内容を書き、ファイルに保存しなさい。ファイル名は何でもいいですが、必ず最後に .html を付けます。ここでは ex02-2.html にしましょう。

XHTML

テストほげほげほにゃらら

1
2
3

テスト
ほげほげ
ほにゃらら
保存したファイルをブラウザで開いてみなさい。
- 通常はダブルクリックでブラウザが開きます。
- Safariが開く場合は、Firefoxのメニューの【Firefox】→【環境設定…】→【詳細】でFirefoxをデフォルトWebブラウザに設定してください。
- miが開く場合は、ファイルのアイコンをドラッグしてFirefoxのウィンドウの中にドロップします。ファイルを右クリックしてメニューを出し【このアプリケーションで開く】の中から【Firefox.app】を選ぶ方法もあります。
- 何も開かない場合はファイル名の最後（拡張子）が .html か確認して下さい。
ファイルの内容がブラウザで表示されますが、同じ大きさでひとつながりに表示されてメリハリがありません。「テスト」の部分は見出しなので他と区別して表示するように指示してみましょう。ファイルを次のように書き換えます。

XHTML

<h1>テスト</h1> ほげほげほにゃらら

1
2
3

<h1>テスト</h1>
ほげほげ
ほにゃらら
エディタでファイルに保存し、ブラウザで再読み込みしなさい。
「ほげほげ」と「ほにゃらら」は箇条書きにしてみましょう。ファイルを次のように書き換えます。

XHTML

<h1>テスト</h1> <ol> <li>ほげほげ</li> <li>ほにゃらら</li> </ol>

1
2
3
4
5

<h1>テスト</h1>
<ol>
<li>ほげほげ</li>
<li>ほにゃらら</li>
</ol>
エディタでファイルに保存し、ブラウザで再読み込みしなさい。

HTMLにはいろいろな規則や約束があります。上のように書いてもたいていのブラウザで問題なく表示されますが、正しいお作法に則って書くと次のようになります。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>練習問題02-2</title>
  </head>

  <body>
    <h1>テスト</h1>
    <ol>
      <li>ほげほげ</li>
      <li>ほにゃらら</li>
    </ol>
  </body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ol>

<li>ほにゃらら</li>

</ol>

</body>

</html>

エディタでまず上のように書き換え、次に「テスト」と「ほげほげ」と「ほにゃらら」の部分を好きな言葉で置き換えてから保存し、ブラウザで再読み込みしなさい。

同じファイルをブラウザで開くのとテキストエディタで開くのでは、見えるものが全然違います。ブラウザで開くのは舞台を観客席から見るようなものなのに対して、テキストエディタで開くのは舞台裏を見るようなもので、舞台を作り上げる仕掛けが全部見えています。

マークアップ言語

HTMLはマークアップ言語の一種です。マークアップとは、文章に対して構造や体裁などの情報を付け加えることです。ワードプロセッサとの違いは、ワードプロセッサが見た目をそのまま編集するのに対して、マークアップ言語は指示を文章の中に埋め込んでおき、後で完成形にします。

上の練習問題では、「テスト」というのは画面に表示される文字ですが、<h1>と</h1>は画面に表示されるわけではなく、ここからここまでが見出しであるという指示です。
ブラウザはこの指示を読み取って、「テスト」という文字を大きめに表示します。

参考資料

マークアップ言語 – Wikipedia

HTMLの文法

要素とタグ

HTMLのマークアップ指示は文章の構造を示すものです。文章を構造に従って分解したそれぞれの部分を「要素」と呼びます。例えば、見出しや段落や表が要素になります。

ある要素の中に別の要素が含まれることもあります。例えば、箇条書き(ol)要素の中には項目(li)要素があります。ページ全体は必ずhtml要素になり、他の要素はその中に入っています。

要素はタグによって区切られます。例えば、<ol>や<li>のように、要素名を<>で囲んだものがタグです。

タグには開始タグと終了タグがあり、必ず対にして要素の最初と最後に置きます。例えば、見出し(h1)要素は<h1>という開始タグから始まります。それに対する終了タグは</h1>のように要素名の前にスラッシュを付けます。

要素によっては終了タグがなく、開始タグだけで要素になるものがあります。例えば、<meta charset="utf-8">はこれだけでmeta要素になります。

開始タグには付加的な情報として属性を書くことができます。属性は、「属性名=値」という形で、複数個ある場合は空白で区切って書きます。例えば、<meta charset="utf-8">の場合は、metaが要素名でcharsetが属性名、"utf-8"がcharset属性の値です。どのような属性があるかは要素ごとに決まっています。

練習問題 02-3（☆☆）

練習問題02-2で作ったHTMLファイルにはどんな要素があるでしょうか？それぞれの要素の範囲を箱で囲んで示しなさい。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>練習問題02-2</title>
  </head>

  <body>
    <h1>テスト</h1>
    <ol>
      <li>ほげほげ</li>
      <li>ほにゃらら</li>
    </ol>
  </body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ol>

<li>ほにゃらら</li>

</ol>

</body>

</html>

正確に言うと、1行目の<!DOCTYPE html>は要素ではなくて「宣言」です。これは、ファイルの内容がHTML5の文法に従って書かれていることを示しています。ブラウザは、まず先頭の宣言を見てファイルの内容を解釈します。HTMLの違うバージョンやXHTMLで書く場合は違う宣言になります。

参考資料

HTMLの基本 – HTMLクイックリファレンス

改行とコメント

HTMLで書いた文章をブラウザで表示する時、ひとつながりの文章は詰めて表示されます。つまり、HTMLを書く時に改行や空行を入れても、ブラウザには無視されます。ブラウザで見た時に改行して欲しい場合は、段落(p)要素や改行(br)要素で指示する必要があります。

ウェブページを作る時、ソースにはメモとして書いておきたいけれど、ブラウザでは表示してほしくない場合があります。そのような時は、HTMLのコメントとして書きます。コメントはに挟まれた部分で、この部分はブラウザでは表示されません。

いろいろな要素

HTMLの要素はたくさんありますから、それを全部覚えるのは大変です。それよりも必要に応じてリファレンスを調べられるようになりましょう。

練習問題 02-4（☆☆☆）

参考資料(HTML5リファレンス)を見て、次の要素の書き方を調べなさい。
- 段落
- 見出し
- 番号無しの箇条書き(順序のないリストと、リストの項目)
- 番号付きの箇条書き(順序のあるリストと、リストの項目)
- 定義・説明リスト
- 表

テキストエディタで新しいファイルを作り、次の内容を書きなさい。このファイルは後でも使いますから introduction.html という名前にしましょう。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>自己紹介</title>
  </head>

  <body>
    ここに自分の自己紹介を書きこむ
  </body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

ここに自分の自己紹介を書きこむ

</body>

</html>

10行目の「ここに自分の自己紹介を書きこむ」をコメントにし、ブラウザでは見えなくなることを確認しなさい。
上のファイルのbody要素の中に次のことを書き、ブラウザで見てみなさい。
- ページの見出し。「慶應太郎の自己紹介」というような感じで。
- 出身の小学校、中学校、高校を、箇条書きで書く。
- 自分の好きな本や音楽の説明を、定義・説明リストで書く。
- 自分の時間割を表で書く。

練習問題02-5（☆☆☆☆）

参考資料を調べ、次のように表示されるHTMLを書きなさい。
x²+y²=z²
この授業は情報基礎１で、~~眠くなる~~大変興味深い内容です。
昔の日本語は右から左に書いていました。

HTMLにはいくつかバージョンがありますが、最新はHTML5です。ウェブでHTMLの書き方を検索すると、古いバージョンのHTML用のタグも見つかります。古いタグを使っても、今のところは問題ないことが多いですが、将来的には表示されなくなりますから、HTML5用のタグを使いましょう。

参考資料

HTML5リファレンス – HTMLクイックリファレンス

input要素

ウェブページは文章を表示するだけでなく、データを入力して何かの処理をすることもできます。文字を入力する欄や、マウスでクリックするボタンをウェブページ内に表示するにはinput要素を使います。

input要素はもともとform要素の一部分として使うためのものですが、input要素だけでも使うことができます。

練習問題 02-6（☆☆☆）

ウェブページにはいろいろな入力の種類がありますが、多くはinput要素を使います。入力の種類はtype属性の値によって区別します。新しいファイルex02-6.htmlを次の内容で作り、ブラウザでどのような表示になるか確認しなさい。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>練習問題02-6</title>
  </head>

  <body>
    <p>テキスト入力：<input type="text"></p>
  </body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>テキスト入力：<input type="text"></p>

</body>

</html>

テキスト入力欄の場合はsize属性の値によって横幅が決まります。ファイルを修正してinput要素にsize属性を書き、横幅を50文字分にしなさい。
参考資料(HTML5リファレンス)を調べて、パスワードの入力欄、数値の入力欄、チェックボックス、汎用ボタンを追加しなさい。
- 汎用ボタンは、そのままでは白い四角いボタンです。何か文字を表示したい場合はvalue属性を使います。

上の練習問題でブラウザに表示された入力欄に何か書き込んだり、ボタンをクリックしたりしても、何も起きません。データが入力された後で何をするかは、HTMLではなく別の言語で書く必要があります。「情報基礎１」の後半ではJavaScriptを使ってデータを処理する方法を、「情報基礎２」ではデータをサーバに送信して処理する方法を勉強します。

参考資料

HTML5リファレンス – HTMLクイックリファレンス

インスペクタの使い方(HTMLを調べる)

ウェブページの構造が複雑になってくると、どうしてそういう表示になっているか、パッと見ただけでは分からなくなります。そのため、Firefoxでは、メニューの【ツール】→【Web開発】→【インスペクタ】を選択すると、ウインドウの下半分にHTMLを表示して画面との対応を確認することができます。

インスペクタが表示されている状態でマウスを動かすと、マウスが何の要素を指しているかが吹き出しで表示され、インスペクタには対応するHTMLの部分が表示されます。

参考資料

インスペクタ – MDN

チェックポイント

HTMLは何をするための言語でしょうか？
ワードプロセッサとマークアップ言語の違いは何でしょうか？
HTMLの要素とタグの関係はどうなっているでしょうか？
HTMLで番号付きの箇条書きはどのように書くでしょうか？
HTMLで汎用ボタンはどのように書くでしょうか？