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

情報処理IIA(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.2.4 アドレス
2.3 改行の制御
2.3.1 整形済みテキスト
2.3.2 強制改行
2.4 演習2
2.5 レポート課題
2.6 参考資料
<address>   &amp;   <blockquote>   <br>   <cite>   <code>   <dfn>   <em>   &gt;   <h1>   <h2>   <h3>   <h4>   <h5>   <h6>   <kbd>   &lt;   <p>   <pre>   &quot;   <samp>   <strong>   <var>   W3C   アドレス   引用   開始タグ   キー入力   強制改行   強調   終了タグ   出力例   整形済みテキスト   タグ   段落   定義語句   特殊文字   プログラムコード   文献参照   変数   見出し   より強い強調  

2.1 文と段落

2.1.1 文

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

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

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


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

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

2.1.2 段落

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

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

例 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 )です。 タグの中の p は、paragraphから来ています。

注意

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

注意

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

2.1.3 特殊文字

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

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

表 2.1  特殊文字の書き換え
特殊文字 書き換え
< &lt;
> &gt;
& &amp;
" &quot;
例 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 テキストの強調

文章を書いていると、一部の語句を 強調 したくなることがあります。 英語などの場合、強調する語句はイタリック体を用いるのが習わしです。 HTMLには、ここからここまでをイタリック体にするというタグがあります。 しかし、強調だからイタリック体などと考えていたのでは、作者は文章の内容に集中できません。 このため、HTMLには、ここからここまでを強調するというタグ <em></em> が用意されています。 作者は、慣習を意識せず、このタグを使って強調する語句を指定します。 ブラウザは、慣習に基いて、その語句をイタリック体で表示します。

ブラウザは、強調以外にもいくつかの慣習を知っています。 主なものを表に示します。

表 2.2  テキストの構造を表すタグ
テキスト タグ 表示
強調 <em></em> イタリック体
より強い強調 <strong></strong> ボールド体
文献参照 <cite></cite> イタリック体
定義語句 <dfn></dfn> ボールド体
プログラムコード <code></code> タイプタイタ体
出力例 <samp></samp> タイプライタ体
キー入力 <kbd></kbd> タイプライタ体
変数 <var></var> イタリック体
例 2.4 
<p>
<strong>Don't write</strong>
<code>if (x = y)</code> ....
A single equal sign (<code>=</code>) is used
in an <em>assignment statement</em>.
</p>
Don't write if (x = y) .... A single equal sign ( = ) is used in an assignment statement .

2.2.2 見出し

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

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

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

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

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

はじめに

JavaScriptとは

2.2.3 引用

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

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

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

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

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

2.2.4 アドレス

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

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


2.3 改行の制御

2.3.1 整形済みテキスト

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

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

例 2.7 
<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.3.2 強制改行

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

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

例 2.8 
<address>
2001年4月26日更新<br>
konishi@twcu.ac.jp<br>
Copyright (C) 2001 Zenjiro Konishi.
All rights reserved.
</address>
2001年4月26日更新
konishi@twcu.ac.jp
Copyright (C) 2001 Zenjiro Konishi. All rights reserved.
注意

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


2.4 演習2

以下の例を参考にして、今日説明したタグの中から最低5種類を選び、それらを用いた(練習用の)ホームページを作成してください。

例 2.9 
4月26日の日記

今日は とても嬉しい ことがあった。 キャンセル待ちだった切符がやっと取れたのだ。

よかったね。

これで、ゴールデンウィークは旅行に行けるね。

b00a001@twcu.ac.jp 東 京子

2.5 レポート課題

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


2.6 参考資料

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

L. Lemay(著)、武舎広幸、久野禎子、久野靖(共訳)『HTML入門』『続・HTML入門』プレンティスホール、1995

私はこの本でHTMLを勉強しました。 今は改訂版が出ているはずです。 原著者は丁寧な説明で定評があります。

C. Musciano, B. Kennedy(共著)、田辺茂也(監訳)、渡辺知夫、大西照代(共訳)『HTML第3版』オライリー・ジャパン、1999

コンピュータ技術者向けシリーズの一冊です。 必要なことは一通り書いてありますので、辞書のように使うとよいでしょう。

W3C公式ホームページ http://www.w3.org/

W3C とはWorld Wide Web Consortiumの略で、HTMLを始めとするWWW規格の標準化機関です。 頻繁に更新されていますので、WWW規格の最新情報を知りたければ、ぜひアクセスしてください。


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

2001年6月9日更新
konishi@twcu.ac.jp
Copyright (C) 2001 Zenjiro Konishi. All rights reserved.