HTML によるWebページ作成

第３回目

1. テキストを入力通りに表示させるタグ

<PRE> ... </PRE>
<XMP> ... </XMP>

これらのタグで囲まれたテキストはそのまま表示されます．
ただし, テキストの中にHTMLのタグが含まれているとき,
<PRE> ... </PRE> の場合 ==> タグ指定が有効
<XMP> ... </XMP>の場合 ==> タグもそのまま表示される

<XMP> ... </XMP> は HTMLファイルを web ページに表示させるときに便利！

使用例: plain.html

<HTML> <HEAD> <TITLE> テキストを入力した通りに表示 </TITLE> </HEAD> <BODY> <PRE> 　　　　　｜　　　　　｜　｜　　　　｜　　　　　　　　　　　　　Ｉ東北大　　｜　　　　　｜　｜　　　　｜　　　　　　　　　　　　　Ｉ教養　　　｜　　　　　｜　｜　　　　｜　　　　　　　　　　　　　Ｉ ─────＋　　　　　｜　｜　　　　｜　　　　　　　　　　　　　Ｉ　　　　　｜　　　　　｜　｜　　　　｜　　　　　　　　　　　　　Ｉ　　　　　｜県　　　　｜広｜　　　　｜　　　　　　　　　　　　　Ｉ東北大　　｜スポーツ　｜瀬｜西公園　｜　　　　　　　　　　　　　Ｉ経済学部　｜センター　｜川｜　　　　｜　　　　　　　　　　　　　Ｉ法学部　　｜　　　　　｜　｜　　　　｜　　　　青葉通　　　　　　Ｉ ─────＋────＝＝＝＝────＋─────────────仙　　　　　　　　　　　｜　｜　　　　　　　　　　　　　　　　　　台　　　　　　　　　　　｜　｜　　　　　　　　　　　　　　　　　　駅　　　　　　　　　　　｜　｜　　　　　　　　　　　　　　　　　　Ｉ 仙台駅から東北大までの地図 文字が青くなっていますか？ </PRE> <HR> <XMP> 上と同じ地図（省略） 仙台駅から東北大までの地図 文字が青くなっていますか？ <XMP> </BODY> </HTML>

※上記のような地図を書くときには, 空白も含めて全て全角文字で書くこと

※web ページのもととなるHTMLファイル（ソースファイル）を見るには
───＞ netscape の「表示」メニューをクリック＝＝＞「ページのソース」をクリック

2. 箇条書きのためのタグ

<UL> <LI>...</UL>
普通の箇条書き

使用例: faclist.html

東北大学の学部一覧 <UL> <LI> 文学部 <LI> 教育学部 <LI> 法学部 <LI> 経済学部（以下略） </UL>

※入れ子にして利用することも可能 ---- 使用例: deplist.html

東北大学の学科一覧（経済学部, 農学部，理学部のみ） <UL> <LI> 経済学部 <UL> <LI> 経済学科 <LI> 経営学科 </UL> <LI> 農学部 <UL> <LI> 生物生産科学科 <LI> 応用生物化学科 </UL> （途中省略） </UL>

<OL> <LI>...</OL>
番号の付いた箇条書き

使用例: facrank.html

東北大学の学部学生数ランキング <OL> <LI> 工学部 --- ４０００人 <LI> 理学部 --- １４００人 <LI> 経済学部 --- １２００人（途中略） </OL>

※上記の情報は http://web.bureau.tohoku.ac.jp/gaiyou/student.html を参考にしました

<OL TYPE="I"> <LI>...</OL>
ローマ数字（大文字）による番号の付いた箇条書き
"I" を
"i"（ローマ数字小文字）， "A"（アルファベット大文字）， "a"（アルファベット小文字），
に変更することも可能

<DL> <DT><DD>... </DL>
用語の定義に使うタグ

使用例: econo.html

経済学部学科案内 <DL> <DT> 経済学科 <DD>経済全体の仕組みやその動きを理論、政策、実証、歴史等の多方面から勉強する学科 <DT> 経営学科 <DD>経済学と経営学に関する幅広い基礎的学習の上に、経営学に関する専門知識や技術を学ぶ学科 </DL>

