dreamgate事業一覧
IT用語辞典

事業案内 HP制作・SEO 郡上ホームページ教室

リンクの作成
ホームページの醍醐味は、リンクのクリックにより次々と関連するページを表示できること。リンクが全く配置されていないホームページなんて、ほとんど見かけません。それほどリンクは重要な要素です。

→ 相対パスと絶対パス
リンクを知るには、まず“相対パス”と“絶対パス”の違いを理解しなければいけません。“相対パス”とは、現在の位置を基準にリンク先を相対的に指定する方法です。たとえば、現在表示されているページのURLが「http://www.dreamgate.info/index.html」であったとしましょう。
ここから、 「http://www.dreamgate.info/photo.html」へリンクさせる場合、リンク先の指定は「photo.html」となります。
リンク先が「http://www.dreamgate.info/photo/index.html」であった場合は「photo/index.html」。つまり、現在の位置(フォルダ)からどうやってリンク先にたどり着くかを指定するのが“相対パス”です。
対して“絶対パス”は、「http://www.rakuten.co.jp/」のように「http://」から始まるURLを全て指定する方法となります。

リンク先の指定は“相対パス”と“絶対パス”のどちらを利用しても構いませんが、自分のホームページ内を移動するときは“相対パス”、他人のサイトへリンクするときは“絶対パス”を利用するのが一般的です。なお、“相対パス”で一つ上のフォルダを指定するときは「../」と記述します。

→ 文字のリンク
実際にホームページにリンクを作成するには、HTMLでは<A>〜</A>タグを使ってリンクを実現します。具体的には、<A>〜</A>タグの間に挟まれた項目がリンクとして表示する内容、href属性で指定したパス(相対パスまたは絶対パス)がリンク先、となります。たとえば、文字でリンクを作成する場合の記述方法は以下のようになります。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ!</TITLE>
</HEAD>

<BODY>
<A href="photo.html">写真のページへ</A><BR>
<A href="http://www.rakuten.co.jp/">楽天へ</A>
</BODY>

</HTML>

→ 画像のリンク
画像でリンクを作成する場合は、<A>〜</A>タグの間に<IMG>タグを挟むような構造になります。たとえば、以下のようにHTMLを記述すると画像のリンクを作成できます。なお、リンク用の画像は自動的に青い枠線が表示されます。この枠線を表示したくない場合は、<IMG>タグでborder属性を「0」に指定してください。これで、画像の枠線が表示されなくなります。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ!</TITLE>
</HEAD>

<BODY>
<A href="photo.html"><IMG src="image01.jpg" border="0"></A><BR>
<A href="http://www.dreamgate.info/"><IMG src="dreamgate.gif" border="0"></A>
</BODY>

</HTML>

(※1) 詳しくは、「郡上ホームページ教室」にて・・・


スポンサーサイト
現代津軽三味線・徳山流 徳山弦泉 公式ホームページ
演奏活動・三味線教室・オリジナル曲の紹介。CD試聴できます。
http://www.t-gensen.com/
郡上プラザどっと混む|郡上の情報サイト
郡上の情報サイト「郡上プラザどっと混む」は郡上で活躍する方たちを応援するサイト。
http://gujoplaza.com/

Gujo sunset
あの町 この町 日が暮れて
郡上おどり日程表
自動で被リンクが増殖する新しいリンクシステム。登録無料!アクセスアップ・SEO対策にご利用下さい。
郡上のイベント

C2006−2011 dreamgate
Google