目次 | 索引 |
---|---|
前回の授業では、"Good morning!"と表示するホームページを作成しました。 絵を貼り込んだカラフルなホームページを作りたいかもしれませんが、ホームページの基本は文章です。 今日はホームページの見栄えに気を取られず、文章の内容を伝えることに集中します。
前回の手続きで、"Good morning!"とタイプする代わりに、メールを書く要領で文章をタイプしてください。 すると、ブラウザはその文章をウィンドウの幅に合わせて表示します。
ホームページを作るには、 HTMLを学習する必要があります。 HTMLとは、 HyperText Markup Language の略です。
ホームページを作るには、 HTMLを学習する必要があります。 HTMLとは、 HyperText Markup Language の略です。
文章中にスペースや改行を続けて入れても、ブラウザはそれをひとつのスペースと見なします。 (一部に例外があります。) どのくらいスペースをとるか、どこで改行するかなどは、基本的にブラウザが決めます。
長い文章では、内容のまとまりに応じて 段落 を作る必要があります。 しかし、字下げをしても、空行を入れても、ブラウザはそれをひとつのスペースと見なし、段落とは見なしません。 ブラウザに「ここからここまでが一つの段落です」のような指示を与えるには、 タグ ( tag )を使います。
段落の始めに
<p>
と書き、段落の終わりに
</p>
と書いてください。
するとブラウザは、
<p>
と
</p>
に囲まれた範囲を段落と見なします。
そして、段落らしく、前後と独立させ、上下に余白を設けて表示します。
<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>
は省略できます。
段落の終わりは文脈から予想しやすいので、こう定められたのでしょう。
この授業では、この予想を当てにせず、きちんと終了タグを書くことにします。
文章中に
<p>
と書くと段落の始めになることは分りました。
では、本当に<p>と表示したいときは、どう書けばよいでしょうか。
正解は、
<p>
と書く、です。
ブラウザは、文字
<
および
&
から始まる文字列を特別扱いします。
<
の場合は、タグの一部と見なします。
&
の場合は、文字を参照する目印と見なします。
特殊文字
は、次の表にしたがって書き換えてください。
そうすれば、ブラウザは書き換え前の文字を表示します。
<p> プログラムで、x < y < z と書いてはいけません。 正しくは、x < y && y < z です。 </p>
プログラムで、x < y < z と書いてはいけません。 正しくは、x < y && y < z です。
文章を書いていると、一部の語句を
強調
したくなることがあります。
英語などの場合、強調する語句はイタリック体を用いるのが習わしです。
HTMLには、ここからここまでをイタリック体にするというタグがあります。
しかし、強調だからイタリック体などと考えていたのでは、作者は文章の内容に集中できません。
このため、HTMLには、ここからここまでを強調するというタグ
<em>
〜
</em>
が用意されています。
作者は、慣習を意識せず、このタグを使って強調する語句を指定します。
ブラウザは、慣習に基いて、その語句をイタリック体で表示します。
ブラウザは、強調以外にもいくつかの慣習を知っています。 主なものを表に示します。
テキスト | タグ | 表示 |
---|---|---|
強調 |
<em>
〜
</em>
|
イタリック体 |
より強い強調 |
<strong>
〜
</strong>
|
ボールド体 |
文献参照 |
<cite>
〜
</cite>
|
イタリック体 |
定義語句 |
<dfn>
〜
</dfn>
|
ボールド体 |
プログラムコード |
<code>
〜
</code>
|
タイプタイタ体 |
出力例 |
<samp>
〜
</samp>
|
タイプライタ体 |
キー入力 |
<kbd>
〜
</kbd>
|
タイプライタ体 |
変数 |
<var>
〜
</var>
|
イタリック体 |
<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 .
典型的な本は、表紙に書名が書いてあり、本文はいくつかの章に分かれ、章はいくつかの節に分かれます。 章の始めには章見出しがあり、節の始めには節見出しがあります。 この、書名、章見出し、節見出しなどをまとめて 見出し ( 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と順に字が小さくなります。
<h1>JavaScript入門</h1> <h2>はじめに</h2> <h3>JavaScriptとは</h3>
JavaScript入門
はじめに
JavaScriptとは
文章を書く際、他の参考資料などを 引用 する場合があります。 引用文は、自分の書いた文章と区別する必要があります。
ブラウザは、
<blockquote>
〜
</blockquote>
に囲まれた部分を、(長い)引用文と見なします。
ブラウザは、引用文を、前後と独立させ、上下左右に余白を取って表示します。
<p>私の友人は次のように語ってくれた。</p> <blockquote> <p> JavaScriptは、GUIプログラミングの入門に最適だろう。 </p> <p> オブジェクト指向プログラミングもできるが、 単純すぎるところがある。 </p> </blockquote>
私の友人は次のように語ってくれた。
JavaScriptは、GUIプログラミングの入門に最適だろう。
オブジェクト指向プログラミングもできるが、 単純すぎるところがある。
本に奥付けを設けるように、ホームページの最後にも、作者の氏名(組織名)、メールアドレス、ホームページの更新日、著作権情報などを書いておくのは良い習慣です。 このような、連絡先に類する情報を アドレス ( address )とよぶことにします。
ブラウザは、
<address>
〜
</address>
に囲まれた部分を、アドレスと見なします。
ブラウザはアドレスをイタリック体で表示します。
文章の中で、スペースや改行をいくら続けて書いても、ブラウザはそれを一つのスペースと見なすことは前にも説明しました。 多くの文章ではそれで問題ないですが、プログラムコードなどでは、改行や字下げがプログラマにとって重要な情報になります。 また、電子メールなどで、文字を使って簡単な図や表を書くことはよくありますが、この場合も、勝手に改行されたり、並んでいるスペースを一つにされたくはありません。 このように、スペースや改行を用いて文字の位置合せがなされているテキストを、 整形済みテキスト ( preformatted text )とよびます。
ブラウザは、
<pre>
〜
</pre>
に囲まれた部分を、整形済みテキストと見なします。
ブラウザは、整形済みテキストを、前後と独立させ、タイプライタ体のフォントで、勝手に改行したりせず、改行は改行のまま、スペースの並びはスペースの並びのまま表示します。
<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>
に囲まれた部分がそのまま表示されるわけではありません。
特殊文字<, &などを表示したい場合は、今まで通り
<
,
&
などで置き換える必要があります。
前に説明した通り、表示に際して、どのくらいスペースをとるかや、どこで改行するかは、基本的にブラウザが決めます。 しかし、歌詞や詩のような内容では、適切な位置で 強制的に改行 したほうが自然に読めるようになります。
ブラウザは、タグ
<br>
のある所で強制的に改行して表示します。
<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>
については、終了タグはありません。
そこで強制的に改行するということですので、特に何かを囲む必要がないのです。
以下の例を参考にして、今日説明したタグの中から最低5種類を選び、それらを用いた(練習用の)ホームページを作成してください。
4月26日の日記
今日は とても嬉しい ことがあった。 キャンセル待ちだった切符がやっと取れたのだ。
よかったね。
これで、ゴールデンウィークは旅行に行けるね。
b00a001@twcu.ac.jp 東 京子
今日の演習2にしたがってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。
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規格の最新情報を知りたければ、ぜひアクセスしてください。