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

コンピュータ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 はリンク先のファイル名です。 すると、ウェブ・ページでは、下線が付いた青か紫の字で表示されます。 そして、リンク元をクリックしますと、リンク先へジャンプします。

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

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

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)をメールで提出してください。 差出人は学内のメール・アドレス(b04a001@cis.twcu.ac.jpなど)とし、宛先はkonishi@cis.twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日(11月28日、12月14日)を明記してください。


10.4 参考文献


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

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