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>
最後は、定義リストです。
これは、用語とその説明が並ぶリストです。
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>
ウェブ・ページには、文字だけでなく、画像を埋め込むこともできます。 画像を埋め込むには、まず、画像ファイルを用意します。 パソコンでは様々な画像形式が利用されていますが、ウェブ・ページに埋め込めるのは以下のものだけです。 他の画像形式については、適当なツール(例えば、「プレビュー」で開いて「ファイル」→「書き出し」)で変換しておきます。
画像形式 | 読み方 | 用途 | 拡張子 |
---|---|---|---|
GIF | ジフ | イラスト(数色) | .gif |
JPEG | ジェーペグ | 写真(数千色) | .jpeg, .jpg |
PNG | ピング | GIFの代替 | .png |
ここでは、画像ファイルは自由に使えるものをコピーすることにします。 次のように操作してください。
画像ファイルが用意できましたら、それをウェブ・ページに埋め込みます。
HTMLでは、画像を埋め込むところに、タグ
<IMG src="
file
" alt="
text
">
を書きます(IMaGe, SouRCe, ALTernate)。
ここで、
file
はファイル名、
text
は代替テキストです。
すると、ブラウザでは、その画像が表示されます。
ここで、タグの形式がこれまでと異なることに注意してください。
タグが
<
tag att
="
value
">
という形になっています。
この
att
は
属性
とよばれるもの(の名前)です。
HTMLでは、属性を用いてタグにより詳しい情報を与えます。
このタグの形は、
att
属性の値を
value
にするという意味です。
例
<P> 次の地図を見てください。 <BR> <IMG src="inokashira.png" alt="井の頭公園"> <BR> 井の頭公園へ行くには、 <IMG src="circle1.png" alt="(1)">吉祥寺駅で下車します。 </P>
リンクの機能、すなわちウェブ・ページをクリックして他のページへジャンプすることも、タグを書くことによって実現します。
HTMLでは、リンク元を
<A href="file">
〜
</A>
で囲みます(Anchor, Hyper REFerence)。
ここで、
file
はリンク先のファイル名です。
すると、ブラウザでは、下線が付いた青か紫の字で表示されます。
そして、リンク元をクリックしますと、リンク先へジャンプします。
なお、
href
属性の値をURLにしますと、そのURLのページへジャンプします。
例えば、ファイルtest04.htmlからtest03.htmlへジャンプするには、test04.htmlの中に
<A href="test03.html">
〜
</A>
と書きます。
例
<H1>東京都の公園</H1> <P>東京には公園が数多くあります。</P> <P> 最初に紹介するのが、 <A href="test03.html">井の頭公園</A> です。 </P>
有名な観光地や自分がよく行く所の中から、自分の好きな場所を1か所選んでください。 そして、その場所についてのウェブ・ページを作成してください。
具体的には、日本語版と英語版の2つのウェブ・ページを作成します。 そして、2つのウェブ・ページの間で相互にリンクを張ります。 なお、少なくとも1か所には、何か画像を挿入してください。
ファイル名は、日本語版はreport10-j.html, 英語版はreport10-e.htmlとしてください。
例
今日の演習10の答案(URL)をメールでkonishi@twcu.ac.jp宛に提出してください。 メールを送るときは、大学のパソコンを使うか、大学のメール・サーバに接続するかして、差出人が大学のメール・アドレスになるようにしてください。 メールの本文には、学生番号、氏名、科目名、授業日(11月29日)を明記してください。