画像とリンク

○画像<BODY BACKGROUND="*.gif"><IMG SRC="*.gif">

・背景の入れ方

BODYタグにつづけて以下のようにいれてみよう

<BODY BACKGROUND="bg_ring_l.gif">

ここをクリックすると例がでます

・画像の入れ方

<IMG SRC="title.gif">
校章
　

○画像の名前（ALT属性）を設定する

画像が表示できないブラウザ（文章を読み上げるブラウザ）、
または画像を表示しないよう設定してある場合
画像の内容を表す言葉を表示するよう、名前を設定します
（下の画像は存在しません　その場合も同じように扱われます）

<IMG SRC="kuuhaku.gif" alt="空白">
空白

○階層の考え方

・コンピューターで自分の作ったデータがどこにあるか、すぐにわかりますか？では逆に普段の生活に使っているものをコンピューター上で再現してみましょう

ランドセルまず「ランドセル」があります　 開けてみましょう

そのなか 「ランドセル」の中には「筆箱」と「はさみ」がありました　では「筆箱」を開けてみましょう
「筆箱」の中に「鉛筆」がありました

これはつまり「ランドセル」の中の「筆箱」の中の「鉛筆」です　これをコンピューターのデータの表し方で表すと下のようになります

ランドセル/筆箱/鉛筆

この「〜の中の」ということを「階層」といいホームページを保存するコンピューターでは「/」で表します

○サーバーの中でのリンク<A HREF="*.html">〜</A>

・別の書類にリンクを作成したり、文書の中に画像を表示させたりする場合　 まずそれらの書類や画像ファイルをもとの書類と同じフォルダの中に用意します　次の図のようにします

<A HREF="syoukai.html">自己紹介</A>
同じ階層の例

・また、上の階層へは書類名の前に［../］を、下の階層へは［フォルダの名前/］を入れます 

上の階層
<A HREF="../sensei.html">先生の紹介</A>
上の階層の例
下の階層
<A HREF="img/title.gif">
下の階層の例
 

・これを応用すれば「上の階層の別のフォルダの中の書類」にリンクを張ることができます

上の階層の別のフォルダの中の書類
<A HREF="../tasiro/index.html">
階層の応用

○外部へのリンク

自分の利用しているサーバ以外へのリンクは下のようになります

葛尾村立葛尾中学校
http://www.jhs.katsurao.org/

Yahoo! Japan
http://www.yahoo.co.jp/

（例）次のリンクを文書の中に入れてみよう

練習１

<A HREF="http://www.jhs.katsurao.org/subject/
gijutu/001.html">練習</A>

練習２

<A HREF="http://www.jhs.katsurao.org/sucject/
gijutu/index.html">戻る</A>

○画像にリンクを張る

画像のタグをリンクのタグで囲むと、画像がリンクのボタンになります

<A HREF="http://www.jhs.katsurao.org/index.html">
<IMG SRC="title.gif"></A>

校章

←戻る