セクション6  テキスト

6-1 パスの説明


ホームページでリンク(ハイパーリンク)は不可欠です。リンク元とリンク先との関係をよく理解しましょう。リンクはaタグで定義します。
サンプル ソースコード
例1） 同じフォルダ内へリンクする場合
「HTMLリファレンス セクション5 画像」へ
  1. フォルダ内の「HTMLリファレンス セクション5 画像」へ移動
 
例1） 同じフォルダ内リンクする場合
<a href="html_5.html">
「HTMLリファレンス セクション5 画像」へ
</a>
例2） 一階層上へリンクする場合
「このサイトのトップページ」へ
  1. このホームページのトップページへ移動
 
例2） 一階層上へリンクする場合
<a href="/reference/">
「このサイトのトップページ」へ
</a>

サンプル ソースコード
このページの一番上へ
  1. ページ内へのリンクも可能。この場合各ページのトップに移動
  2. <a name="example"></a>とあらかじめリンク先の場所にネームタグを作っておくこと
  3. Dreamweaner 上で<a name="example"></a>と記述すると記述した場所に このようなアイコンが出てきます。
  <a href="#top">
このページの一番上へ
</a>

6-2 テキストにリンクを貼る１


リンクしたいテキストをタグで挟みます。 リンク先はHTMLページでも画像でもOKです。
サンプル ソースコード
「6-1パスの説明」へ
  1. 「6-1パスの説明」部分へ移動
  <a href="6_1.html">
「6-1パスの説明」へ
</a>

6-3 テキストにリンクを貼る２（色の変更）


リンクテキストの内側をタグで挟みます。
サンプル ソースコード
セクション3 3-3文字の色へ
   <a href="html_3.html">
<font color="#cc00cc">
セクション3 3-3文字の色へ
</font>
</a>

6-4 テキストにリンクを貼る３（リンク先が他のサイトの場合）


リンク先が他のサイトの場合、httpから始まるアドレスを指定します。ターゲットブラン target="_blank"（指定を入れておくとブラウザの別のページが開きます。）もあわせて指定し、別ウィンドウで表示しましょう。
サンプル ソースコード
甲府城下町
  1. 「甲府城下町」のHPが別ウィンドウで開く
  <a href=
"http://takedashingen.com/" target="_blank">
甲府城下町</a>
 
ターゲットブランクで別ウィンドウで表示させるのは、エンドユーザーの使いやすさを考えてのことです。


作業に夢中になっているといつの間にか忘れてしまうターゲットブランク。
アップしてから別ページになっていないことに気がつくやるせなさ・・・・。汗

6-5 画像にリンクを貼る１


リンクを張ることができるのはテキストだけではありません。
画像にリンクを貼ってボタンとして使用したいとき、拡張子が［.jpg］、［.gif］の写真どちらでも指定できます。
サンプル ソースコード
リンクボタン
  1. リファレンス5の「5-5-画像の枠へ」移動
  <a href="html_5.html">
<img src="image/6_4_1.jpg"
alt="リンクボタン" width="170"
height="32" border="0" />
</a>

6-6 画像にリンクを貼る２（リンク先が画像の場合）


小さい画像から拡大画像へリンクを貼ってページを開くときターゲットブランクも指定しておきます。
サンプル ソースコード
菜の花
上の画像をクリック
  1. 拡大画像が別ウィンドウで開く
  <a href="image/6_6_2.jpg" target="_blank">
<img src="image/6_6_1.jpg" alt="菜の花" width="200" height="155" border="0" />
</a>

6-7 自動的にメールを設定


ページ内にメールへのリンクを貼りたいときに設定します。クリックするとメールソフトが開き、指定アドレスが宛先のアドレスに記入されます。
サンプル ソースコード
メールアドレスはこちらです
  1. メールソフトが起動
  <a href="mailto:dammy@**.co.jp">
メールアドレスはこちらです</a>
 
この方法でメールアドレスをページに表示されるように記述すると、メアドの検索収集システムに引っかかり、迷惑メールが多大になるので、気を付けてください。

6-8 画像の一部にリンクを貼る


画像の一部に貼る場合（クリッカブルマップといいます。）、手組みで設定するよりホームぺージ作成ソフトなどを使ったほうが簡単に設定できます。 参考までに掲載します。
タグとソース 説明
<img name="example" src="example.jpg" usemap="#******"> 画像名を指定 画像を表示 <map name="*">に指定する名前
<map name="*"></map>  
<area shape="rect" coords="***" href="example.html"> shape="rect"四角形の範囲を指定します。対角にある２点(x1,y1),(x2,y2)の座標で指定 座標は画像の左上を(0,0)とし、そこからプラスのピクセル数 リンク先ページ


サンプル ソースコード
羽田空港
上の画像の飛行機部分をクリック
  1. 赤い罫線部分にクリッカブルマップを定義。指定部分だけリンク可能
  <img name="n6_8" src="image/html_6/6_8.jpg"
width="300" height="225"
border="0" usemap="#map"
alt="">
<map name="map">
<area shape="rect" coords="159,57,214,110" href="
http://travel.biglobe.ne.jp/
ana/index-aty.html"
target="_blank" title="羽田空港"
alt="羽田空港" >
</map>
オプション   オプション
飛行機
上の画像の飛行機部分をクリック
  1. tableを使ってのリンク指定。写真を5つに分けて書き出し赤い罫線の写真にリンクを定義
  <table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/html_6/
photo_5_6.jpg"
alt="" width="300" height="42" border="0">
</td>
</tr>
<tr>
<td>
<img src="images/html_6/
photo_6_6.jpg"
alt="" width="160" height="53" border="0">
</td>
<td>
<a href=
"http://travel.biglobe.ne.jp/
ana/index-aty.html"
target="_blank">
<img src="images/html_6/
photo_6_7.jpg"
alt="飛行機" width="55"
height="53" border="0">
</a>
</td>
<td>
<img src="images/html_6/
photo_6_8.jpg"
alt="" width="185" height="53" border="0">
</td>
</tr>
<tr>
<td colspan="3">
<img src="images/html_6/
photo_6_9.jpg"
alt="" width="400" height="190" border="0">
</td>
</tr>
</table>

 
tableの仕組みが理解できるようになってきたら、上記のオプションのようにtableで組みましょう。

6-9 リンクしたテキストの色の変化


ページ全体のリンク文字の色を初期設定以外にしたいとき <body>タグにそれぞれ指定します。 背景色との関係で見えにくくなったときなどに便利です。
link="#000000"・・・未訪問のリンク
vlink="#000000"・・・既訪問のリンク
alink="#000000"・・・クリック中のリンク
サンプル ソースコード
link と vlink と alink の色の
変化がわかる
クリックしてください。
  1. 何もしていないときはテキストの色がグリーン、テキストをマウスで触るとオレンジ色に、クリックした後はレッドとlink と vlink と alink の色の変化がわかる
  <body link="#339900" vlink="#ff0000" alink="#ff9900">