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

コンピュータIID(UNIXとHTML)第10回

目次
10.1 基本的なタグ(2)
10.1.1 リスト
10.1.2 画像ファイル
10.1.3 画像ファイルのコピー
10.1.4 画像の埋め込み
10.1.5 リンク
10.2 演習10
10.3 レポート課題
10.4 参考文献
索引

10.1 基本的なタグ(2)

10.1.1 リスト

HTMLでは、箇条書きができます。 ここでは、箇条書きのことをリストと呼びます。 HTMLには、3種類のリストが用意されています。

最初は、番号無しリストです。 これは、項目の順番に意味がないリストです。 HTMLでは、まず、一つ一つの項目を <LI></LI> で囲みます(List Item)。 そして、項目の並びを <UL></UL> で囲みます(Unordered List)。 すると、ブラウザでは、上下に余白が設けられ、一つ一つの項目が記号付きで表示されます。

<P>太陽系の構成</P>
<UL>
<LI>太陽</LI>
<LI>惑星</LI>
<LI>惑星の衛星</LI>
<LI>その他の天体</LI>
</UL>
太陽系の構成

・太陽
・惑星
・惑星の衛星
・その他の天体

次は、番号付きリストです。 これは、項目の順番に意味があるリストです。 HTMLでは、まず、一つ一つの項目を <LI></LI> で囲みます。 そして、項目の並びを <OL></OL> で囲みます(Ordered List)。 すると、ブラウザでは、上下に余白が設けられ、一つ一つの項目が番号付きで表示されます。

<P>太陽に近い惑星</P>
<OL>
<LI>水星</LI>
<LI>金星</LI>
<LI>地球</LI>
<LI>火星</LI>
</OL>
太陽に近い惑星

1. 水星
2. 金星
3. 地球
4. 火星

最後は、定義リストです。 これは、用語とその説明が並ぶリストです。 HTMLでは、まず、用語を <DT></DT> で囲み(Definition Term)、説明を <DD></DD> で囲みます(Definition Description)。 そして、用語と説明の並びを <DL></DL> で囲みます(Definition List)。 すると、ブラウザでは、上下に余白が設けられ、用語は字下げされずに、説明は字下げされて表示されます。

<P>天文用語</P>
<DL>
<DT>小惑星</DT>
<DD>火星と木星の間にある天体。数多く発見されている。</DD>
<DT>冥王星</DT>
<DD>太陽系の第九惑星だったが、最近、格下げされた。</DD>
</DL>
天文用語

小惑星
火星と木星の間にある天体。数多く発見されている。
冥王星
太陽系の第九惑星だったが、最近、格下げされた。

10.1.2 画像ファイル

ウェブ・ページには、文字だけでなく、画像を埋め込むこともできます。 画像を埋め込むには、まず、画像ファイルを用意します。 パソコンでは様々な画像形式が利用されていますが、ウェブ・ページに埋め込めるのは以下のものだけです。 他の画像形式については、適当なツール(例えば、「プレビュー」で開いて「ファイル」→「書き出し」)で変換しておきます。

表 10.1  ウェブ・ページに埋め込める画像形式
画像形式 読み方 用途 拡張子
GIF ジフ イラスト(数色) .gif
JPEG ジェーペグ 写真(数千色) .jpeg, .jpg
PNG ピング GIFの代替 .png

10.1.3 画像ファイルのコピー

