ホームページ作成ちょー入門#3

taku-t.com

ホームページ作成ちょー入門

page 1 / 2 / 3 / 4

2.8.画像を貼り付けよう

まず，下の画像をダウンロードし，「neko.html」のファイルと同じフォルダに「neko.jpg」として保存してください．

[ダウンロードの仕方]

Internet Exploreの場合

画像にカーソルを合わせ，右クリックで，「名前をつけて画像を保存」を選択する．

Netscapeの場合

画像にカーソルを合わせ，右クリックで，「画像を名前をつけて保存」を選択する．

次に，これまでのファイルを次のように変えてみましょう．赤で表示されている部分が，主な変更・追加箇所です．

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffeedd" text="#996600" link="#ff9900" vlink="#cc9966" alink="#ffcc00">
ねこマニアのホームページへようこそ． 
<IMG src="neko.jpg">
<IMG src="neko.jpg" width="100" height="50" border="3">
</BODY>
</HTML>

次のようになれば成功です．

ねこマニアのホームページへようこそ．

画像ファイルの貼り付けは，「IMG src="ファイル名"」で指定されます．また，上の例のように，「width」のオプションで画像の幅を，「height」のオプションで画像の高さを指定することができます．ここではピクセル値で指定していますが，ブラウザのサイズに対するパーセント値で指定することもできます．その場合には，「100」ではなく，例えば，「50%」といった値が入ります．さらに，上の例のように，「boader」のオプションで，任意の太さの枠をつけることができます．この値はピクセルで指定します．

ピクセルって何？
ディスプレイ上の画面を構成する最小単位を「ピクセル」といいます．

2.9.背景に画像をつけよう

ファイルを次のように変えてみてください．赤で表示されている部分が，主な変更・追加箇所です．

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffeedd" text="#996600" link="#ff9900" vlink="#cc9966" alink="#ffcc00" background="neko.jpg">
ねこマニアのホームページへようこそ．
</BODY>
</HTML>

次のように表示されれば成功です．

ねこマニアのホームページへようこそ．

このように，「BODY」タグに，「background=""」のオプションをつけることで，背景画像を指定することができます．またここでは，茶色っぽい背景をつけることで，文字の色が見にくくなったので，緑で表されているように，文字の色を白に変えています．2.2でやりましたよね．

2.10.ファイルへリンクを張ろう

まずは，新しくエディタ（メモ帳など）を開いて，次のファイルを作ってください．そして，それを「usagi.html」として「neko.html」と同じフォルダ内に保存してください．

<HTML>
<HEAD>
<TITLE>うさぎマニアのホームページ</TITLE>
</HEAD>
<BODY>
うさぎマニアのホームページへようこそ．
</BODY>
</HTML>

次に，「neko.html」と同じフォルダ内に新しく「tokage」というフォルダを作ってください．そして同様に，新しくエディタ（メモ帳など）を開いて，次のファイルを作ってください．そして，それを「tokage.html」として「tokage」フォルダ内に保存してください．

<HTML>
<HEAD>
<TITLE>とかげマニアのホームページ</TITLE>
</HEAD>
<BODY>
とかげマニアのホームページへようこそ．
</BODY>
</HTML>

いま，ファイルの構成は次のようになっているはずです．

   任意のフォルダ
      ┣neko.html
      ┣usagi.html
      ┗tokageフォルダ
             ┗tokage.html

では，「neko.html」から，「usagi.html」と「tokage.html」へリンクを張りましょう．次のようにファイルを変えてみてください．

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffeedd" text="#996600" link="#ff9900" vlink="#cc9966" alink="#ffcc00" >
ねこマニアのホームページへようこそ．
うさぎマニアのページは<A href="usagi.html" target="_blank">こちら</A>です．とかげマニアのページは<A href="tokage/tokage.html">こちら</A>です．
</BODY>
</HTML>

次のようになれば，とりあえず成功です．

ねこマニアのホームページへようこそ．

うさぎマニアのページはこちらです．とかげマニアのページはこちらです．

このように，文字を<A href="リンク先ファイル名">と</A>ではさんでやることで，その文字からリンクを張ることができます．さらには，「IMG src=""」タグを，<A href="リンク先ファイル名">と</A>ではさんでやることで，画像からリンクを張ることもできます．

注意しなければならないのは，リンク先ファイル名の指定の仕方です．先に示したファイル構成を思い出してください．「neko.html」と同じフォルダの中にある（これを「同じ階層にある」といいます）「usagi.html」へリンクを張る場合には，上の例のように，ファイル名だけを指定してやれば正しくリンクを張ることができます．しかし，「tokage.html」のように，「neko.html」の含まれるフォルダの中にある別のフォルダの中（これを「一つ下の階層」といいます）にリンクしたいファイルがある場合，上の例のように，「フォルダ名/ファイル名」で指定してやらなければなりません．

さらに，「tokage.html」から，「neko.html」にリンクを張ることを考えましょう．このとき，「neko.html」は，「tokage.html」の一つ上の階層にあります．この場合には，「../neko.html」と指定してやります．

また，上の例にある「target=""」オプションにより，「_blank」で新しいウインドウを開くよう指定することができます．うさぎマニアのページへのリンクをクリックすることで確認してください．このオプションをつけなければ，同じウインドウにリンク先ファイルが表示されます（とかげマニアのページへのリンクをクリックすることで確認してください）が，このオプションを「_self」としても同じことになります．

2.11.他サイトへリンクを張ろう

他サイトへリンクを張るやり方も，基本的には，ファイルへのリンクの仕方と同じです．次のようにファイルを変えてみてください．

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffeedd" text="#996600" link="#ff9900" vlink="#cc9966" alink="#ffcc00" >
ねこマニアのホームページへようこそ．
寺脇研究室のページは<A href="http://www.taku-t.com/" target="_blank">こちら</A>です．
</BODY>
</HTML>

次のようになれば，とりあえず成功です．リンク文字をクリックして，私のページが表示されるか確認してみてください．

ねこマニアのホームページへようこそ．

寺脇研究室のページはこちらです．

他サイトへリンクを張る場合には，ファイル名を「リンクサイトのURL」に変えるだけです．但し，サイトによっては，リンクを制限している場合や，リンク先ページを指定している場合がありますので，注意が必要です．リンクを張る場合は，一言お断りのメールを出しておくのがいいでしょうね．

URLって何？
Uniform Resource Locaterの略で，要はホームページアドレス（住所）のことです．

2.12.メール送信リンクをつくろう

次のように，リンク先を変えてみましょう．

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffeedd" text="#996600" link="#ff9900" vlink="#cc9966" alink="#ffcc00" >
ねこマニアのホームページへようこそ．
管理者へのメールは<A href="mailto:masala.terawaki@nifty.ne.jp">masala.terawaki@nifty.ne.jp</A>へ．
</BODY>
</HTML>

次のようになれば，とりあえず成功です．

ねこマニアのホームページへようこそ．

管理者へのメールはmasala.terawaki@nifty.ne.jpへ．

この「mailto:メールアドレス」は，メール送信のための命令です．閲覧者が，このリンク文字をクリックすると，自身の設定しているメーラーが立ち上がり，アドレスが自動的に入力されます．但し，閲覧者の都合により，かならずしもメーラーが立ち上がるとは限りませんので，上の例のように，アドレスを直接表示しておく方がよいでしょう．

メーラーって何？
Outlook Express，Postpet，Al-mailなどの電子メールソフトのことです．

次ページへ

page 1 / 2 / 3 / 4