HTML によるWebページ作成

第２回目

リンクに関するタグ
画像の表示に関するタグ
箇条書きのためのタグ
文字に関するタグ

1. リンクに関するタグ

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

使用例:

<A HREF="http://www.econ.tohoku.ac.jp"> 経済学部のホームページ </A> <A HREF="myself.html" TARGET="_blank"> この前作った myself.html へのリンク</A>

経済学部のホームページ
この前作った intro4.html へのリンク

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

使用例:

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

このページの先頭へ

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

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

使用例:

<IMG SRC="cablecar.jpg">ケーブルカーの写真です <IMG SRC="bluebutton.gif">青いボタンのアイコンです 右のボタンを押すと東北大学ホームページへ <A HREF="http://www.tohoku.ac.jp"> <IMG SRC="redball.gif" BORDER="0"> </A>

ケーブルカーの写真です

青いボタンのアイコンです
右のボタンを押すと東北大学ホームページへ

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

使用例:

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

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

縮小されました．

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

アイコンの入手方法

tgif を使って自分でつくる
- tgif で画像を作成
- 「画像形式を選択するボタン」を押し, 形式を「GIF/ISMAP」に設定
- 「ファイル」メニューをクリックし, 画像をカラーで出力するように設定
- 「ファイル」メニューをクリックし, 「print（印刷）」を選ぶ
- 画像ファイル ???.gif が作成される
ホームページ素材集のページからもらってくる
ホームページのおもちゃ箱，ふぁんしー・ぱーつ・しょっぷなど
- 欲しいアイコンの上にマウスカーソルを移動
- 右ボタンをクリック
- メニューの「画像を名前を付けて保存」をクリック
- ファイル名を指定して保存

<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"> 文章とボールを上揃えにしました．

赤いボールです．

枠つきです．

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

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

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

<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"（アルファベット小文字），
に変更することも可能

5. 文字に関するタグ

 ...
文字の大きさを部分的に変更するタグ．数字が大きいほど文字が大きくなる．

１２３４５６７
 ...
文字の色を部分的に変更するタグ．あかあおきいろ
 ...
文字を太字にするタグ．

太字はこのような文字です
 ...
文字を斜体にするタグ．

斜体の文字はこのような感じです
 ...
上付き文字を書くためのタグ． 2⁸ = 256 東北大学^注１
 ...
下付き文字を書くためのタグ． a₁ = 1, a₂ = 2, a₃ = 4, a₄ = 8, ...
 ...
文字に下線を引くためのタグ． HTML言語はWebページを書くときに用いられる言語である
<S> ...</S>
文字の上に取り消し線を引くためのタグ．レポートの締め切り： ~~９月３０日~~ １０月７日
上記のタグを組合せて使うことも可能
例１：  ...
---> 大きさ７の赤い文字
例２：   ...  
---> 斜体の太字

レポート課題（先週と同じ）:

LaTeX の２回目のレポート（イベントに関する案内）を web ページに変換し, 公開しなさい．
自己紹介のページを作り始めなさい．

注意！！　

web ページを公開するときには，画像も一緒に公開すること．例えば, cp 　　 bluebutton.gif 　　 www [Enter] のようにすること．
ページを公開後, ちゃんと表示されていることを
金曜日３講時受講生のページもしくは金曜日４講時受講生のページ
を見て確認すること．

締め切り: ７月３１日（水）正午まで