ここでは、画像ファイルは自由に使えるものをコピーすることにします。 次のように操作してください。

  1. DockのSafariアイコンをクリックし、メニューバーの「ファイル」をクリックし、「新規ウィンドウ」を選択。
  2. アドレスバーに検索エンジンのURL(例えばhttp://www.google.co.jp/)を入力。
  3. 「ホームページ作成」、「フリー素材」などのキーワードで検索。
  4. コピーする画像が見つかったら、自由に使えることを確認し、画像を右クリックし、「画像を新規ウィンドウで開く」を選択。
  5. 開いたウィンドウをクリックし、メニューバーの「ファイル」をクリックし、「別名で保存」を選択。
  6. 「別名で保存」欄の右の三角ボタンをクリックして詳細表示にする。
  7. ホーム→「WWW-local」→「comp2d」とクリック。
  8. 「拡張子を隠す」チェックを無効にする。
  9. 「別名で保存」欄に分かりやすいファイル名(拡張子は変更しない)を入力。
  10. 「保存」をクリック。

10.1.4 画像の埋め込み

画像ファイルが用意できましたら、それをウェブ・ページに埋め込みます。

HTMLでは、画像を埋め込むところに、タグ <IMG src=" file " alt=" text "> を書きます(IMaGe, SouRCe, ALTernate)。 ここで、 file はファイル名、 text は代替テキストです。 すると、ブラウザでは、その画像が表示されます。

ここで、タグの形式がこれまでと異なることに注意してください。 タグが < tag att =" value "> という形になっています。 この att属性 とよばれるもの(の名前)です。 HTMLでは、属性を用いてタグにより詳しい情報を与えます。 このタグの形は、 att 属性の値を value にするという意味です。

test03.html
<P>
次の地図を見てください。
<BR>
<IMG src="inokashira.png" alt="井の頭公園">
<BR>
井の頭公園へ行くには、
<IMG src="circle1.png" alt="(1)">吉祥寺駅で下車します。
</P>
inokashira.png
井の頭公園の地図
circle1.png
(1)
次の地図を見てください。
井の頭公園の地図
井の頭公園へ行くには、 (1) 吉祥寺駅で下車します。

10.1.5 リンク

リンクの機能、すなわちウェブ・ページをクリックして他のページへジャンプすることも、タグを書くことによって実現します。

HTMLでは、リンク元を <A href="file"></A> で囲みます(Anchor, Hyper REFerence)。 ここで、 file はリンク先のファイル名です。 すると、ブラウザでは、下線が付いた青か紫の字で表示されます。 そして、リンク元をクリックしますと、リンク先へジャンプします。

なお、 href 属性の値をURLにしますと、そのURLのページへジャンプします。

例えば、ファイルtest04.htmlからtest03.htmlへジャンプするには、test04.htmlの中に <A href="test03.html"></A> と書きます。

test04.html
<H1>東京都の公園</H1>
<P>東京には公園が数多くあります。</P>
<P>
最初に紹介するのが、
<A href="test03.html">井の頭公園</A>
です。
</P>
東京都の公園

東京には公園が数多くあります。

最初に紹介するのが、 井の頭公園 です。

10.2 演習10

有名な観光地や自分がよく行く所の中から、自分の好きな場所を1か所選んでください。 そして、その場所についてのウェブ・ページを作成してください。

具体的には、日本語版と英語版の2つのウェブ・ページを作成します。 そして、2つのウェブ・ページの間で相互にリンクを張ります。 なお、少なくとも1か所には、何か画像を挿入してください。

ファイル名は、日本語版はreport10-j.html, 英語版はreport10-e.htmlとしてください。

相互リンクのイメージ
図 10.1  相互リンクのイメージ

smiling.png
笑顔
report10-j.html
渋谷ガイド

笑顔 渋谷は若者の町です。

English version
report10-e.html
Shibuya Guide

笑顔 Shibuya is a town of young people.

Japanese version

10.3 レポート課題

今日の演習10の答案(URL)をメールでkonishi@twcu.ac.jp宛に提出してください。 メールを送るときは、大学のパソコンを使うか、大学のメール・サーバに接続するかして、差出人が大学のメール・アドレスになるようにしてください。 メールの本文には、学生番号、氏名、科目名、授業日(11月29日)を明記してください。


10.4 参考文献


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

2006年11月29日更新
小西 善二郎 <konishi@twcu.ac.jp>
Copyright (C) 2006 Zenjiro Konishi. All rights reserved.