[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

コンピュータIIE(HTML入門)第2回

目次 索引
2.1 文と段落
2.1.1 文
2.1.2 段落
2.1.3 特殊文字
2.2 ドキュメントの構成要素
2.2.1 見出し
2.2.2 引用
2.2.3 アドレス
2.3 リスト
2.3.1 リストの種類
2.3.2 番号付きリスト
2.3.3 番号なしリスト
2.3.4 定義リスト
2.4 改行の制御
2.4.1 整形済みテキスト
2.4.2 強制改行
2.4.3 水平線
2.5 演習2
2.6 レポート課題
2.7 参考資料
addressタグ  &  blockquoteタグ  brタグ  ddタグ  dlタグ  dtタグ  >  h1タグ  h2タグ  h3タグ  h4タグ  h5タグ  h6タグ  hrタグ  liタグ  <  olタグ  preタグ  pタグ  "  ulタグ  W3C  アドレス  引用  開始タグ  強制改行  終了タグ  水平線  整形済みテキスト  タグ  段落  定義リスト  特殊文字  番号付きリスト  番号なしリスト  見出し  リスト 

2.1 文と段落

2.1.1 文

前回の授業では、"Good afternoon!"と表示するホームページを作成しました。 絵を貼り込んだカラフルなホームページを作りたいかもしれませんが、ホームページの基本はテキスト(文章)です。 今日はホームページの見栄えに気を取られず、テキストの内容を伝えることに集中します。

前回の手続きで、"Good afternoon!"とタイプする代わりに、メールを書く要領でテキストをタイプしてください。 すると、ブラウザはそのテキストをウィンドウの幅に合わせて表示します。

例 2.1 
ホームページを作るには、
HTMLを学習する必要があります。

  HTMLとは、
HyperText   Markup   Language
の略です。
ホームページを作るには、 HTMLを学習する必要があります。 HTMLとは、 HyperText Markup Language の略です。

ここで、文字化けした場合は、メニュー・バーで、「表示」→「テキストエンコーディング」→「Unicode(UTF-8)」とクリックするか、メニュー・バーで、「Safari」→「環境設定」→「表示」→「デフォルトエンコーディング」→「Unicode(UTF-8)」とクリックしてください。

テキスト中にスペースや改行を続けて入れても、ブラウザはそれをひとつのスペースと見なします。 (一部に例外があります。) どのくらいスペースをとるか、どこで改行するかなどは、基本的にブラウザが決めます。

2.1.2 段落

長いテキストでは、内容のまとまりに応じて 段落 を作る必要があります。 しかし、字下げをしても、空行を入れても、ブラウザはそれをひとつのスペースと見なし、段落とは見なしません。 ブラウザに「ここからここまでが一つの段落です」のような指示を与えるには、 タグtag )を使います。

段落の始めに <p> と書き、段落の終わりに </p> と書いてください。 するとブラウザは、 <p></p> に囲まれた範囲を段落(Paragraph)と見なします。 そして、段落らしく、前後と独立させ、上下に余白を設けて表示します。

例 2.2 
<p>HTMLだけでは物足りない人もいるでしょう。</p>
<p>
より高度なホームページを作るには、
JavaやJavaScriptを勉強してください。
Javaはプログラミング言語、
JavaScriptはスクリプト言語です。
</p>
<p>なお、JavaとJavaScriptは別物です。</p>
HTMLだけでは物足りない人もいるでしょう。

より高度なホームページを作るには、 JavaやJavaScriptを勉強してください。 Javaはプログラミング言語、 JavaScriptはスクリプト言語です。

なお、JavaとJavaScriptは別物です。

この <p></p> がタグです。 詳しくは、 <p>開始タグbeginning tag )、 </p>終了タグending tag )です。

注意

HTMLの古い規格では、 <p> は段落の終わりを意味していました。 もちろん、現在の規格では段落の始めを意味します。 古い資料を読むときは注意してください。

注意

