３章 タグ


Fリンク（a href・link）

いよいよ出てくるタグもこの章の２個のみです！ここではHP作りに欠かせない「リンク張り」について
のタグを紹介します。チョット仕組みが複雑かもしれませんが、しっかりマスターしましょう(^0^)

<html>
<head>
<title>MaNaPage</title>
</head>
<body bgcolor="yellow" alink="red" vlink="#808000" link="#00FF00">
<center>
<font size="+4" color="#0000FF"><b><i>MaNaPage</i></b></font>
<hr>
タイトルの後はいよいよ本文の打ちこみ、だんだんHPぽくなってきたかな？<br>
だんだんタグも増えてきたけれど、後もうチョットだからがんばっていきましょう(^0^)！<br>
<table border="1" bordercolor="#CC00FF">
<tr><td>巨人</td><td>中日</td><td>横浜</td></tr>
<tr><td>ヤクルト</td><td>広島</td><td>阪神</td></tr>
</table>
<br>
<a href="tag6.html">前のページへ戻ってみよう。</a>
<br>
画像にもリンクが張れるよ(^^)→<a href="../rah.html"><img src="wel_1.gif" border="0" width="90" hight="70"></a>
<br>
もちろん<a href="mailto:c189mana@orions.ne.jp">メールも送れるよ♪</a>
</center>
</body>
</html>
　ソース上での入力
↓
MaNaPage
タイトルの後はいよいよ本文の打ちこみ、だんだんHPぽくなってきたかな？
だんだんタグも増えてきたけれど、後もうチョットだからがんばっていきましょう(^0^)！
巨人中日横浜
ヤクルト広島阪神

前のページへ戻ってみよう。

画像にもリンクが張れるよ(^^)→

もちろんメールも送れるよ♪
　HTMLファイルへの表示
図3-7-1 画像張りの例

<a href="アドレス">●</a>

リンク・ページの移動・メール送信のタグです。リンクの場合にはhttpから始まるアドレスをタグ内に
打ちこみます。ページの移動の場合には、それぞれのページのアドレス全体を打ちこんでもかまわな
いのですが、そうすると一度HP外へ出て探しなおすことになるので時間がかかります。例えば、ある
HPが図3-7-2のようなディレクトリ（フォルダ）構成だったとします。

┌main.html
│
├folderA┬subA1.html
│├subA2.html
││
│└folderAA─subAA1.html
│
└folderB┬subB1.html
│
└folderBB─subBB1.html
図3-7-2 HPディレクトリの例

このディレクトリにおいて、例えば「subA1.html」から「subA2.html」へと移動するときは、両ファイルと
も「folderA」内にあるので<a href="subA2.html">●</a>の様にファイル名のみを打ちこみます。

「subA1.html」から「subAA1.html」の様に１つ下のフォルダのファイルへ移動したい場合は
<a href="folderAA/subAA1.html">●</a>の様に下がりたいフォルダの後に「/」を記入します。
（「/」前のフォルダは同列にあることが前提です）

逆に「subA1.html」から「main.html」の様に１つ上のフォルダのファイルへ移動したい場合は
<a href="../main.html">●</a>の様に「../」をつけて１つ上のディレクトリへとあがります。

前記した通り、このタグを使ってメールを受け付けることもできます。その場合には図3-7-1の様に
<a href="mailto:アドレス">●</a>で設定できます。

それではこの「a href」タグの使い方を図3-7-3でまとめてみましょう。

　移動前　移動後　タグ
　HP内　YAHOO　<a href="http://www.yahoo.co.jp">●</a>
　HP内　マナのメールアドレス　<a href="mailto:c189mana@orions.ne.jp">●</a>
　subA1.html　subA2.html　<a href="subA2.html">●</a>
　subA1.html　subAA1.html　<a href="folderAA/subAA1.html">●</a>
　subA1.html　main.html　<a href="../main.html">●</a>
　main.html　subBB1.html　<a href="folderB/folderBB/subBB1.html">●</a>
　subAA1.html　subB1.html　<a href="../../folderB/subB1.html">●</a>
図3-7-3 「a href」タグの使用例
※図3-7-2のディレクトリを参考にしています。

<body link="色" vlink="色" alink="色">●</body>

リンクを張った文字の色を設定するタグです。図3-7-4を参照してください。

　属性　設定事項
　link　移動したことのないリンク先の色
　vlink　移動したことのあるリンク先の色
　alink　クリックした際の色
図3-7-4 link属性一覧

このHPの扉で出てくるタグはこれで全てです。これらのタグで十分にいいHPが作れると自分は確信
しています！後は自分のハードディスクで作ったHPをプロバイダーに与えられたサーバにアップロード
すれば、いよいよ完成です、その方法は４章にて説明します。