mamohoのＨＰ作成講座

リンクを貼ってみよう　自分のサイト編

●　リンクを貼ってみよう　自分のサイト編

今回は　自分のサイトのページから各ページへのリンクを考えてみましょう
楽天広場をご利用の場合は　あまり　フォルダの区分け的なことは
考慮しなくてもいいのですが　ちょっと勉強してみましょう

まず　私のページ「HPは難しくない」のトップから　
HTMLの構造のページにリンクする場合で考えてみましょう　
で　普通にURLをリンクする場合は

<a herf="http://plaza.rakuten.co.jp/mamoho/002000">HTMLの構造</a>

と　記述してみます　すると下記のようになります

でも　このページは　自分のページ同士なので　http://～　を省いて
書いても　ちゃんとリンクしてくれます
ですから　下記のように書いてみます

<a href="/mamoho/002000">HTMLの構造</a>

すると　下記のようになります

おなじようにリンクされていますねちょっとしたことですが　少し手間が楽になりました

◆　絶対URLと相対URL

ちょっと難しい話ですが　お付き合いください

HTMLで　リンクを設定したり　画像を表示させたい場合は　正確にそのリンク先や
画像の場所を指定する必要があります
この設定方法には　絶対URLと　相対URLがあります

○　絶対URL

あるファイルの場所を　全体から見て　もととなる位置から階層をたどって順に
記述する方法です　一般的には　他のサイトのURLや　画像を指定するときに使います
「http://～　から　始まります

○　相対URL

ファイルの同士の位置を　基準とするファイルから見てどこにあるのかを
相対的に記述する方法です　主に　自分のサイトのページ内のリンクには
これを使います　ファイルの位置関係によって　若干　記述方法が異なります

相対URLでは　基準になるファイルからフォルダにあるファイルにリンクする場合　
「/」　を入れて記述します基準になるファイルから　フォルダの外側にあるファイルにリンクする場合は　「../」を入れて
ひとつ上の階層にあがってリンクするようになっています

　□　index.html　から　同じ階層jにある　page_01.html　に　リンクする場合は

　　　<a href="page_01.html">ページ１</a>　　

　□　index.html　から　folder_a　というフォルダ内に　page_01.htmlがある場合は

　　　<a href="folder_a/page_01.html">ページ1</a>

　□　folder_a　というフォルダ内の　page_01.htmlから　　　　 フォルダの外にある　index.html　にリンクする場合は

　　　<a　href="../index.html">トップページ</a>

なんだか　わけがわからなくなってきますね（笑）
実際にHPを作るようになったら　こんな感じにリンクされているんだということだけ
ご理解いただければ結構です