規格の上では、終了タグ </p> は省略できます。 段落の終わりは文脈から予想しやすいので、こう定められたのでしょう。 この授業では、この予想を当てにせず、きちんと終了タグを書くことにします。

2.1.3 特殊文字

テキスト中に <p> と書くと段落の始めになることは分りました。 では、本当に<p>と表示したいときは、どう書けばよいでしょうか。 正解は、 &lt;p&gt; と書く、です。

ブラウザは、文字 < および & から始まる文字列を特別扱いします。 < の場合は、タグの一部と見なします。 & の場合は、文字を参照する目印と見なします。 特殊文字 は、次の表にしたがって書き換えてください。 そうすれば、ブラウザは書き換え前の文字を表示します。

表 2.1  特殊文字の書き換え
特殊文字 書き換え 覚え方
< &lt; Less Than
> &gt; Greater Than
& &amp; AMPersand
" &quot; QUOTe
例 2.3 
<p>
プログラムで、x &lt; y &lt; z と書いてはいけません。
正しくは、x &lt; y &amp;&amp; y &lt; z です。
</p>
プログラムで、x < y < z と書いてはいけません。 正しくは、x < y && y < z です。

2.2 ドキュメントの構成要素

2.2.1 見出し

典型的な本は、表紙に書名が書いてあり、本文はいくつかの章に分かれ、章はいくつかの節に分かれます。 章の始めには章見出しがあり、節の始めには節見出しがあります。 この、書名、章見出し、節見出しなどをまとめて 見出し とよぶことにします。

ホームページにも見出しが付けられます。 レベル1の見出しからレベル6の見出しまで用意されています。 大規模なホームページでは、レベル1の見出しを書名、レベル2の見出しを章見出し、レベル3の見出しを節見出しのように使うとよいでしょう。 小規模のホームページでは、レベル1の見出しを表題、レベル2の見出しを節見出し、レベル3の見出しを小節の見出しのように使うとよいでしょう。

ブラウザは、 <h1></h1> に囲まれた部分をレベル1の見出し(Heading)と見なします。 <h2></h2> だと、レベル2の見出しです。 <h3></h3> でレベル3, <h4></h4> でレベル4, <h5></h5> でレベル5, <h6></h6> でレベル6です。

ブラウザは、レベル1の見出しを、前後と独立させて大きなボールド体で表示します。 レベル2の見出しは、同様にやや大きな字で表示されます。 レベル3, レベル4, レベル5, レベル6と順に字が小さくなります。

例 2.4 
<h1>JavaScript入門</h1>
<h2>はじめに</h2>
<h3>JavaScriptとは</h3>
JavaScript入門

はじめに

JavaScriptとは

2.2.2 引用

テキストを書く際、他の参考資料などを 引用 する場合があります。 引用文は、自分の書いたテキストと区別する必要があります。

ブラウザは、 <blockquote></blockquote> に囲まれた部分を、(長い)引用文と見なします。 ブラウザは、引用文を、前後と独立させ、上下左右に余白を取って表示します。

例 2.5 
<p>私の友人は次のように語ってくれた。</p>
<blockquote>
  <p>
  JavaScriptは、GUIプログラミングの入門に最適だろう。
  </p>
  <p>
  オブジェクト指向プログラミングもできるが、
  単純すぎるところがある。
  </p>
</blockquote>
私の友人は次のように語ってくれた。

JavaScriptは、GUIプログラミングの入門に最適だろう。

オブジェクト指向プログラミングもできるが、 単純すぎるところがある。

2.2.3 アドレス

本に奥付けを設けるように、ホームページの最後にも、作者の氏名(組織名)、メールアドレス、ホームページの更新日、著作権情報などを書いておくのは良い習慣です。 このような、連絡先に類する情報を アドレスaddress )とよぶことにします。

ブラウザは、 <address></address> に囲まれた部分を、アドレスと見なします。 ブラウザはアドレスをイタリック体で表示します。


2.3 リスト

2.3.1 リストの種類