※上記の情報は http://www.econ.tohoku.ac.jp/einfo/01b.html を参考にしました

3. 画像の表示に関するタグ

<IMG SRC="ファイル名">
画像をページに表示
「ファイル名」のところにはデジタルカメラで撮影した写真や，アイコンなどの画像ファイルの名前が入る
※もちろん画像ファイルを持っていないと表示できない！

使用例:

<IMG SRC="cablecar.jpg"> ケーブルカーの写真です <IMG SRC="bluebutton.gif"> 青いボタンのアイコンです

ケーブルカーの写真です

青いボタンのアイコンです

アイコンの入手方法

適当なソフトを使って自分でつくる
ホームページ素材集のページからもらってくる
ホームページのおもちゃ箱，ふぁんしー・ぱーつ・しょっぷなど
欲しいアイコンの上にマウスカーソルを移動
==> 右ボタンをクリック
==> メニューの「画像を名前を付けて保存」をクリック
==> ファイル名を指定して保存

<IMG SRC="ファイル名" WIDTH="??%" HEIGHT="??%">
指定した大きさで画像をページに表示
ページ（ウィンドウ）の大きさに対する％により大きさを指定する

使用例:

ケーブルカーの写真です． <IMG SRC="cablecar.jpg" HEIGHT="10%"> 縮小されました． 青いボタンのアイコンです． <IMG SRC="bluebutton.gif" WIDTH="20%" HEIGHT="2%"> 横長になりました．

ケーブルカーの写真です．

縮小されました．

青いボタンのアイコンです．横長になりました．

<IMG SRC="ファイル名" BORDER="数値">
画像に枠を付けて表示
「数値」を大きくすると枠が太くなる
<IMG SRC="ファイル名" ALIGN="right(left)">
画像をページの右側(左側)に強制的に表示
<IMG SRC="ファイル名" ALIGN="top(center, bottom)">
テキストと画像の上下位置の関係を指定して表示

使用例:

赤いボールです． <IMG SRC="redball.gif" BORDER="5"> 枠つきです． 赤いボールです． <IMG SRC="redball.gif" ALIGN="right"> 右側に寄せました． 赤いボールです． <IMG SRC="redball.gif" ALIGN="top"> 文章とボールを上揃えにしました．

赤いボールです．

枠つきです．

赤いボールです．右側に寄せました．

赤いボールです．文章とボールを上揃えにしました．

4. リンクに関するタグ

<A HREF="URL (またはファイル名)"> ... </A>
他の web ページ(または自分で作成したページ)へのリンクを作るためのタグ
<A HREF="URL (またはファイル名)" TARGET="_blank"> ... </A>
リンク先を新しいウィンドウに表示

使用例:

<A HREF="http://www.econ.tohoku.ac.jp"> 経済学部のホームページ </A> 右のボタンを押すと東北大学ホームページへ <A HREF="http://www.tohoku.ac.jp"> <IMG SRC="redball.gif" BORDER="0"> </A> <A HREF="myself.html" TARGET="_blank"> この前作った myself.html へのリンク</A>

経済学部のホームページ
右のボタンを押すと東北大学ホームページへ

この前作った myself.html へのリンク

<A HREF="#任意のラベル"> ... </A>, <A NAME="任意のラベル"> ... </A>
(もしくは <A NAME="任意のラベル"> のみ)
同じページの指定個所にジャンプ

使用例:

<A NAME="start"> <=== 実際にはこのページの最初においてあります <A HREF="#start"> このページの先頭へ </A>

このページの先頭へ

第３回目レポート課題:
次の条件を満たすように， web ページを作成しなさい．

仙台駅から, 仙台市の施設・デパートなどへの地図を書くこと
箇条書きのためのタグを使った表を書くこと
ページの中に画像を表示させること
自分の興味のある web ページへのリンクを３つ以上作成すること

ファイル名: report3.html
注意！！　 web ページを公開するときには，画像も一緒に公開すること．例えば, cp bluebutton.gif www [Enter] のようにすること．

締め切り:
※金曜日の受講生 →１１月２日（金）正午まで
※火曜日の受講生 →１１月６日（火）正午まで（学祭に伴う特別措置）

４回目の内容へ