いくつかの項目を並べる場合、それらを リストlist )(箇条書き)にすると分かりやすくなります。 HTMLには、リストを表す方法が

の3種類用意されています。

2.3.2 番号付きリスト

番号付きリストordered list )は、項目の順序に意味のある場合のリストです。 ブラウザは、 <li></li> に囲まれた部分を、リストの項目(List Item)と見なします。 そして、項目の並びが <ol></ol> に囲まれると、その部分を番号付きリスト(Ordered List)と見なします。

ブラウザは、番号付きリストを、前後と独立させ、上下に余白を設けて表示します。 各項目は字下げされ、先頭に1., 2., ... と番号が付きます。

例 2.6 
<p>一般的に、プログラム開発は次の工程を経ます。</p>
<ol>
  <li>アルゴリズムやデータ構造の設計</li>
  <li>コーディング</li>
  <li>テストとデバッグ</li>
</ol>
一般的に、プログラム開発は次の工程を経ます。

1. アルゴリズムやデータ構造の設計
2. コーディング
3. テストとデバッグ
注意

規格の上では終了タグ </li> は省略できますが、なるべく省略しないでください。

2.3.3 番号なしリスト

番号なしリストunordered list )は、項目の順序にあまり意味のない場合のリストです。 ブラウザは、 <li></li> に囲まれた部分を、リストの項目と見なします。 そして、項目の並びが <ul></ul> に囲まれると、その部分を番号なしリスト(Unordered List)と見なします。

ブラウザは、番号なしリストを、前後と独立させ、上下に余白を設けて表示します。 各項目は字下げされ、先頭に・などの記号が付きます。

例 2.7 
<p>JavaScriptのプログラムは、次の3か所に書けます。</p>
<ul>
  <li>外部ファイル</li>
  <li>&lt;script&gt;タグの中</li>
  <li>イベント属性の値</li>
</ul>
JavaScriptのプログラムは、次の3か所に書けます。

・ 外部ファイル
・ <script>タグの中
・ イベント属性の値

2.3.4 定義リスト

定義リストdefinition list )は、用語の定義などに使われるリストで、用語とその説明、用語とその説明、…と並べるものです。 ブラウザは、 <dt></dt> に囲まれた部分を、説明される用語(Definition Term)と見なします。 <dd></dd> に囲まれた部分を、その用語の説明(Definition Description)と見なします。 そして、用語とその説明の並びが <dl></dl> に囲まれると、その部分を定義リスト(Definition List)と見なします。

ブラウザは、定義リストを、前後と独立させ、上下に余白を設けて表示します。 各用語の説明は字下げされます。

例 2.8 
<dl>
  <dt>算術演算子</dt>
    <dd>
    数値に対する演算を表す記号。
    +, -, *, /など。
    </dd>
  <dt>論理演算子</dt>
    <dd>
    論理値に対する演算を表す記号。
    &amp;&amp;, ||, !など。
    </dd>
  <dt>文字列演算子</dt>
    <dd>文字列に対する演算を表す記号。+など。</dd>
</dl>
算術演算子
数値に対する演算を表す記号。 +, -, *, /など。
論理演算子
論理値に対する演算を表す記号。 &&, ||, !など。
文字列演算子
文字列に対する演算を表す記号。 +など。
注意

規格の上では、終了タグ </dt> , </dd> は省略できますが、なるべく省略しないでください。


2.4 改行の制御

2.4.1 整形済みテキスト

テキストの中で、スペースや改行をいくら続けて書いても、ブラウザはそれを一つのスペースと見なすことは前にも説明しました。 多くのテキストではそれで問題ないですが、プログラムコードなどでは、改行や字下げがプログラマにとって重要な情報になります。 また、電子メールなどで、文字を使って簡単な図や表を書くことはよくありますが、この場合も、勝手に改行されたり、並んでいるスペースを一つにされたくはありません。 このように、スペースや改行を用いて文字の位置合せがなされているテキストを、 整形済みテキストpreformatted text )とよびます。

ブラウザは、 <pre></pre> に囲まれた部分を、整形済みテキスト(PREformatted text)と見なします。 ブラウザは、整形済みテキストを、前後と独立させ、タイプライタ体のフォントで、勝手に改行したりせず、改行は改行のまま、スペースの並びはスペースの並びのまま表示します。

例 2.9 
<pre>
           1997   1998   1999
------------------------------
Section 1  6,875  5,270  5,076
Section 2    943  1,155  1,004
Section 3  3,983  3,487  3,974
</pre>
           1997   1998   1999
------------------------------
Section 1  6,875  5,270  5,076
Section 2    943  1,155  1,004
Section 3  3,983  3,487  3,974
注意

<pre></pre> に囲まれた部分がそのまま表示されるわけではありません。 特殊文字<, &などを表示したい場合は、今まで通り &lt; , &amp; などで置き換える必要があります。

2.4.2 強制改行

前に説明した通り、表示に際して、どのくらいスペースをとるかや、どこで改行するかは、基本的にブラウザが決めます。 しかし、歌詞や詩のような内容では、適切な位置で 強制的に改行 したほうが自然に読めるようになります。

ブラウザは、タグ <br> のある所で強制的に改行(line BReak)して表示します。

注意

これまで紹介したタグは、 < tag ></ tag > で囲むという使い方をしてきました。 しかし、強制改行 <br> については、終了タグはありません。 そこで強制的に改行するということですので、特に何かを囲む必要がないのです。

2.4.3 水平線

<br> タグで強制的に改行できることは分かりました。 では、強制的に改ページすることはできるでしょうか。 そもそも、ホームページには改ページするという概念はありません。 ウィンドウに収まらない部分は、スクロールすれば読めるからです。 ただし、内容が大きく変わる目印として、 水平線 を使うことはできます。

ブラウザは、タグ <hr> のある所で水平線(Horizontal Rule)を表示します。

例 2.10 
<hr>
<address>
2004年4月16日更新<br>
konishi@twcu.ac.jp<br>
Copyright (C) 2004 Zenjiro Konishi.
All rights reserved.
</address>

2004年4月16日更新
konishi@twcu.ac.jp
Copyright (C) 2004 Zenjiro Konishi. All rights reserved.

2.5 演習2

以下の例を参考にして、番号付きリスト、番号なしリスト、および定義リストを用いた(練習用の)ホームページを作成してください。 ファイル名は、例えばex2.htmlとして、先週用意した授業用ディレクトリに保存してください。

例 2.11 
演習2

オリンピックの注目種目

・ マラソン
・ サッカー
・ 野球

短距離走でメダルを取るには

1. 予選で2位以内に入る。
2. 準決勝で2位以内に入る。
3. 決勝で3位以内に入る。

オリンピック用語

メダリスト(medalist)
メダルを獲得した選手のこと。
ファイナリスト(finalist)
決勝に進出した選手のこと。

余力のある人は、リストの中にさらにリストを入れた例も考えてください。

例 2.12 
体操競技の種目

・ 男子
o ゆか
o あん馬
o つり輪
o 跳馬
o 平行棒
o 鉄棒
・ 女子
o 跳馬
o 段違い平行棒
o 平均台
o ゆか

2.6 レポート課題

今日の演習2に従ってホームページを作成し、そのURLをkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け(4/16)を明記してください。


2.7 参考資料

HTMLについて本格的に勉強したければ、以下のホームページを参考にするとよいでしょう。

HTML 4.01 仕様書(英語)
http://www.w3.org/TR/html4/
HTML 4 仕様書の日本語訳
http://www.w3.org/MarkUp/html4-updates/translations#Japanese

このホームページは、W3Cの正規のドキュメントとその(個人的な)日本語訳です。 W3C とはWorld Wide Web Consortiumの略で、HTMLを始めとするWWW規格の標準化機関です。


[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

2004年4月16日更新
konishi@twcu.ac.jp
Copyright (C) 2004 Zenjiro Konishi. All rights reserved.